Nov 10, 2008
Tutorial Cara Membuat Theme WordPress Sendiri ( Langkah #3 : Membuat File Dasar Theme WordPress : index.php & style.css)
oleh Fikri
Lanjutan dari seri Tutorial Cara Membuat Theme WordPress Sendiri. Untuk memastikan tidak ada miskonsepsi, kami rekomendasikan anda membaca seri post ini dari awal :
- Langkah #0 : Pendahuluan, serta tools – tools yang dibutuhkan
- Langkah #1 : Memahami Struktur File Theme WordPress
- Langkah #2 : Memahami Tag – tag XHTML & Kegunaannya, dan aturan penulisannya
Ok. untuk materi persiapannya kami kira cukup dengan 3 post diatas. sekarang kita masuk ke langkah – langkah membuat theme. Pada post kali ini kita akan membuat file dasar Theme WordPress : index.php & style.css.
Perlu anda ketahui, tidak ada aturan baku langkah per langkah membuat theme wordpress. Selama theme tersebut bekerja, lakukan. jadi langkah yang kami buat disini adalah langkah “versi kami”, berdasarkan apa yang sudah kami lakukan
Sekarang, seperti yang sudah kami katakan pada langkah #0 : anda membutuhkan Engine WordPress yang terinstall pada komputer lokal anda. sekarang, nyalakan XAMPP Control Panel, nyalakan server apache dan Database Mysql.
Buat direktori dengan nama latihantheme pada direktori themes wp-content anda. Jika anda menginstall sesuai petunjuk kami pada partisi C, lokasinya direktorinya berarti ada di : C:\xampp\wordpress\wp-content\themes\ . buat direktori latihantheme disini
lalu buka wordpress lokal anda : Buka browser anda, jika anda mengikuti panduan instalasi wordpress pada halaman lokal ini, maka ketik url address ini : http://localhost/wordpress/
Lalu, buka aplikasi Notepad++ anda.
Membuat File style.css
Ketik / Copy Paste script ini pada notepadd ++ anda :
/* Theme Name: Theme Latihan Theme URL: http://www.bloggingly.com Description: Theme untuk latihan Version: 0.1 Author: Nama Saya Author URL: http://namabloganda.com Tags: red, fixed width, two columns, widget ready Theme ini di desain oleh <a href="http://namabloganda.com">Nama Anda</a> */
Save dengan nama style.css di direktori latihantheme ( C:\xampp\wordpress\wp-content\themes\latihantheme )
Membuat File index.php
Buka file baru pada notepad ++ anda.
Ketik / Copy Paste script ini pada notepadd ++ anda :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> </body> </html>
Save dengan nama index.php di direktori latihantheme ( C:\xampp\wordpress\wp-content\themes\latihantheme )
Memahami apa yang baru saja kita lakukan :
Sekarang masuk ke dashboard wordpress lokal anda. masuk ke bagian Design > Themes, Anda akan mendapati ada kolom baru untuk Theme Latihan :
- Data yang anda ketik setelah Theme Name : menjadi nama theme anda
- Data yang anda ketik setelah Theme URL : menjadi link nama theme anda
- Data yang anda ketik setelah Description : muncul menjadi deskripsi theme anda
- Data yang anda ketik setelah Tags : muncul menjadi tag untuk theme anda
- Version. Author, Autor URL dan data Theme ini di desain oleh <a href=”http://namabloganda.com”>Nama Anda</a> tidak muncul di dashboard admin anda, namun anda tetap harus menuliskannya, karena data ini akan berguna ketika anda mensubmit theme ke direktori theme wordpress, atau ketika desain orang ingin melihat siapa pembuat theme melalui file style.css ini.
Yup, cukup untuk pembahasan post ini. Yang kami bahas pada post kali ini memang hanya pembuatan file dasar theme wordpress saja : index.php dan style.css
Ada pertanyaan? atau Ada langkah yang kurang jelas? Atau mungkin ada yang terlewat? izinkan kami mengetahuinya. silahkan sampaikan pandangan anda melalui kolom komentar
Enjoy!
Dapatkan update harian bloggingly GRATIS di RSS Reader anda! Subscribe sekarang RSS FEED BLOGGINGLY !
Apa itu RSS? Kenali RSS di halaman ini

Moslem bilang,
makasi tuto nya cz
on 14 Dec 2008 / 10:44
firman bilang,
aslm, salam kenal
pertama saya dah istal XAMPP dan angine wordpress, tapi bukan pada C:\xampp\wordpress\wp-content\themes\ . buat direktori latihantheme, nelainkan di C:\xampp\htdocs\wordpress\wp-content\themes\ pada desaign themenya cuman muncul layar theme blank, itu gmn ?
on 29 Dec 2008 / 13:41
F bilang,
di halaman Designnya belum ada screenshotnya? Ooh, itu karena belum file image screenshotnya.
on 30 Dec 2008 / 10:00
zackline bilang,
nah ini dia gw cari.,…,.,.,…
than’s om ane mo coba2
on 05 Apr 2009 / 02:02
Mr. Udien bilang,
Nice Post Deh. Tq. Ilmu yang diberikan semoga bermanfaat buat kita semua
on 17 Aug 2009 / 08:45
adry bilang,
lengkap bgd nih, cukup jelas..
tapi kalo server itu kita gunakan localhost dari dreamwever bisa ga?
dreamwever kn juga otomatis meminta folder dimana kita bisa menyimpan file-file design tersebut
on 14 Dec 2009 / 12:46
Ian Hafild bilang,
bagus mas… akan saya coba dirumah…
keep posting yah…
on 20 Feb 2010 / 00:17
Tutorial Cara Membuat Theme Wordpress Sendiri ( Langkah #5 : Mendesain Theme Menggunakan CSS ) bilang,
[...] Langkah #3 : Membuat File Dasar Theme WordPress : index.php & style.css [...]
on 10 Apr 2010 / 11:58
Tutorial Cara Membuat Theme Wordpress Sendiri ( Langkah #2 : Memahami Tag - tag XHTML & Kegunaannya, dan aturan penulisannya ) bilang,
[...] Selanjutnya, Langkah #3 :Membuat File Dasar Theme WordPress : index.php & style.css [...]
on 10 Apr 2010 / 12:06
Tutorial Cara Membuat Theme Wordpress Sendiri ( Langkah #4 : Memuat Konten Blog Ke Dalam Theme) bilang,
[...] Langkah #3 : Membuat File Dasar Theme WordPress : index.php & style.css [...]
on 10 Apr 2010 / 12:12
cencen bilang,
bagus mas.. ini mulai dari sini tutorial yang saya cari cari, WP emang engine paling sip baut bikin web instant. Yang pertama diperhatikan emang tampilannya dan CMS using friendly dan secure tentunya
on 21 May 2010 / 19:02
Stefanus Diptya bilang,
Mantab gan….
ini yg ane cari…
tpi sya masih bngung mas.., apakah design wordpress tak sebebas design web diluar theme wordpress yaa??
apakah ada aturan baku dalam men-design pada theme wordpress?? misalnya id dan class harus mengikuti aturan pada html content’a??
tolong jelasin juga mas kegunaan dan cara penggunaan fungsi2 wordpress? saya bingung.. hahahaha thx ya..
Salam blogger. eSDhee Weblog
on 05 Jul 2010 / 13:42
Fikri bilang,
Penggunaan ID n class nya mah bebas kok, dan membuat theme wordpress itu, berdasarkan pengalaman saya. Sangat fleksibel.
Kalau ingin tahu mengenai fungsi2nya sih lebih baik langsung ke codex wordpressnya saja
on 06 Jul 2010 / 06:37
ikaRama bilang,
saya baru beLajar bLog,, saya cobain tutoriaLnya ya?!
makasi tuk kebaikan iLmunya….
on 18 Jul 2010 / 13:25
dogust bilang,
wah ribet jg ya bos.hehe
di coba deh
on 25 Jul 2010 / 04:22
Ismikova bilang,
Bos, untuk menghapus tulisan comment di theme gimana? Misal kita mau buat Website kok ada tulisan comment nya kan lucu bos, thx
on 29 Jul 2010 / 09:36
Fikri bilang,
Didisable saja fitur commentnya via dashboard, atau di hapus command yang ‘memuat’ file comments.php nya
on 31 Jul 2010 / 07:01
ireal bilang,
Comment lg aaakhh…
, ini step yg ke berapa ya?? , mataku udah mulai merah nih dr step#0 membacanya tp blum ngerti2 juga.
on 04 Sep 2010 / 23:49
alwa bilang,
Waw mas,,bener-bener keren tadi tutorialnya. Tapi tambah donk biar kita bener2 g cuman bisa buat template dasarnya aja,,,
on 07 Sep 2010 / 10:37
Fikri bilang,
Saya akhirnya buat blog tentang web development kok, bisa dilihat di http://outstando.com
on 11 Sep 2010 / 10:24
dian bilang,
makasih mas infonya. saya cobain dulu nih.
on 24 Sep 2010 / 15:59
Tutorial Cara Membuat Theme WordPress Sendiri ( Langkah #3 : Membuat File Dasar Theme WordPress : index.php & style.css) | KODE KOMPUTER bilang,
[...] print? [...]
on 23 Dec 2010 / 20:33
sofi asrifin bilang,
thanks artikelnya
lebih mudah dipahami
on 29 Jan 2011 / 07:34
Haneka bilang,
nice tutorial gan..ini turorial yg ane cari” ternyata ada yg menulis juga,…terima kasih tutornya gan…
on 16 May 2011 / 16:51
adekdik bilang,
thx mas bro..
on 14 Jun 2011 / 19:04
surya bilang,
boss, apa gak dibuat neh ebooknya? kan ada juga yang mau belajar secara offline . kalau online agak susah juga boss. cari di toko buku susah, jarang ada bahasan kayak gini. saya tunggu jawaban boss nih tentang membuat ebook tutornya…
on 02 Jul 2011 / 01:42
annisa14081993 bilang,
nisa kan buat wordpres yang lokalnya, tapi kok ga ada bacaan design nya yah?
on 03 Aug 2011 / 11:48
annisa14081993 bilang,
ga jadi, udah nemu
on 03 Aug 2011 / 11:50