My last Tweet..

CodeIgniter from Scratch: File Operations http://bit.ly/bYBDf7
{ Follow Me }
   

Catatan-catatan pembelajaran pribadi Asep Sufyan Tsauri.
— Founder MyHaley.Com, Guru TIK, Web Desainer & Blogger :) (?)

Membuat Theme Wordpress – Bag 1

ilustrasi: Membuat Theme Wordpress – Bag 1 Membuat Theme Wordpress – Bag 1

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.

struktur-theme-wp

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

struk-wp

  1. 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).
  2. screenshot.png
    Adalah file gambar yang akan dibaca oleh engine WP.
  3. index.php
    File yang pertama kali akan di-render, biasanya untuk halaman utama blog.
  4. functions.php
    File yang berisi fungsi-fungsi yang ada pada theme kita, seperti fungsi untuk pengaturan widget, panel dan sebagainya.
  5. 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).
  6. 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.
  7. footer.php
    File untuk footer blog.
  8. single.php
    Adalah file untuk halaman detail sebuah posting.
  9. page.php
    Adalah file untuk halaman detail sebuah page.
  10. 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 :

1
2
3
4
5
6
7
8
/*
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

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

Komentar Teman-Teman.. {14}


Rijal fahri

Nice artikel, padahal susah banget buat template he…he….
butuh waktu untuk supaya bisa saya hanya bisa ubah didikt aja

mampir ya ke blog saya

http://blog.watches-collections.com

— 17 February 2009

AnZhu

Kang, tiasa lebih di ‘make it easy’….hehe.. training atuh Qt2.diantoz

— 24 February 2009

AnZhu

It’s great…

— 24 February 2009

tsauri28

@Rijal Fahri : Sudah mampir mas.. selamat berjuang di Asian Brain ! :)

@AnZhu : Insyaallah, tulisan kedepannya akan diusahakan untuk “lebih manusiawi”. Maklum masih belajar menulis… :D

— 26 February 2009

Ndiez

Akhirnya saya menemukan juga tutorial buat bikin templet wordpress…

nuhun sep,,

— 8 March 2009

neyra

makasih bozz tutorialnya. lebih ngerti saya pake tutorial punya situ

— 19 June 2009

tsauri28

@neyra: Sama2, mudh2an bermanfaat dan mudah diaplikasikan :)

— 19 June 2009

owner www.icakicik.com

Nice artikelnya, salam kenal

— 22 June 2009

micro komputer

thank mas

— 31 July 2009

ryo

jangan lupa mampir ke blog saya..

http://funsmedia.co.cc

— 27 October 2009

ryo

mampir juga ke blog sya ya mas2 semua..

http://funsmedia.co.cc/

— 27 October 2009

Yaya'

Salam akhi,
untuk blogspot biar punya theme dan ada background yang berwarna sehingga lebih menarik gimana ya?

Wassalam, Yaya’

— 2 December 2009

mussoli

salam kenal, terusannya kalo udah di buat saya ingin secepatnya tahu, jgn setengah2 donk kklo mau ngasih ilmu heheheheeheh, punteun ah

— 10 March 2010

Trackback

Tinggalkan Komentarnya di Sini Ya.. :)

Tag-tag yang diizinkan : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

top