Nov 6, 2008
Tutorial Cara Membuat Theme WordPress Sendiri ( Langkah #0 : pendahuluan, serta tools – tools yang dibutuhkan )
oleh Fikri
Pendahuluan Tutorial Cara Membuat Theme WordPress Sendiri
Ok. Kami yakin topik “Tutorial Cara Membuat Theme WordPress Sendiri” ini dibutuhkan banyak orang. Karena meskipun banyak theme dengan kualitas premium bertebaran secara gratis di luar sana, permasalahnya hanya satu : Setiap orang memiliki selera masing – masing. Dan meskipun bagus, belum tentu theme gratis tersebut cocok untuk anda. Betul begitu?
Hal yang menjadi tantangan untuk kami dalam membuat tutorial ini adalah kenyataan bahwa tidak semua pembaca tutorial ini memiliki dasar – dasar mengenai web design dan web developing yang mana keduanya merupakan hal yang dibutuhkan dalam membuat theme wordpress. Rumus sederhana membuat Theme WordPress :
WordPress Theme = XHTML + CSS + tag-tag PHP untuk memanggil fungsi WordPress + Javascript ( untuk efek2 tertentu )
Maka dari itu, kami akan berusaha semaksimal mungkin untuk menjelaskan semua aspek dalam membuat WordPress Theme. Sedetil mungkin, sepengetahuan kami, dalam bahasa yang semudah mungkin. Ok, kenyataan bahwa membuat theme itu agak sulit memang benar, namun jika anda mempelajarinya dengan tepat, pasti bisa. buktinya ada banyak sekali orang yang bisa membuat theme wordpress sendiri kan?
Tools yang dibutuhkan untuk membuat WordPress Theme sendiri
hal – hal yang kita butuhkan untuk membuat WordPress Theme kita sendiri :
- WordPress Theme yang terinstal dan dapat berjalan secara lokal di komputer anda.
- Editor untuk mengedit source code
- Software untuk image editing.
Engine WordPress yang terinstal dan dapat berjalan secara lokal di komputer anda.
maksudnya adalah komputer anda berperan sebagai server dan ada engine wordpress yang terinstall di server komputer anda. Jadi anda tidak perlu terkoneksi ke internet : Nyalakan PC anda, Nyalakan program server di komputer anda, buka browser, dan akses localhost. Gunanya? agar proses pengeditan berjalan cepat, dan anda tidak mubazir Bandwith.
- Untuk melakukan ini, download XAMPP, software yang akan membuat PC anda mampu bekerja sebagai server ( download yang installer ) disini lalu install pada PC anda
- Download versi terbaru dari WordPress disini
Tutorial lengkap untuk menjalankan WordPress pada PC anda, baca halaman ini.
Editor untuk mengedit Source Code
Website tersusun atas code. baik itu HTML, CSS, JavaScript, kesemuanya adalah kode. maka dari itu anda membutuhkan Software editor kode.
Sofware Editor Code :
- Macromedia Dreamweaver. bagus untuk pemula karena ada fitur autocompletenya. Seperti Google Suggestion namun untuk kode lah. Pewarnaan code juga cukup membantu sih. Saya pribadi dulu menggunakan software ini saat awal – awal belajar web developing. Masalahnya adalah : software ini cukup berat dan berbayar.
- NotePad ++ . jika anda kesulitan mendapatkan DreamWeaver, gunakan Notepad ++ saja. Gratis, ringan, dan bekerja dengan baik. Download NotePad ++ disini, lalu install
Software untuk image Editing
Software untuk mengolah gambar. Well, sepertinya tidak perlu dijelaskan lagi : Adobe PhotoShop dan CorelDraw.
Ok, langkah pendahuluan dan tools yang akan kita butuhkan cukup sampai disini. Berlanjut di post selanjutnya.
Ada pertanyaan? atau Ada langkah yang kurang jelas? Atau mungkin ada yang terlewat? izinkan kami mengetahuinya. silahkan sampaikan pandangan anda melalui kolom komentar
Enjoy!
P.S. :
Ngomong – ngomong, untuk mengetahui lebih jauh, ini alamat website tempat saya mempelajari cara membuat Theme WordPress. ( in English ) : WpDesigner.com
Selanjutnya : Langkah #1 : Memahami Sturktur File WordPress Theme
Dapatkan update harian bloggingly GRATIS di RSS Reader anda! Subscribe sekarang RSS FEED BLOGGINGLY !
Apa itu RSS? Kenali RSS di halaman ini

amzabro bilang,
Saya tunggu seri selanjutnya.. Oya terimaksaih dah ngasih link ke artikel saya.
on 06 Nov 2008 / 16:07
F bilang,
Ssma – sama. tadinya saya ingin buat sendiri TUtorialnya tapi tidak terkejar. jadi “nebeng” saja lah.
on 07 Nov 2008 / 03:43
Tutorial Cara Membuat Theme Wordpress Sendiri ( Langkah #1 : Memahami struktur File Theme Wordpress ) | Bloggingly | a blog about blog, blogging, and blogger bilang,
[...] Lanjutan dari seri Tutorial Cara Membuat Theme Sendiri. Sebelum anda membaca post ini, pastikan anda sudah membaca Pendahuluan dan Tools yang di perlukan. [...]
on 07 Nov 2008 / 06:08
Tutorial Cara Membuat Theme Wordpress Sendiri ( Langkah #2 : Memahami Tag - tag XHTML & Kegunaannya, dan aturan penulisannya ) | Bloggingly | a blog about blog, blogging, and blogger bilang,
[...] Tutorial Cara Membuat Theme WordPress Sendiri ( Langkah #0 : Pendahuluan, serta tools – tools yang d… [...]
on 09 Nov 2008 / 04:32
Tutorial Cara Membuat Theme Wordpress Sendiri ( Langkah #3 : Membuat File Dasar Theme Wordpress : index.php & style.css) | Bloggingly | a blog about blog, blogging, and blogger bilang,
[...] Langkah #0 : Pendahuluan, serta tools – tools yang dibutuhkan [...]
on 10 Nov 2008 / 04:08
Tutorial Cara Membuat Theme Wordpress Sendiri ( Langkah #4 : Memuat Konten Blog Ke Dalam Theme) | Bloggingly | a blog about blog, blogging, and blogger bilang,
[...] Langkah #0 : Pendahuluan, serta tools – tools yang dibutuhkan [...]
on 11 Nov 2008 / 04:05
Tutorial Cara Membuat Theme Wordpress Sendiri ( Langkah #5 : Mendesain Theme Menggunakan CSS ) | Bloggingly | a blog about blog, blogging, and blogger bilang,
[...] Langkah #0 : Pendahuluan, serta tools – tools yang dibutuhkan [...]
on 13 Nov 2008 / 14:18
yedi bilang,
kenapa ketika saya coba publish ada error Parse error: syntax error, unexpected ‘;’ in C:\xampp\htdocs\test\wp-content\themes\latihan\single.php on line 50
how fixed it?
on 16 Oct 2010 / 17:13
8 Langkah Membuat Theme Wordpress | fikrirasyid.com bilang,
[...] Langkah #0 : Pendahuluan, serta tools – tools yang dibutuhkan [...]
on 16 Nov 2008 / 16:54
BLogicThink [dot] com bilang,
Lanjut ke posting selanjutnya sambil menunggu unduhan selesai
kita coba nih… jadi gak nih themes saya
on 03 Dec 2008 / 16:14
F bilang,
Hehe, silahkan di coba Kang
on 04 Dec 2008 / 03:12
epoel bilang,
bos bleh tanya ga…tentang bikin themes,,pake “ownskin”,,,
on 25 May 2011 / 01:10
annosmile bilang,
ditunggu artikel selanjutnya
on 10 Dec 2008 / 08:49
F bilang,
Sudah lengkap kok tutorialnya. Ada 8 post tentang membuat theme sendiri ini. Ikuti link “Selanjutnya” saja
on 10 Dec 2008 / 10:32
theokomunika bilang,
salam kenal bro….ijin belajar ahh…..
on 11 Dec 2008 / 13:09
F bilang,
Salam kenal juga
Silahkan kang, senang bisa memberikan apa yang saya ketahui
on 12 Dec 2008 / 04:05
dew4 bilang,
Wehee bOs gak Ada sOfTwaareNya TahhH ????
BagI BagI sOfTwareNya jacHh bos ????:D
on 11 Dec 2008 / 22:51
F bilang,
generator theme maksudnya? saya kurang suka menggunakan generator sih, jadi belum “mencari – cari” yang seperti itu. Lebih senang yang manual, lebih bisa di-customized
on 12 Dec 2008 / 04:07
dew4 bilang,
BOs JngN Lupa LiNk BLoG saYa yachhHh ….. heheh
on 11 Dec 2008 / 22:52
Asiech bilang,
wah ternyata sulit juga ya buatnya…………..:)
link balik ya mas
on 29 Dec 2008 / 14:22
sof bilang,
sangat bermanfaat sekali artikelnya…
Salut and thx
on 31 Dec 2008 / 10:03
Tabloid Internet bilang,
Saya mau tanya satu hal. Kalo sudah pake XAMPP apa tidak perlu lagi pake APACHE ataukah untuk bisa pake XAMPP harus install APACHE lebih dulu?
on 14 Jan 2009 / 23:17
F bilang,
XAMPP dan Apache fungsinya sama. Salah satunya saja yang diinstall.
on 14 Jan 2009 / 23:32
Tabloid Internet bilang,
Thanks. Saya akan coba.
on 15 Jan 2009 / 00:10
andika bilang,
tak perlu pak kalau xampp xampp aja, tidak perlu instal appace
on 19 May 2011 / 18:58
Tabloid Internet bilang,
Tolong rekomendasikan petunjuk install WordPress di komputer. Link tutor diatas failed!.
on 16 Jan 2009 / 20:37
F bilang,
Ok. Sudah saya cek, blog disananya memang sedang ada masalah. Untuk cepatnya bisa anda googling dengan topik yang sama. Namun insya Allah saya akan membaut versi saya sendiri juga
on 16 Jan 2009 / 21:17
hasi bilang,
kaya nya agak ribet juga y,,,,
ada cara yg lebih mudah gk??
kalo buat blogger gmn?
on 05 May 2009 / 13:08
Fikri bilang,
Kalau mau yang agak praktis untuk wordpress, bisa coba generator theme. Cukup masukkan spesifikasi theme yang kita inginkan, dan tralala! otomatis di buat code-nya. Hanya saja, agak kurang fleksibel sih. ANda bisa coba salah satunya di:
http://www.yvoschaap.com/wpthemegen/
Kalau blogger belum di pelajari sih
on 06 May 2009 / 18:32
uchoxx bilang,
tank ya mas aku akan coba
on 28 Dec 2010 / 22:14
cheuw bilang,
kang..
link yg “Tutorial lengkap untuk menjalankan WordPress pada PC anda, baca halaman ini.”
ko suspended?gmn cara install nya dumss?
on 11 May 2009 / 19:24
Fikri bilang,
@Cheuw
Wah, di suspend y? Saya baru tahu kalau blog yang saya referensikan di suspend, punten y
Download sorfware wordpress disini: http://wordpress.org/download/ setelah itu, ekstrak
Pertama, install XAMPP (apache server) di PC anda. Tutorialnya bisa anda lihat disini: http://bloggingly.com/tutorial-cepat-dan-sederhana-langkah-langkah-installasi-wordpress-di-komputer-lokal-menggunakan-xampp/
Copy file wordpress yang sudah di ekstrak tadi ke folder htdocs XAMPP. Jika anda menggunakan settingan default, maka folder tujuan anda adalah C > XAMPP > htdocs
nyalakan XAMPP anda.
buka browser, akses url http://localhost/wordpress
Sisanya, 5-minute-instalattion nya wordpress
Selamat mencoba. Semoga berhasil y
on 12 May 2009 / 01:24
budi bilang,
yang rinci donk tutorialnya
on 28 May 2009 / 12:29
Fikri bilang,
@budi
rinci yang seperti apa?
on 31 May 2009 / 21:14
orenteam bilang,
thank you mas,saya tunggu seri selanjutnya ya mas,lw bisa nti di kirim ke email aku ya mas…
on 15 Jul 2009 / 21:08
download ebook gratis bilang,
walah…. kirain di sini tutorialnya ternya di tempat lain yach…
on 03 Aug 2009 / 21:47
Ummi bilang,
Asslam.. wr.wb.
Trima kasih informasinya, dan maap sebelumnya, bisa add saya ndak mas fikri, mau konsultasi tentang blog dan sejenisnya… sekali lagi terima kasih atas izinnya,
Wasslam.. wr.wr.
on 14 Aug 2009 / 22:55
Fikri bilang,
@ummi
di add facebook page-nya bloggingly saja bu: http://www.facebook.com/pages/Bloggingly/40774798797
kita diskusinya disana nanti
on 16 Aug 2009 / 12:04
amir bilang,
lam enal bro ikut belajar y brow ?
link cara menjalankan WordPress pada PC
kok ngak bisa di buka y bos ?
mohon pencerahan?
on 20 Aug 2009 / 19:08
asep bilang,
Boss dari XAMM saya sudah upload tapi tidak hasilnya … kalo mo melihat file yang diupload wordpress dimana trims
on 08 Oct 2009 / 09:25
7 Tips Meningkatkan Page Views Blog bilang,
[...] Menulis artikel seri juga merupakan trik efektif meningkatkan pageviews. Artikel berseri mampu ‘menggiring’ pembaca untuk mengikuti satu artikel ke artikel-artikel lanjutan. Artikel seri yang efektif biasanya berupa tutorial, misalnya Tutorial Cara Membuat Theme WordPress Sendiri. [...]
on 29 Oct 2009 / 04:42
demoffy bilang,
Bisa diterima tapi.. sulit bnget deh kayakny…
on 28 Nov 2009 / 11:45
dirta bilang,
Terima kasih mas ya tutorialnya bagus sekali.
Boleh tanya.. ya.. Bisa tidak xampp diganti dengan appserv, soalnya di kompi terlanjur install appserv.
on 15 Dec 2009 / 15:43
kaos mercury bilang,
wuuuiiih belajar lagi
on 16 Dec 2009 / 23:53
Struktur File Wordpress Theme bilang,
[...] kini anda telah mendapatkan informasi paling mendasar mengenai wordpress theme. Tertarik untuk membuat theme anda sendiri? Setidaknya, kini anda lebih tahu bagaimana cara kerja wordpress theme lebih baik dari [...]
on 17 Jan 2010 / 02:08
aris irawan,SH bilang,
hoi……………..mas tolong juga gue dong………..
pengetahuan tentang ngedit Blog Nol Banget nih ?
on 23 Jan 2010 / 08:48
japestinho bilang,
@aris
Yup, silakan dibaca-baca dulu aja beberapa posting kami yang berkaitan dengan pengembangan wordpress. Nanti jika ada yang ingin ditanyakan lebih lanjut bisa hubungi kami
on 23 Jan 2010 / 09:28
Fitri bilang,
artikel membangun! keep berbagi! salam smangadh!
on 10 Feb 2010 / 09:25
Ian Hafild bilang,
Pengen belajar juga mas… Saya tunggu postingan selanjutnya..
on 19 Feb 2010 / 19:36
ardi bilang,
Siang mas… aku pengen belajar buat theme sendiri nih dan artikelnya sangat bagus, makasih buat artikelnya.
Aku dah coba nih beberapa kali, tp dari awal msh salah trs nih mas. Download xampp berhasil dan wordpress-nya tp lokasinya gak pernah spt yg mas tulis, misal: C:\xampp\wordpress\wp-content\themes\
Knp ya mas? please bantu dong…hehehe
on 06 Mar 2010 / 12:08
Dyah Ayu bilang,
Hmm, dicoba dulu ah…
Oh ya, bruan googling nemu software utk biki theme wordpress http://www.artisteer.com/?p=downloads
Klo leh tanya, theme kk dpt dri mana? bikin sendiri ya? Bagus bgts he..he..
on 18 Apr 2010 / 11:45
Fikri bilang,
hihi, theme ini buat sendiri. Masa theme developer theme blognya download buatan orang?
on 18 Apr 2010 / 19:30
hari bilang,
Saya Menyukai Tampilan website anda dengan materi yg dibahas didalamnya
Saya akan kunjungi beberapa waktu lagi untuk melihat informasi baru dari anda
on 19 Apr 2010 / 00:06
Ginga Amirul Muizz Purnama bilang,
Oke dah kalo begitu!
Ada tutor lain gak, buat Theme sendiri Blogger. Aku mau yang lebih futuristik dengan blogku ini.
Wassalam
on 28 Apr 2010 / 19:40
irfan bilang,
makasih bro…..
slm knal………
bro, klo boleh aq mnta nomr hpnya donk….?
aq pngn bljr lbh bnyk lgi….
biar gmpng…….. hehehehe
klw boleh blez ke nomr ne yah…?
085729658282
thanks…..
on 29 Apr 2010 / 08:39
Latief Anshor bilang,
Ass…Salam kenal brad,.
terimakasih atas panduannya.
Sukses selalu..
on 27 May 2010 / 22:17
Dyah bilang,
Masih bingung. Tapi sedang berusaha nih. Maklum, lum kenal dg css ‘n php. Klo html, lumayan sih, coz da di pelajaran.
Umm, boleh tdk minta theme wp nya? Suka bangets, elegan bangets ^^
on 28 May 2010 / 08:44
firdaus bilang,
apakah ada postingan membuat tema wordpress seperti yang ada di tema gratisan dan juga cara membuat template blogger?
on 01 Jun 2010 / 20:50
bagus bilang,
assoy……… saya mau mencoba semoga saya doakan saya.
numpang baca
on 02 Jul 2010 / 21:16
dedy bilang,
wah mantap nih diikutin dari awal… moga aja mahir dalam membuat thema.. thanks sob..
on 08 Jul 2010 / 14:54
Fikri bilang,
Semoga bermanfaat. FYI, tutorial ttg web design / development kita lebih fokuskan di outstando.com sekarang
on 09 Jul 2010 / 10:21
reza bilang,
tkhs om infonya ini yg saya cari …..
on 09 Jul 2010 / 17:29
Ecy bilang,
Thanks banget buat yang nulis artikel ini… dah lama pengen modif theme ku, tapi dpt nya baru skrg dr blog ini…
on 04 Aug 2010 / 11:17
raj bilang,
Mas,,,saya mau tanya.apakah dengan menggunaka wordpress dapat mengginputkan data dan apakah bisa digunakan pada jaringan antar gedung saja tanpa melalui internet.
on 05 Oct 2010 / 11:36
genuinekeys bilang,
terlalu rumit ya mas
klo menurutt aku yg paling gampang gunain software artister, lebih mudah & simple
on 06 Oct 2010 / 10:21
Fikri bilang,
ada hal yang lebih enak dilakukan manual
on 13 Oct 2010 / 03:52
Topan Aprilia bilang,
nice article..
jadi semangat ne bikin new theme..
on 09 Oct 2010 / 15:52
uya bilang,
bos, bisa di dibuat ebook nggak? saya butuh ini. dan bisa tolong dijelaskan tentang kodenya agar bisa lebih paham.
kelihatannya. kodenya agak sedikit berbeda dengan html. yang saya tidak mengerti tentang kode adalah wrapper, wrapper itu artinya apa sih boss?
on 04 Dec 2010 / 00:09
redlist bilang,
waduh kok kayaknya rumit y, -____-”
Mz q privat,.,ckckck
on 05 Dec 2010 / 20:53