Belajar cara membuat theme wordpress - konsep

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 -->

index.php

<div id='content-wrapper'>

      <div id='main-wrapper'>
       
      </div> <!-- end main-wrapper -->

sidebar.php

<div id='sidebar-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>


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 

35 comments:

  1. nice tutorial, terima kasih telah berbagi.
    salam dari jogja.

    ReplyDelete
  2. wakh sekarang sudah meluaskan sampai ke daerah wp nih kang....seeepppp, nanti ajarin ane ya kang

    ReplyDelete
  3. yang wraper itu artinya apa kang?nama wrapernya boleh diganti g kang?
    Kalo penjelasan tentang div itu sndiri gmana kang?

    ReplyDelete
  4. Konsentrasi ke blogger template dulu mas..

    Gudlak mas..

    ReplyDelete
  5. wah.,luar biasa., ilmu baru mas., mkasih., :D

    ReplyDelete
  6. wah sudah mulai beralih ke wp nih kayaknya...!!!!
    saluuuttt

    ReplyDelete
  7. wah tuk buat template blogger aja baru belajar. insyaAllah ntr lanjut deh konsen dl pada satu.

    saya nemu blog ini dari blog org luar waktu search cara buat template minima tiga kolom. salut.

    sukses terus tuk anda

    ReplyDelete
  8. wah ini yang pengin aku pelajari...makasih pakde

    ReplyDelete
  9. ternyata bikin template itu, g' semudah bikin tempe hehehe... mendingan pake artister ajalah...

    ReplyDelete
  10. bagus nih.. buat refreshing trus coba2 :)
    salam kenal bro

    ReplyDelete
  11. Hi subagya :)
    Thanks for the tutorial :) :)

    ReplyDelete
  12. I 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.

    ReplyDelete
  13. wah-wah-wah, mantap sekali, ndak sabar mau baca artikel berikutnya mas.

    ReplyDelete
  14. sy pake blogspot tuh mas...
    but anyway, nice sharing to wordpress user

    ReplyDelete
  15. ilmu baru nih...bisa di coba-coba buat theme kreasi sendiri. makasih boss

    ReplyDelete
  16. waaah...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

    ReplyDelete
  17. wah keren... seep... jadi ada gambaran neh, buat bikin themes. Thanks ya

    ReplyDelete
  18. Ini dia yang dicari-cari. ijin di pelajari sob, walaupun sambil mengernyitkan dahi. hehe...maklum masih belajar script juga...

    ReplyDelete
  19. puyeng.... tapi patut dicoba... :D
    dari dulu saya memang pengen buat theme wordpress sendiri, namun kebingungan soalnya beda dengan blogspot. :D

    ReplyDelete
  20. pengennya sih suatu saat ngeblog pakai theme sendiri pasti bangga, walau gak bakat script he he.. terima kasih penjelasannya.

    bakat saya masih download theme aja.

    ReplyDelete
  21. thanks for this post and its helpful .

    ReplyDelete
  22. Salam kenal sesama pecinta web desain... :)

    ReplyDelete