Siapapun yang punya blog dengan mesin Wordpress tentunya ingin membuat template sendiri. Banyak yang bilang susah, tapi tidak sedikit juga yang bilang mudah. Bagi yang menganggap susah, mungkin hanya perlu beberapa pengetahuan dasar, kemudian bisa langsung berkreasi lebih lanjut. Dan jangan pernah menganggap aku ahli dalam hal ini, anggap saja aku lebih dulu tau dan sekedar ingin membagikannya sedikit. Walaupun pakai acara berseri… hehehehe…

Mengenal struktur file

Wordpress mengumpulkan semua template-nya di dalam direktori wp-content/themes/nama-template. Dan berikut beberapa file standar yang diperlukan agar sebuah template berfungsi dengan baik.

archive.php
File ini akan digunakan untuk menampilkan data saat arsip setiap bulan dan arsip dari kategori.

comments.php
File ini mengatur tampilan daftar komentar

footer.php
File ini sebenarnya tidak terlalu penting, tapi entah menjadi sesuatu yang wajib bila kita juga ikut menyertakan informasi lain di bagian bawah template

header.php
File ini mengatur tampilan bagian atas template.

index.php
Keberadaan file ini sangat penting. Sebenarnya, file ini bisa menghandle beberapa file lain seperti archive.php, page.php, search.php. Tapi demi kemudahan, akan lebih baik jika beberapa file dipisahkan berdasarkan fungsinya.

page.php
File ini akan mengatur tampilan setiap halaman (page) yang dibuat.

Screenshot.png
Skrinsot sebenarnya tidak begitu diperlukan saat Wordpress masih berusia kurang dari versi 2. Setelah versi 2, baru mulai diterapkan. Keberadaannya sekarang menjadi wajib untuk setiap template yang kita buat. Perlu diingat, file ini berkestensi png

search.php
File ini mengatur tampilan hasil pencarian.

style.css
File ini bertugas untuk mengatur tampilan setiap elemen di semua halaman. Ya, seperti fungsi file CSS yang menjadi jantung dalam sebuah template. File CSS ini juga menampilkan informasi tentang template seperti nama template, pembuatnya, dan informasi lain yang terdapat dalam back-end di wordpress.

Berikut adalah langkah-langkah membuat template yang sejauh ini aku lakukan. Satu template biasanya bisa dipaksakan untuk dikerjakan dalam waktu semalam. Tapi karena Piala Dunia, maka pekerjaan jadi sedikit molor. Maaf pakde dan mas Budi… :D

Membuat desain template

Sama seperti bagaimana menghadapi sebuah ujian. Tentunya ada banyak hal yang bisa kita lakukan. Belajar mungkin, atau yang malas belajar bisa menerapkan ilmu PMP (Posisi Menentukan Prestasi), membuat catatan kecil, dan mungkin saja membuat tato dadakan di sekujur tubuh. Kesimpulannya, perencanaan.

Membuat template tidak langsung asal jadi. Akan lebih baik direncanakan terlebih dahulu seperti apa template yang akan kita buat. Di bawah ini, adalah salah satu contoh desain yang aku buat untuk salah satu templateku yang pernah masuk CSSMania

Sebagai bocoran, ini adalah desain yang sudah aku buat sekitar seminggu yang lalu. Tapi masih belum dibuat karena terlalu asyik menonton sepakbola… hehehehe…

Mutilasi desain

Hahha… terlalu hiperbola menggunakan kata mutilasi. Inilah bagian yang agak susah dan membutuhkan alur logika yang cukup bijak. Kenapa bijak? selain harus memperhatikan bagaimana bentuk block-element nantinya, kita juga harus memperhatikan kecepatan loading. Perlu banyak pengalaman dan banyak belajar tentunya.

Mutilasi kode

Bagian ini biasa aku lewatkan, karena aku biasa langsung memutilasinya ke template. Tapi akan lebih mudah jika kita juga memutilasi kode HTML yang sudah jadi ke dalam kode-kode khusus wordpress.

Testing dan ujicoba

Ini bagian yang perlu ketelitian hampir sempurna. Setiap bagian dijelajahi, dan diperhatikan dengan seksama. Kalau anda tipe-tipe slebor, cuek, dan tidak perhatian, kali ini berusahalah berkonsentrasi dan perhatikan setiap detil. Banyak template-template yang sudah aku buat tidak mendetil. Karena ya itu tadi. Ah, sudahlah…

Jika tahap-tahap di atas dijalankan dengan seksama, maka kita tinggal menikmati hasil. Ada sebuah kepuasan tersendiri tentunya yang tidak bisa diungkapkan dengan kata-kata.

Selamat penasaran, karena tutorial ini akan berlanjut. Aku tidak bisa memastikan kapan akan menyelesaikan tutorial ini, karena saat seperti ini adalah saatnya mata mengantuk, malam jadi siang, dan siang jadi malam. Selamat menikmati sepakbola, tentunya aku tetap pegang Itali.

*ngantuk*

No related posts.

Kategori: blog, tutorial

 

89

Komentar

Gravatar
 

dental @16.06.2006

wide, gradasi abu-abu soft, rich content footbar

*hmm… *

 
 
Gravatar
 

emil @16.06.2006

aku minta dibikinin Didats aja deh, lebih cepet… ;)

 
 
Gravatar
 

Pujiono @16.06.2006

aku tetep nggak mudeng juga.

bingun…

 
 
Gravatar
 

didats @16.06.2006

#1 hehehe… ganti suasana dulu den… ikut2 tren sekarang lah… :D

#2 hi mba emil! kemana aja?

#3 lah, baru pendahuluan mase… ini intro doang kok…

 
 
Gravatar
 

Sherlie @16.06.2006

Hey!! I like the red colour!! Can I get that template for me?? Pleeeaaaseeee…

 
 
Gravatar
 

sigit @16.06.2006

yup… ini yang kutunggu-tunggu…
cm aku punya masalah yg cukup mengganggu banget nih, yaitu gak punya jiwa seni yg oke…
gmn donk dats???

*summon saylow: tlg bantu buatin template ya hehehe *

 
 
Gravatar
 

Jay @16.06.2006

Soal footer kenapa tidak penting?
Footer itu layak untuk diisi signature, lisensi, keterangan singkat, hak cipta dsb. Lagipula footer.php berisi penutup tag body dan HTML.

Ada yang kurang, file single.php fungsinya menampilkan isian blog yang berbeda dengan layout halaman depan.

 
 
Gravatar
 

didats @16.06.2006

#5 ayo… antri antri… :D

#6 *summon saylow*

#7 yah, jay… footer sih gag terlalu penting buat gw. penutup html kan bisa di taruh dimana aja…

trus, singgle.php juga bisa di cover sama index.php kan ada fungsi ngecek dia halaman awal ato bukan di template tags

 
 
Gravatar
 

aRdho @16.06.2006

lanjuutt…

*nungguin*

 
 
Gravatar
 

dental @16.06.2006

“singe.php” lumayan penting, ada bbrp tag yang memudahkan pembaca berpindah dari post sebelum/sesudahnya.

untuk section “Page” bisa di customize stylenya, tidak terpaku pada file “page.php” saja.

tinggal buat file baru, misal “template_khusus.php”, di bagian atasnya tambahkan tag:
<?php
/*
Template Name: Template Khusus
*/
?>

maka ketika akan membuat halaman baru di Admin, akan muncul option untuk memilih template: Default (page.php) atau Template Khusus (template_khusus.php)

demikian.

 
 
Gravatar
 

o'on @16.06.2006

hiks…mangkin berad aja tutorialnya, yang diajarin dental blom apal :p
save as dulu

 
 
Gravatar
 

|K|U|N|T|A|R|I| @16.06.2006

*keren*

 
 
Gravatar
 

Rizky @16.06.2006

template barunya ciamik berat dats…salute!

btw, MT lebih enak. dia punya struktur HTML yang universal. jadi cuma tinggal bikin CSS-nya.

yeah, tapi lu pasti tau lah :) makanya, ayo semua ganti pake Movable Type!!

*kaboooooor*

 
 
Gravatar
 

geblek @16.06.2006

yah akirnya didats buat jugak
dah gak sabar nunggu part 2 euy :D
btw yg templet bocoran bagus dats kalo dah di publish ntar saya pasang yah

 
 
Gravatar
 

anima @16.06.2006

lagi lagi bersambung…

buruan dong lanjutannya bli didats :D
btw, theme barunya keren loh

 
 
Gravatar
 

Desain Blog @16.06.2006

Usah kau berlama-lama menulisnya. Segera terbitkan dalam rupa buku, mumpung lum ada yg bikin buku soal CMS weblog
*kompormodeon*

 
 
Gravatar
 

ebo @16.06.2006

Bagus dats, aku butuh tutorial seperti ini sebanyak-banyaknya. Cuma pada paragraf paling terakhir pada sub ‘Mengenal struktur file’, sebelum ‘Membuat desain template’ aku nggak ngerti…

 
 
Gravatar
 

Lux Ferre @16.06.2006

Template baru cepat jadikan, biar bisa di contoh…. :D

 
 
Gravatar
 

ndra @17.06.2006

wordpress itu apa sih kaka??

 
 
Gravatar
 

fahdi @17.06.2006

wah, asik neh theme yang baru, simple kayak hemingway * sorry, gak maksud ngebandingin *,

minta yah nanti ;))

 
 
Gravatar
 

paydjo @17.06.2006

waaahhhh, bocoran templetnya kereeennn
siyap2 masang juga nich.
btw, kapan2 mbuatin tem yg gag pake gambar dunk, cuman mainan css, kan enteng banget tuh :D
tapi kudu tetep keren lho

 
 
Gravatar
 

hericz @17.06.2006

Hehe, kasih contoh template dasar aja dats, biar pada bisa nyobain sendiri :D

Rajin juga kau

 
 
Gravatar
 

geblek si pakir benwit @17.06.2006

ayolah dats….
lanjutannya mana

 
 
Gravatar
 

geblek si pakir benwit @17.06.2006

21# seetujuh

 
 
Gravatar
 

geblek si pakir benwit @17.06.2006

22# kasih contoh seperti templet bocoran itu sajalah

 
 
Gravatar
 

amen @18.06.2006

wah ini kan rahasia playboy css

 
 
Gravatar
 

didats @18.06.2006

#10 hehehe… oke deh bapak dental… :D
#12 *jitak*
#13 MT memang cuma ganti css, tapi jadi satu file itu agak repot kalo mo ganti struktur file…. sejauh ini sih memang lebih gampang…
#16 hehehe… oke om…! mo jadi agen kan? :P
#17 bagian itu gag usah dingertiin… ;)
#19 wordpress itu sejenis makanan… *laper*
#20 hemingway? tepatnya sih karena rich content footbar. makanya mirip… ga papa ngebandingin… ;)
#21 halah… ya wis tunggu aje nanti…
#22 emang rencananya yang sederhana aja her…
#23,#24,#25 *jitak geblek*
#26 husss…. jangan bilang-bilang…

 
 
Gravatar
 

andriansah @18.06.2006

Gw kesindir nih….

Iya gw akan ganti theme gw

 
 
Gravatar
 

esge @19.06.2006

blogspot??

 
 
Gravatar
 

Yogi @19.06.2006

oo…ternyata cuma mau pamer template yang baru akan dirilis ya?? :D

 
 
Gravatar
 

Jauhari @19.06.2006

Akhirnya

 
 
Gravatar
 

Jauhari @19.06.2006

Sang Pendekar………..

 
 
Gravatar
 

Jauhari @19.06.2006

CSS…………

Turun Gunung

 
 
Gravatar
 

Jauhari @19.06.2006

dengan hadirnya KITAP
“HOW TO MAKE TEMPLATE” on you OWN WP.

 
 
Gravatar
 

Jauhari @19.06.2006

Matur Suwun

*wah SPAM NIH …. kaburrrrrrrrrr

 
 
Gravatar
 

widi @19.06.2006

wah tutorial yang bagus nih… :) saya share yah url-nya buat para pengelola web di tempat saya

 
 
Gravatar
 

arie @26.06.2006

ehemmmmzz…ya jujur aja ini yang ditunggu..
kalo gak di bikin secepatnya yak apa kalo di datengin aja ke bali…summon venuz

 
 
Gravatar
 

Nick @02.07.2006

Hello! Very interesting and professional site. nokia6630

 
 
Gravatar
 

aput @26.07.2006

bang dat dah lama ga jumpa, wah makin hot aja nih , ma php na, bang dat punya source ajax+php ga aput minta dong kirim ke email ya

 
 
Gravatar
 

lilamr @13.08.2006

mas, kalo wordpress yang acountnya gratisan, bisa di ubah-ubah juga gak? caranya gimana ya? sama seperti yg ini?

 
 
Gravatar
 

ical @16.08.2006

Mas didats, themenya bagus. punya soft colour kesukaan saya.
Bisa tolong saya gimana merancang theme/template buat website berbasis php-mysql. Apa sama dengan tema tutorial ini?? . Jangan diketawain pertanyaannya, pleaze.. saya orang buta ttg php-mysql

 
 
Gravatar
 

rado @01.09.2006

ga ngerti masihan..pemula n otodidak si..

 
 
Gravatar
 

ardhi @05.09.2006

seperti baca kitab pusaka ilmu bela diri, semua harus kita tafsirkan

 
 
Gravatar
 

urip @28.09.2006

mas gimana sih menjalankan wordpress versi 2.0, saya udah donload dan udah di ekstrak terus mau makek-nya gak paham….
bikin tutorial yg agak detil donk buat para pemula cam sama nih…
ya…ya….ya tolongin

 
 
Gravatar
 

Daniel @07.10.2006

oh kirain belum ada tutorial buat template wp-nya…. rupanya dah ada hihi… nice tutorial bro!

 
 
Gravatar
 

perfume jske @19.10.2006

discount allure perfume

 
 
Gravatar
 

perfume phzw @20.10.2006

aveda discount perfume

 
 
Gravatar
 

perfume exdz @20.10.2006

perfume the story of a

 
 
Gravatar
 

google search @11.11.2006

hi look here! http://google-search.8634.info/index9.html Google Search Knee Surgery
http://google-search.8634.info/index10.html Info Http Www Google Com Search Q Nextel 20ringers Hl
http://google-search.8634.info/index11.html search google maps
http://google-search.8634.info/index12.html google video search
http://google-search.8634.info/index13.html Info Http Www Google Com Search Q Metal Halide Hl
http://google-search.8634.info/index14.html search engine marketing news google alerts linkedin
http://google-search.8634.info/index15.html remove google search bar
http://google-search.8634.info/index16.html seo google optimization google search engine optimization

 
 
Gravatar
 

google search @11.11.2006

hi look here! http://google-search.8634.info/index9.html Google Search Knee Surgery
http://google-search.8634.info/index10.html Info Http Www Google Com Search Q Nextel 20ringers Hl
http://google-search.8634.info/index11.html search google maps
http://google-search.8634.info/index12.html google video search
http://google-search.8634.info/index13.html Info Http Www Google Com Search Q Metal Halide Hl
http://google-search.8634.info/index14.html search engine marketing news google alerts linkedin
http://google-search.8634.info/index15.html remove google search bar
http://google-search.8634.info/index16.html seo google optimization google search engine optimization

 
 
Gravatar
 

megat @21.11.2006

bagus ya didats, dpt juga sy belajar bikin template sendiri untuk blog saya

thanks a lot!

 
 
Gravatar
 

x2nie @08.01.2007

hummmm! :D
yg seperti movable type, di wordpress sudah direlease, ntu kolaborasi antara Andy Skeleton (andy @ [wordpress.com]) dkk. namanya SANDBOX, ini semacam Template yg memiliki sub-template (CSS) yg dinamakan Skin.

Akhir2 ini banyak WP-Template (*.zip) yg direlease ulang untuk Sandbox dlm bentuk .CSS ,kunjungi lagi deh ini :: http://wordpress.org/search/sandbox
salam kenal :D

 
 
Gravatar
 

kktxjr@evflcsp.net @13.02.2007

Your know end news! What is this? Discounts!

 
 
Gravatar
 

kktxjr@evflcsp.net @13.02.2007

Your know end news! What is this? Discounts!

 
 
Gravatar
 

fjhnyu@lqsxzpj.net @14.02.2007

Hello. I love your!

 
 
Gravatar
 

Mike Stranger @13.03.2007

God site. Thanks!

 
 
Gravatar
 

ReeV @15.03.2007

Bikin TM sendiri ah !!!!

 
 
Gravatar
 

Belajar Website @31.03.2007

Titip Link Euy… huehuehue…

 
 
Gravatar
 

894949 @26.07.2007

kamu cantik deh

 
 
Gravatar
 

wong ndeso @26.07.2007

hello bung Didats, salam kenal :)
ma’af, saya kesasar ke blog Anda.
btw. kerja di Kuwati?? Hmm, asyiknya :D

 
 
Gravatar
 

wong ndeso @26.07.2007

hello bung Didats, salam kenal :)
ma’af, saya kesasar ke blog Anda.
btw. kerja di Kuwait?? Hmm, asyiknya :D

 
 
Gravatar
 

slam @08.09.2007

cuma pengen tahu bikin template

 
 
Gravatar
 

Gilang Mahival @09.10.2007

kunjungi blog saya di http://egoldgratis.wordpress.com
untuk informasi lebih lanjut. disana anda akan mendapatkan cara – cara mendapatkan e-gold gratis dalam 5 menit tanpa daftar tanpa modal awal !!!,benar – benar gratis !!!

 
 
Gravatar
 

uwiuw @28.11.2007

wah keren nih sy juga lagi belajar kostumisasi wordpress sy…kira-kira bisa bantu mecahin ini ngak ?

maslahnya template sy dari bob di blogohblog.com itu punya page yang ngak bisa diisi koment padahal waktu sebelum pindahan dari hosting wordpres.com comment tsb tampil namun sekarang tidak lagi sementara kalau ganti template kayaknya kayak orang yang kalah…hohohoho bisa bantu sy memenangkan ini ? :-D danke!

 
 
Gravatar
 

dhega @05.01.2008

Thx tutorialnya, jadi pengen nyoba bikin deh, :)

 
 
Gravatar
 

WillnoTsmitH @21.01.2008

meh..
aku ketinggalan..
dah lama bgt gak maen kesini..

 
 
Gravatar
 

albachtimi @07.02.2008

Wah kok putus sampe di sini aja, nyambung lagi yuk… aku masih membutuhkanmu.

 
 
Gravatar
 

arifr @24.02.2008

mas saya masih awam, tentang wp, apakah kita harus sewa hosting juga untuk menggunakan template dari wp.? terima kasih pencerahannya…

 
 
Gravatar
 

Didats Triadi @24.02.2008

#68 betul! untuk menggunakan wordpress yang saya maksud di atas, memang harus menyediakan hosting sendiri.

 
 
Gravatar
 

Bambang Oke @25.03.2008

Seeeeeeeeeeeeeep

 
 
Gravatar
 

tuba @02.04.2008

asl. mas aq msih awam ne dengan WP.. aq punya blog di cuppitlover.blogspot.com tp aq msih belum bs menggunakannya/mengelolanya. bs bantu aq kasih informasinya…

 
 
Gravatar
 

wawan @06.04.2008

ajarin kita donk bos………. aq pengen buat tema yang cantik terus cara upload nya…………….
makasih y………..!

 
 
Gravatar
 

fajri @06.04.2008

mas boleh tau ga’ ym nya coz aq mau belajar membuat web

 
 
Gravatar
 

akhwat_sporty @08.04.2008

thx bangettt yooo

 
 
Gravatar
 

fibie @09.05.2008

hi bro….slam kenal.
btw, bisa gak ya satu template dipakai tuk banyak site?

 
 
Gravatar
 

eka @14.05.2008

mas..mau nanya..kok banyak banget itu iklan bisa bikin uang di internet apa bener? gimana caranya..jadi pengen..ajarin donk…

 
 
Gravatar
 

kosasih @22.05.2008

boss…banyak tersedia template gratisan..yang saya mo tanya gimana caranya mengaplikasikannya di blog wordpress kita…..

 
 
Gravatar
 

WordPress Blog » Blog Archive » Hello world! @06.06.2008

[...] Selamat datang mas Yassin Kurniawan… monggo disekecakaken ngeblog ipun.. kalo pengen ngerubah tampilan muka bisa belajar sama mas Didats ini link-nya di klik aja: http://didats.net/page/tutorial-membuat-template-wordpress-1/ [...]

 
 
Gravatar
 

kamal @25.08.2008

wahh… bagus nih tutorialnya. di donlot dulu yak
makasih :)

 
 
Gravatar
 

chalimy @27.10.2008

upload templatenya gimana bang..??bisa dijelaskan ga..? gue newbee nie…??

 
 
Gravatar
 

Arya @31.12.2008

halooo2.. saya mau nawarin nih artikel2 bhs inggris, buat yg mau bikin google adsense biar gmpg di approve bisa copy-paste artikelnya dari blog saya,,

buat yg males bikin artikel juga bisa jadi alternatif kok..

silahkan maen2 yaah kesini.. http://free-content.tk

yg mau tukeran link juga ayooo… :)

 
 
Gravatar
 

Arya @31.12.2008

halooo2.. saya mau nawarin nih artikel2 bhs inggris, buat yg mau bikin google adsense biar gmpg di approve bisa copy-paste artikelnya dari blog saya,,

buat yg males bikin artikel juga bisa jadi alternatif kok..

silahkan maen2 yaah kesini.. http://free-content.tk

 
 
Gravatar
 

hery blog @06.01.2009

tak tunggu mas,penasaran gua,jangan kelamaan ya

 
 
Gravatar
 

Rimbo bujang @15.01.2009

Wah… Matur nuwun tutorialnya…. Ntar saya coba..

 
 
Gravatar
 

Rimbo bujang @15.01.2009

Makasih infonya…!!!

 
 
Gravatar
 

Rimbo bujang @15.01.2009

Ada nggak tutorialnya yang lebih lengkap…????
Coz newbie nih….

 
 
Gravatar
 

yummy @20.01.2009

q kok malaha binun n ga paham ya? bisa jelasin lebih detail ga?
ato kalo ngga kirimin ja salah satu template yang dah jadi he…

 
 
Gravatar
 

mochal @20.01.2009

lanjut ke bagian berikuutnya… yuuuk

 
 
Gravatar
 

aldy @27.01.2009

Mas, osiempel v.3 bisa didownload gratis gak, pengen gunakan ne…

 
 

Maaf, form komentar saya tutup. Jika ada pertanyaan atau pendapat, langsung saja ke halaman kontak.