Sebelum masuk ke inti tutorial cara membuat theme wordpress, sebelumnya saya akan membahas sedikit terminologi struktur template wordpress terlebih dahulu agar sobat bisa paham setiap konsep file-file pendukung untuk membuat theme wordpress. Pada dasarnya theme wordpress terbentuk dari beberapa file seperti :
o style.css
o index.php
o header.php
o footer.php
o sidebar.php
o single.php
o page.php
o archive.php
o category.php
o search.php
o 404.php
o comments.php
o functions.php
File-file tersebut saling berhubungan antara satu dengan file lainnya, tetapi yang paling utama untuk membentuk sebuah layout theme WP menurut saya adalah index.php, header.php, sidebar.php, footer.php, dan style.css. Sedangkan file-file lainnya merupakan file-file pendukung, untuk memudahkan pembuatan template wordpress sebaiknya terlebih dahulu kita membuat draft awal layout sederhana theme wordpress di mana kita akan membuat theme wordpress 2 kolom dan saya akan mengambil contoh. template favorit saya yaitu template minima untuk di buatkan versi theme wordpress :p. Nah biar cepat selesai, sekarang buka PHP editor sobat (dalam hal ini saya memakai Ultra Edit ), kemudian ketik kode di bawah ini setelah selesai save dengan nama index.html .
Dengan draft html sederhana tersebut akan memudahkan kita untuk membagi ke dalam section file php theme WP, ok sekarang kita akan membagi kode tersebut dan memisahkannya ke dalam setiap section, harap perhatikan tag div dan penutupnya!!.
header.php
<head>
<title>My Wordpress Theme</title>
</head>
<body>
<div id='outer-wrapper'>
<div id='header-wrapper'>
</div> <!-- end header-wrapper -->
<title>My Wordpress Theme</title>
</head>
<body>
<div id='outer-wrapper'>
<div id='header-wrapper'>
</div> <!-- end header-wrapper -->
index.php
<div id='content-wrapper'>
<div id='main-wrapper'>
</div> <!-- end main-wrapper -->
<div id='main-wrapper'>
</div> <!-- end main-wrapper -->
sidebar.php
<div id='sidebar-wrapper'>
</div> <!-- end sidebar-wrapper -->
</div> <!-- end content-wrapper -->
</div> <!-- end sidebar-wrapper -->
</div> <!-- end content-wrapper -->
footer.php
<div id='footer-wrapper'>
</div><!-- end footer-wrapper -->
</div><!-- end outer-wrapper -->
</body>
</html>
</div><!-- end footer-wrapper -->
</div><!-- end outer-wrapper -->
</body>
</html>
Setelah selesai membagi kode menjadi beberapa section file, jangan lupa untuk menyimpan semua file tersebut dengan extension php, nah sekarang kita sudah punya file index.php, header.php, sidebar.php, dan footer.php. Simpan semua file tersebut ke dalam satu folder dan beri nama folder tersebut thememinima. Setelah selesai menyimpan ke dalam satu folder, kemudian kita akan memabuat file baru di PHP editor kemudian pastekan kode di bawah ini dan simpan dengan nama style.css dan taruh file ini kedalam folder yang telah kita buat.
/* Theme Name: Minima WP Theme
Theme URI: http://www.subagya.blogspot.com Description: This is minima WP theme for a tutorial. Version: 1.0 Author: subagya
Author URI: http://www.subagya.co.cc/ */
Ok, sobat sekarang kita sudah mempunyai 5 file dalam satu folder, sekarang kita pindahkan folder thememinima ke dalam htdocs tempat di mana kita sudah menginstall wordpress dalam komputer lokal, simpan folder thememinima di dalam subdirektori /wp-content/themes kemudian masuk ke dashboard wordpress dan langsung ke menu Appearance dan pilih themes , maka akan terlihat theme kita seperti gambar di bawah ini :
Yup, theme minima sudah masuk ke dalam list theme tapi belum kita bisa activate karena kita memang belum selesai membuat template wordpress minimanya :p, nah biar lebih menarik lagi kita juga tambahkan screen shot theme minima sehingga hasilnya akan seperti gambar di bawah ini :
cara menambahkan screeshot sangat mudah sekali, yang perlu sobat lakukan adalah hanya membuat gambar dengan ektension png dan ukuran gambar 300x250 dan jangan lupa simpan file gambar tersebut ke dalam folder thememinima dan namakan file gambar tersebut screenshot sehingga dalam satu folder thememinima ada 6 file.
Ok, saya rasa tutorial bagaimana cara membuat theme wordpress cukup sampai di sini dulu karena saya ngantuk berat neh hehehehehe dan pada pembahasan selanjutnya saya akan membahas satu persatu file-file tersebut, namun sampai di sini dulu tutorial cara membuat theme wordpress and don't forget for subscribing my blog :d. Happy blogging
Yup, theme minima sudah masuk ke dalam list theme tapi belum kita bisa activate karena kita memang belum selesai membuat template wordpress minimanya :p, nah biar lebih menarik lagi kita juga tambahkan screen shot theme minima sehingga hasilnya akan seperti gambar di bawah ini :
cara menambahkan screeshot sangat mudah sekali, yang perlu sobat lakukan adalah hanya membuat gambar dengan ektension png dan ukuran gambar 300x250 dan jangan lupa simpan file gambar tersebut ke dalam folder thememinima dan namakan file gambar tersebut screenshot sehingga dalam satu folder thememinima ada 6 file.
Ok, saya rasa tutorial bagaimana cara membuat theme wordpress cukup sampai di sini dulu karena saya ngantuk berat neh hehehehehe dan pada pembahasan selanjutnya saya akan membahas satu persatu file-file tersebut, namun sampai di sini dulu tutorial cara membuat theme wordpress and don't forget for subscribing my blog :d. Happy blogging
nice tutorial, terima kasih telah berbagi.
ReplyDeletesalam dari jogja.
wakh sekarang sudah meluaskan sampai ke daerah wp nih kang....seeepppp, nanti ajarin ane ya kang
ReplyDeleterumit2
ReplyDeleteyang wraper itu artinya apa kang?nama wrapernya boleh diganti g kang?
ReplyDeleteKalo penjelasan tentang div itu sndiri gmana kang?
Konsentrasi ke blogger template dulu mas..
ReplyDeleteGudlak mas..
wah.,luar biasa., ilmu baru mas., mkasih., :D
ReplyDeletebagus nh....thanks
ReplyDeletewah sudah mulai beralih ke wp nih kayaknya...!!!!
ReplyDeletesaluuuttt
wah tuk buat template blogger aja baru belajar. insyaAllah ntr lanjut deh konsen dl pada satu.
ReplyDeletesaya nemu blog ini dari blog org luar waktu search cara buat template minima tiga kolom. salut.
sukses terus tuk anda
bagus neh infonya...
ReplyDeletesaya bukan orang WP, hehe
ReplyDeleteharus di pelajari betul nich...
ReplyDeletewah ini yang pengin aku pelajari...makasih pakde
ReplyDeletekang, 404.php buaty apa sich????
ReplyDeleteTutorial yang sangat berguna mas
ReplyDeleteternyata bikin template itu, g' semudah bikin tempe hehehe... mendingan pake artister ajalah...
ReplyDeletebagus nih.. buat refreshing trus coba2 :)
ReplyDeletesalam kenal bro
Hi subagya :)
ReplyDeleteThanks for the tutorial :) :)
wah makasih banget tipsnya
ReplyDeletegood share
ReplyDeletethanks udah share Ilmunya
ReplyDeleteI want to insert a flash file in wordpress theme ( but not in the posts), I wants to insert it below header, just like we insert images.
ReplyDeletewah-wah-wah, mantap sekali, ndak sabar mau baca artikel berikutnya mas.
ReplyDeletetetep aja aku masih gak ngerti
ReplyDeletesy pake blogspot tuh mas...
ReplyDeletebut anyway, nice sharing to wordpress user
ilmu baru nih...bisa di coba-coba buat theme kreasi sendiri. makasih boss
ReplyDeletewaaah...kalo Kang Mochal launching e-booknya dah pasti banyak yang mau beli Kang...aku sudah belajar dikit2 tentang struktur theme wordpress...bagi theme minimanya donk? hehee
ReplyDeletewah keren... seep... jadi ada gambaran neh, buat bikin themes. Thanks ya
ReplyDeleteTernyata rumit juga . . . . .
ReplyDeletebagus nih infonya berguna banget
ReplyDeleteIni dia yang dicari-cari. ijin di pelajari sob, walaupun sambil mengernyitkan dahi. hehe...maklum masih belajar script juga...
ReplyDeletepuyeng.... tapi patut dicoba... :D
ReplyDeletedari dulu saya memang pengen buat theme wordpress sendiri, namun kebingungan soalnya beda dengan blogspot. :D
pengennya sih suatu saat ngeblog pakai theme sendiri pasti bangga, walau gak bakat script he he.. terima kasih penjelasannya.
ReplyDeletebakat saya masih download theme aja.
thanks for this post and its helpful .
ReplyDeleteSalam kenal sesama pecinta web desain... :)
ReplyDelete