Bikin Theme WP: Designing

Nah, akhirnya sekarang kita melangkah pada tingkat yang lebih serius. Di artikel sebelumnya kita sudah bahas tentang index.php dan bagaimana mengimplementasikan halaman HTML ke dalam themes. Nah, sebelum kita mulai memasukkan kode-kode PHP serta fungsi WordPress, kita perlu mendesign theme dulu.

Untuk panduan sederhana kita nanti, kita akan buat sebuah theme seperti ini:

Contoh Design Theme

1. Header Blog
2. Content
3a. Sidebar lebar atas: Cocok untuk adsense atau iklan kotak besar
3b. Sidebar kiri: Kita pakai untuk menampilkan recent post, category, dll
3c. Sidebar kanan: Kita pakai untuk menampilkan banner iklan atau blogroll.
4. Bagian footer untuk menampilkan credit buat kita.

Bagaimana membuatnya?

Tahap awal yang kita lakukan adalah menentukan dulu bagian-bagiannya dalam file index.php. Dengan design seperti itu, maka kode HTML di file index.php akan seperti ini:

<html>
   <head>
      <title>Theme Ujicoba</title>
   </head>
   <body>
      <div id="wrap">
       <div id="header">
        Lokasi header ada disini
     </div>
     <div id="maincontent">
        <div id="content">
         Artikel akan muncul disini
      </div>
      <div id="sidebar">
         <div id="lebar">
            Iklan kotak ada disini
         </div>
         <div id="kiri">
            Menu-menu sidebar kiri ada disini
         </div>
         <div id="kanan">
            Menu-menu sidebar kanan ada disini
         </div>
      </div>
     </div>
     <div style="clear:both;"></div>
     <div id="footer">
        Footer ada disini
     </div>
    </div>
   </body>
</html>

Udah mulai puyeng? hehehe.. Mudah-mudahan ndak ya? Saya kasih penjelasan dikit aja biar mudeng. Dalam HTML, semua yang ada diantara tag &lt;body&gt; dan &lt;/body&gt; akan dimunculkan di browser. Jadi sekarang kita fokus dulu pada kode-kode diantara dua tag itu. Oke?

Nah, di deretan kode diatas, saya menempatkan beberapa tag &lt;div&gt;. Tag ini kita pakai untuk menandai suatu wilayah. Nantinya, kita bisa mengatur tinggi, lebar background, warna dan apapun yang ada di wilayah tersebut. Jadi, biar gampang, div dipakai untuk menamai suatu wilayah.

Seperti di kode atas, saya menamakan beberapa wilayah sesuai fungsinya yaitu header, sidebar, content, footer, dll. Nah, sekarang mulai paham?

Oke, itu baru membuat design dan menamai wilayah sesuai design yang kita buat. Sekarang kalau anda nekat mencoba melihat hasil “kerja keras” anda, biasanya masih amat jauh dari design. Hehehe…. Ndak usah khawatir, insya Allah besok kita mulai mengatur tata letaknya sehingga anda bisa senyum-senyum sendiri nantinya.. hahaha…

Btw, kok belum ada yang subscribe ya? tadi saya cek cuma ada 1 orang doang. Hmm.. jadi kurang semangat nih hehehe

Dicari dengan kata kunci:

bikin theme wordpress,bikin theme,bikin tema,membuat template wp sendiri,membuat tema sendiri wordpress,web sederhana dengan php,contoh layout wordpeess,thema wp,buat theme wp,contoh theme wordpress

106 thoughts on “Bikin Theme WP: Designing

  1. Nurjaman

    Masa saya doang Mas hee, saya terus ikutin materi ini sambil nungguin orang bikin kunci ( kadang saya baca bolak balik). Maju terusss…. saya simpan ah halaman ini.

  2. Opay

    Masih nyimak smbl praktek tp hasil masih ttp mas…..
    ada style sheet yg hilang…. πŸ™

  3. Nanta

    mas, saya masih bingung nih, tutorial ini compatible dengan wp 3.1 yang terbaru gak ? coz saya coba pake wp terbaru kok blank aja ya hasilnya pdhal semua langkah udah bnar, dan file sytle.css sma index.php juga udah,,,

    mohon bimbingan nya ya πŸ™‚

    1. admin Post author

      yup. panduanya untuk WP 3.1 keatas. Kalau blank bisa macam-macam sebabnya. Tapi yang jelas ada kesalahan di scriptnya

      1. Nanta

        Alhamdulillah udah bisa mas πŸ™‚

        penyebabnya ternyata gara” saya terburu telah membuat semua file serach.php, page.php, single.php dkk hehehe

        ternyata setelah di hpus dan di biarkan cuma ada style.css sama index.php scriptnya jalan heheh

        makasih byak atas tutorialnya akhirnya saya bisa smpe tahap ini πŸ™‚

  4. yokowasis

    Kalo saya tebak ini kayaknya blognya menggunakan base theme twenty ten ya ? Sayang telat saya ketemu blog ini, saya dulu belajarnya dari situs luar obrak abrik sana sini akhirnya bisa bikin template sendiri. Tetapi sepertinya lebih bagus kalo kita ngoprek template yang sudah ada, soalnya terlalu banyak yang diatur kalo bikin dari 0. Theme framework yang bagus apa ya ? Saya cuma biasanya maen twenty ten, sudah coba beberapa yang laen terlalu rumit. Jadi puyeng hehehehe…

  5. Hafidragil

    Akhirnya nemu juga tutorial bikin WP themes sendiri, ketimbang puyeng belajar dasarnya PHP mending langsung aja dimari langsung praktek n tanya-tanya, kan empunya baik hati n gak pake bayar alias gratis he..he…
    Tak bookmark dulu…langsung praktek. Trims banget

  6. twanming

    Mas maksud dari script ini apa sih?
    [div style=”clear:both;”>]
    mohon penjelasannya mas..

    1. Anesthtize

      itu clear both buat ngilangin status “float” dari sidebarnya gan,intinya buat ngebersihin efek2 dari yg div di atas2nya,biar yg bawah ga kepengaruh. gitu

  7. Endra

    Makasih Banyak Mas Agan…
    langsung saya copykan ke word n saya pelajari di kontrakan..
    Maklum saya di kontrakan gax bisa internetan… hehehehe

  8. asma wo lia andini

    bagus…bagus…
    nyimak dulu dech…
    nyimak aja dah muyeng nich…
    dulu klo lg utak atik blog, lgsung comot aja yg gratisan….
    tp dsain sndiri kayaknya asyik juga, ya…thanks banget nich…

  9. awan

    wah walopun artikel lama bisa buat pembelajaran ^_^
    selama ni saya cuman bisanya ubah file CSS ama dikit2 file phpnya πŸ˜›
    n sama edit gambar n optimasi pada ukuran gambar dan degradasi dari themes yang udah ada.
    eh iya mas denger2 ( bener gak ? ) semakin tinggi / banyak rendering file maka tingkat SEO kita tidak akan sebagus situs yg mpuyai Rendering File rendah , n 1 lagi mas ,( walaupun Optimasi Description n kata2 lainya backlink dsb sama )??
    bikin tutorial minify &combine JS , CSS compress dan pengertian tentang yang paling penting untuk optimasi & kemanan PHP tentang .htaccess , make bahasa indo donk mas πŸ˜€
    reqiest dari amatiran yang udah tua pengen belajar ngeblog πŸ˜›
    thanx mas lutvi πŸ˜›

  10. rahmat

    makasih banget ilmunya…
    jazaakallohu kher..

    cm ada satu kendala nih. sidebarnya kenapa turun di bawah content ya?.
    mohon pencerahan.

  11. avan

    hebaattt… sangat bermanfaat juga ny buat mata kyliahku… saat ikuti teruss gaan…

  12. nuhan

    maksut tutorial ini sama sebelumnya itu bagaimana ya.. apa itu di simpan di style.css juga atau mungkin kita bikin style.css lagi mas penjelasannya dong.. saya bingung maksut disini… hehehehe baru belajar mas… terimakasih

  13. Danu

    lebih praktis lagi pake framework yg udah ada.
    kaya 960 gs
    tinggal download file css nya.
    tinggal atur layout nya deh..

  14. ahmad

    saya baca tutorialnya agak paham sih cuman yg saya tidak mengerti dengan soft apa yang ngedesain themanya????

  15. zchellpy

    Mas karna hasilnya sangat berbeda2 disebabkan versi platform dan browser yang berbeda2 pula sebaiknya mas sertakan detail nya pake xamp berapa, browser dan ver berapa, editor nya juga apa, sehingga newbie disini tidak lagi menemui kendala kesalahan dalam mengikuti tutor mas yang disebabkan oleh aplikasi itu sendiri. misal php4 dan php5 kan beda mas…. Makasih sebelum nya

  16. los pobres

    mondar-mandir cari tutor di google ga ada yg masuk ke otak satupun, puji syukur kpd Allah trnyata petualangan saya terdampar disini di blog yang menjelaskan dgn asyik santai mudah di pahami yang seakan saya sedang mendengarkan orang berbicara langsung kpd saya. Smoga blog ini akan menjadi akhir dari kebodohan saya di dlm memahami tntang pembuatan tema, oke bro sy akan ikuti trus smua tutorialnya. Berkaryalah bro demi untuk mencerdaskan bangsa. “SUCCESFULLY”

  17. Arsa

    Nah, untuk Tutorial Dasar Sudah ketemu, terimakasih Ilmunya…
    Mo nanya, kalo untuk pengembangan kearah yg lebih jauh ada Link yg bisa di ikuti ga ya?

  18. plakat

    walau kepala agak pusing untuk ngerti tulisan anda, tapi dengan sabar diteruskan bacanya akhirnya bisa juga, makasih ya gan, postingannya.

  19. Rina

    saya pernah juga coba bikin theme wp sendiri tapi pakai bantuan software Pak, lihat ini jadi pengen buat secara manual pasti akan jauh lebih baik dan bisa meningkatkan kemampuan web desain ni..

  20. R. Sapto

    Waduh… Koq nggak dari dulu ya aku nemu artikel ini… Wkkk… Lanjut bacanya ahhh…
    Makasih, Mas Bro…

  21. Medi

    Makasih banyak gan, ini yang saya cari, biasanya saya pakai yang theme gratisan melulu..sebagian lagi yang bebayar. Saya pengon coba buat theme sendiri saja mana tahu suatu saat bisa buat yang premium. makasi banyak gan, semoga kebaikan agan ini dibalas oleh TYME..salam

  22. more

    I just want to tell you that I am very new to blogging and actually loved this blog site. Likely I’m going to bookmark your blog . You definitely come with remarkable article content. Many thanks for sharing your website.

  23. go to this web-site

    I simply want to tell you that I am all new to blogging and truly loved this web page. Very likely I’m want to bookmark your site . You actually come with impressive stories. Thanks a lot for revealing your web page.

  24. Jung Berends

    An interesting discussion is worth comment. I believe that you need to publish more on this subject matter, it might not be a taboo matter but typically folks don’t talk about such issues. To the next! Kind regards!!

  25. Elmo Derosso

    You ended a little straight points there. I looked by the internet for the issue and originate most those will turn next to with with your website.

  26. ppc

    I constantly emailed this webpage post page to all my
    associates, because if like to read it afterward my contacts will too.

  27. Norberto Latif

    This is the right site for anybody who wishes to find out about this topic. You understand a whole lot its almost hard to argue with you (not that I actually would want to…HaHa). You definitely put a fresh spin on a subject that’s been discussed for a long time. Excellent stuff, just great!

  28. Berry Paben

    Hey There. I found your blog using msn. This is an extremely well written article. I will make sure to bookmark it and return to read more of your useful information. Thanks for the post. I’ll definitely comeback.

  29. Bette Torchio

    Simply want to say your article is as astonishing. The clearness in your post is simply excellent and i could assume you are an expert on this subject. Fine with your permission allow me to grab your RSS feed to keep up to date with forthcoming post. Thanks a million and please carry on the rewarding work.

  30. Justin Resper

    Having read this I thought it was extremely informative. I appreciate you taking the time and effort to put this informative article together. I once again find myself personally spending way too much time both reading and posting comments. But so what, it was still worthwhile!

  31. Tanner Tolfree

    I don’t know what “WordPress” is but if it has something to do with the way I can have automatic updates of new posts from my blog posted in my Twitter, than I’d like to know more about it.. . Please & Thank you. * My blog is a Blogspot / Blogger blog..

  32. Rachael Henandez

    Thanks for another fantastic post. Where else could anyone get that type of info in such a perfect way of writing? I have a presentation next week, and I am on the look for such info.

  33. Kirk Larimore

    Definitely believe that which you said. Your favorite reason appeared to be on the net the simplest thing to be aware of. I say to you, I definitely get irked while people think about worries that they just do not know about. You managed to hit the nail upon the top and also defined out the whole thing without having side-effects , people could take a signal. Will probably be back to get more. Thanks

Comments are closed.