[Part 1] Membuat Folder Struktur - Membuat Theme WordPress

Tidak sedikit dari kita atau bagi para pemula yang menginginkan belajar bagaimana membuat thema sendiri, meskipun standar tapi ada rasa tersendiri ketika membuat dengan hasil sendiri. Theme bagi WordPress sangat penting untuk menarik perhatian orang, dan banyak sekali diluar sana yang sangat mahir membuat theme sesuai keinginannya sendiri.

Disini saya mau berbagi pengalamanan sesama pemula yang ingin membuat theme untuk pemula. Saya pun sama pemula, mari kita belajar bersama-sama.



Langkah awal untuk membuat theme yaitu install dulu WordPress nya di localhost untuk uji coba, jika belum tau caranya, silahkan kunjungi link berikut Cara Install Wordpress di Localhost.

Jika sudah tau langsung saja ke tahap selanjutnya. Sesuai judulnya, kita akan membuat folder struktur terlebih dahulu untuk permulaan, apa saja folder/file yang akan buat? ikuti langkah dibawah ya.

Sebelumnya kita akan membuat theme seperti gambar berikut:

 Selengkapnya silahkan download file psd nya disini.

Selanjutnya buka terlebih dahulu folder installasi WordPressnya, buka file wp_config.php lalu edit WP_DEBUG nya menjadi "true", lihat gambar dibawah.

Save file tersebut.

1. Pertama buat dahulu folder untuk themenya, nama bebas terserah anda. Setelah itu buka folder tersebut dan buat kembali beberapa folder lainnya, seperti:

• css
• img
• inc
• js
• sass
• template-parts

Note : Sass adalah tools yang biasa digunakan oleh para front-end developer masa kini untuk membuat CSS yang mudah untuk dikembangkan, dirawat serta dimodifikasi. Dalam istilah teknisnya, Sass tergolong kedalam preprocessor CSS (Source: ambercat.rahmanda.net)

2. Kalau sudah membuat folder tersebut, lalu kita membuat file nya. Seperti yang diketahui, theme di WordPress memiliki banyak file .php, .js, dan .css. nah kita akan membuat file tersebut terlebih dahulu. Buatlah file-file berikut di folder theme anda:

• footer.php
• header.php
• index.php
• style.css

File tersebut adalah file default yang akan kita gunakan nanti. Lalu langkah selanjutnya kita akan buka file style.css terlebih dahulu. Lalu isikan text berikut:

/*

Theme Name: Sunda Theme

Theme URI: http://gidhan.com/sunda-theme

Author: Gidhan

Author URI: http://gidhan.com

Description: The perfect theme for your Blog. Crispy, eautiful and awesome in every resolution. Ready for responsive, with multiple custom options in the Administration Panel to make this Theme your definitive ally for your daily blog.

Version: 1.0.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: blog, sidebar, responsive, minimal, clean, icon font, Sunda, custom admin options.

/* 

Theme Name, Theme URI, Author dll bebas terserah anda mau isi apa saja, yang penting terlihat seperti diatas.

Setelah itu buka file footer.php, header.php, index.php lalu isikan script berikut:

• Untuk file footer.php masukkan script: <?php wp_footer(); ?>
• Untuk file header.php masukkan script: <?php wp_header(); ?>
• Untuk file index.php masukkan script:  
• <?php wp_header(); ?>
•  
• <?php wp_footer(); ?>

• Save semua file.

Lalu copy folder theme yang sudah anda buat tadi pasterkan di folder htdocs (ex: C:\xampp\htdocs\gidhan\wp-content\themes), contoh nama folder dan isi folder theme yang sudah saya buat tadi.

Sunda nama folder themenya. Selanjutnya masukkan gambar screenshot ke dalam folder themenya, gambar terserah anda/screenshot dari theme yang akan anda buat.

Setelah selesai lalu buka browser anda login WordPress anda di localhost/wordpress(nama folder wordpress)/wp-admin. Lalu lihat di "Appearance" disitu sudah muncul theme yang sudah kita buat, bisa digunakan tapi masih blank putih karena belum kita isi script lainnya.

Tampilan deskripsinya

Untuk tutorial Membuat Folder Struktur nya cukup sekian, selanjutnya kita akan membuat tutorial Bagaimana Cara Untuk Membuat Custom Admin Page, jadi pantengin terus blog saya ya, see you next lesson.