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:
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:
Theme Ujicoba
Lokasi header ada disini
Artikel akan muncul disini
Udah mulai puyeng? hehehe.. Mudah-mudahan ndak ya? Saya kasih penjelasan dikit aja biar mudeng. Dalam HTML, semua yang ada diantara tag <body> dan </body> 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 <div>. 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
106 replies on “Bikin Theme WP: Designing”
Nah yang beginian perlu di bookmark nih.. π
Mas aku subscribe nih..
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.
ikutin kok mas..
mulai lebih paham neh..
Baru ini yang dicari-cari……ketemu.
Lanjut trus biar lebih paham….tambah semangat.
Masih nyimak smbl praktek tp hasil masih ttp mas…..
ada style sheet yg hilang…. π
wah mulai ktinggalan nich,pelajari lagi dech,satu2 artikelnya π
lanjut gan..sip
ikutan belajar gan… cpa tahu bisa jd mster themes…
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 π
yup. panduanya untuk WP 3.1 keatas. Kalau blank bisa macam-macam sebabnya. Tapi yang jelas ada kesalahan di scriptnya
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 π
wk..wk… makanya jangan nafsu duong…………
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…
Bener, ini pakai twenty ten biar nggak terlalu beda dengan kesan WordPress-nya.
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
Kl bs lebih diperjelas lagi, misal dari mana kit memulai, star dari cpanel atua dari mana gt ? biar ngak nambah puyeng
benar2 bukan puyang lagi tapi mabok, kl bisa mampir ke http://www.kekyone.com
bukan isi bloknya tapi desain bloknya sangat memerlukan saran/masukan buat pengembangannya ke depan TQ
oke..saat nya kita lanjut lagi…
Mas maksud dari script ini apa sih?
[div style=”clear:both;”>]
mohon penjelasannya mas..
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
baru tahu gan cara membuatnya
Gan ane mau tanya donk nih
: bagian ini berfungsi buat apa ya gan ?
terima kasih
maksudnya?
Baca terusssssssssssss ,,,,, mantab kakak
Wah mantabbbzzz,, ini baru yang ane cariii :thumbup
hehehe…asik nih…
π ane ikutin tutor agan nih gan…
doain ane yah
wah…. Tutorial yang sangat bagus…. tetap semangat ea…..
tambah lagi tutorialnya….ok sip…
Semangat terussssssssssss……yang baca juga semangat neee,,,,
Makasih Banyak Mas Agan…
langsung saya copykan ke word n saya pelajari di kontrakan..
Maklum saya di kontrakan gax bisa internetan… hehehehe
walau, saya malah mesti ngulang lagi nih, baca pelan2 deh, moga cepet ngerti.
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…
Yang pakai HTML5 sudah ada contohnya belum? Saya sedang mempelajari strukturnya TwentyEleven sedikit belum paham.
Saya baru nih kesini bakalan intip dan ikuti terus mas
wah.. Mantap mas.., coba plajari deh.
mantap bro….lanjut teruss……..
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 π
Hwa ha ha ha… baru kali ini ada penjelasan gamblang…. setelah setahun lebih meninggalkan joomla! Thanks bro….. thanks….
Pakai HTML 5 ada tidak?
nie gan contoh HTML5 , ni duplikat dari template premium di web luar yang harga notabene $76. Alhasil bisa aku ambil script ma template nya.
mantap2.,, sangat membantu uey,,
gamblang banget ,,jelas singkat and ,,,
semangat2 mas bro,,
makasih banget ilmunya…
jazaakallohu kher..
cm ada satu kendala nih. sidebarnya kenapa turun di bawah content ya?.
mohon pencerahan.
coba di float right gan,trus content nya di float left.
hebaattt… sangat bermanfaat juga ny buat mata kyliahku… saat ikuti teruss gaan…
Wah ini yang aku cari… panduan step by step membuat theme… ijin pantau gan π
wah..komplit nih..bs buat ngerjakan tugas ini
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
dan file ini di simpan sebagai apa ya mas?
terusin baca artikel disini lama-lama jadi deh theme wp buatan sendiri untuk di bagi-bagiin buat temen-temen pengunjung blog π
Waw . dapet juga akhirnya tutorial untuk membuat theme wordpress secara terperinci π
puyeng mas….
tapi pengen bisa.. jadi kalopun kopas code gak salah sasaran dan ngerti
hehehehe
https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/181057_3342036115317_1064193517_n.jpg bang Lutvi, gimana kalo pengen bikin layout kayak gini? bingung nambahin sidebar nya,
Mantbaz gan, Cara penyampaian nya sangat di mengerti. . g
lebih praktis lagi pake framework yg udah ada.
kaya 960 gs
tinggal download file css nya.
tinggal atur layout nya deh..
saya baca tutorialnya agak paham sih cuman yg saya tidak mengerti dengan soft apa yang ngedesain themanya????
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
betul ntu…..
mau donk di ajarin…
wah bagus nih turorialnya..
tambahin lagi ya mas yg banyak π
kok tutorialnya cuma segini gan, lnjutin donk biar ane bs bljar bikin themes………
mantab gan,,,, ane juga mau pindah ke wordpress
semangat mas !! ilmunya sangaaaat kita nantiii …
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”
terima kasih, saya senang membaca tutorialnya
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?
Tutorial yang sangat bagusβ¦. thanks ilmunya…
bener2 top markotop penjelasannya..akhirnya saya menemukan cara desain wordpress.
mudah-mudahan Anda makin pintar n ilmunya makin bermanfaat. Saya serap ilmunya dulu, Gan….
ijin ngelanjutin baca lagi bang mamen, π
walau kepala agak pusing untuk ngerti tulisan anda, tapi dengan sabar diteruskan bacanya akhirnya bisa juga, makasih ya gan, postingannya.
Ini tutorial lengkap, keren. Ane anteng bacain tutorialnya walau kadang bingung π
wow keren totorialnya, saya senang untuk membacanya
tutorial yang saya nantikan, terima kasih saya senang membacanya
Terima kasih informasinya, saya suka membaca tutorialnya
wah mantab artikelnya mas
mas berarti ada kemungkinan versi 3.5 wp ngaruh ya, soalnya header nya ga ketenngah seper SS yang mas kasih
maaf nih … salam kenal ya..
pendatang baru.. .
pembuatan themes pake program apa yah…
terimakasih
pendatang baru gan
mantap gan…….. masih nyimak ne
saya subscribe mas.. π
lanjutin dong π
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..
Mantabz
Waduh… Koq nggak dari dulu ya aku nemu artikel ini… Wkkk… Lanjut bacanya ahhh…
Makasih, Mas Bro…
Wah, pusing juga ya belajarnya… Tapi saya gak akan putus asa !
kepengen bisa, tapi kq agak puyeng yaa xixixixixixi????
apa krn saya emak2 ya hehehe tapi tetep semangka lah..
sundul gan π
keren ..
bookmark gan π
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
Alhamdulillah akhirnya nemu juga tutorial wordpress yang lang lengkap terus bahanyan indo lg π
Wah ini baru komplit, izin belajar !
gmana sih, aku ga maksud kak,, cara masukin script nya??, (
pemula kak)
tutorialnya mudah dipahami… terima kasih π
mulai paham mass…lanjut articel selanjutnya…..
I am sure this paragraph has touched all the internet people, its really really fastidious article on building
up new weblog.
Here is my page: Dragon City Cheats
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.
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.
Make sure you ask consumers for place and opinions on your Facebook or twitter website page
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!!
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.
I constantly emailed this webpage post page to all my
associates, because if like to read it afterward my contacts will too.
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!
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.
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.
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!
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..
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.
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