Tutorial Membuat Tema Wordpress dengan 2 Sidebar

Melanjutkan posting sebelumnya tentang membuat Templat Sederhana dengan CSS dan HTML5, selanjutnya templat bisa digunakan untuk membangun tema CMS Blog. Sesi ini mencoba menerapkan templat tersebut untuk Tema Wordpress, mari dimulai saja jangan banyak cincong! :-)

Desain awal
Desain awal adalah seperti ini, saya tandai kotak merah yang akan disisipkan kode php dari fungsi-fungsi Wordpress.

Desain awal

Dengan demikian terdapat bagian header, 2 buah bilah sisi (sidebar 1 & sidebar 2), dan content.
Berikutnya saya ambil kode index.html dan style.css dari posting sebelumnya untuk dimodifikasi.

Implementasi

1. Buat berkas header.php, isi kode lihat disini.
2. Modifikasi index.html tersebut dan simpan sebagai berkas php menjadi index.php.
3. Buat berkas functions.php, isinya lihat disini.
4. Modifikasi index.php, sisipkan fungsi header, sidebar, looping content pada bagian "Leftbar", "Rightbar", dan "Content" seperti disini.
5. Modifikasi style.css, hapus properti height pada selector #content
6. Kumpulkan berkas-berkas tersebut dalam satu direktori, dan letakkan di direktori themes Wordpress.
7. Tema siap dipasang. 
8. Masuk ke Widgets Wordpress dan dapati 2 buah Sidebar yang telah dibuat.

Hasil
Hasil kurang lebih seperti dibawah ini. Jika ingin terlihat cantik, ubah sendiri menurut selera. :-)

Hasil Tema Wordpress sangat light banget :-)

Semoga bermanfaat.

Referensi:
[1] Theme Development, Basic Templates
[2] Designing Headers
[3] Function Reference
[4] Widgetizing Themes
[5] Function Reference/register sidebars