Feb 15 / tsauri28

Membuat Theme WordPress – Bag 1

Programming, Tutorial, wordpress, wp hack

Sudah lama ingin membuat tutorial ini, selalu bentrok dengan malas dan keterbatasan inspirasi , namun sekarang lah saatnya, kita mulai dari yang paling dasar, semangat!!.

Asumsi awal, kita telah mempunyai 1 (satu) halaman template (.html) yang siap dikonversi menjadi theme wordpress. Nah, sebelum ke teknis bagaimana membuat theme tersebut sebaiknya kita bahas terlebih dahulu tentang struktur direktori dari theme wordpress itu sendiri.

WordPress memiliki struktur direktori theme yang cukup mudah dimengerti, wordpress menyimpan semua file-file theme kedalam satu direktori yang ditempatkan di bagian wp-content -> themes. Jadi jika kita akan membuat satu theme buat satu direktori (contoh : 2133), kemudian simpan di direktori themes.

Sedangkan di dalam direktori theme itu sendiri setidaknya memiliki file-file berikut ini :

style.css
Ini untuk menyimpan style untuk theme kita. Tetapi ada hal yang penting disini, nama file harus tetap style karena engine wordpress hanya membaca nama file tersebut, kemudian di dalam file ini harus disimpan juga informasi tentang theme (akan dibahas selanjutnya).
screenshot.png
Adalah file gambar yang akan dibaca oleh engine WP.
index.php
File yang pertama kali akan di-render, biasanya untuk halaman utama blog.
functions.php
File yang berisi fungsi-fungsi yang ada pada theme kita, seperti fungsi untuk pengaturan widget, panel dan sebagainya.
header.php
File ini menyimpan header theme kita. Yang saya maksud header disini adalah bagian yang sering digunakan kembali dibagian lain (index, single, page, dsb).
sidebar.php
File ini akan ditempatkan sebagai sidebar blog kita. Pengaturan agar terhubung dengan widget terletak di file functions.php, file ini pun adalah bagian yang sering digunakan kembali.
footer.php
File untuk footer blog.
single.php
Adalah file untuk halaman detail sebuah posting.
page.php
Adalah file untuk halaman detail sebuah page.
comments.php
File untuk menyimpan list komentar dan form komentar.

Untuk lebih lengkapnya (tentang struktur theme wp) bisa dibaca di wordpress codex, site architecture dan template hierarchy. Selanjutnya kita langsung lakukan langkah-langkah berikutnya :

Step 1
Buat folder theme yang akan kita buat, salin file html (dan kelengkapannya) ke folder tersebut. Kemudian buat 10 (sepuluh) file yang disebutkan diatas (file kosong pun tidak masalah).

Step 2
File css yang telah dibuat, sesuaikan dengan ketentuan WordPress -rename menjadi style.css. Kemudian di baris paling atas tambahkan komentar berupa informasi theme yang akan dibuat. Contoh :

/*
Theme Name: t-simple
Description: 2 Column, CSS, xHTML, JQuery.
Version: 0.1
Author: Asep Sufyan Tsauri
Author URI: http://www.tsauri28.myhaley.com/
*/
/* css-nya dilanjut disini */

Komentar ini akan dibaca oleh engine sebagai informasi utama theme.

Step 3

(sementara bersambung dulu ya.. )

Hormat Saya, signature