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 <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
Diakses dg kata kunci:
bikin theme wordpress (46), bikin tema (40), bikin theme (36), cara membuat template cantik untuk wordpress menggunakan wp blank (8), membuat tema sendiri wordpress (5), free download templete wordpress header lebar (4), atur lebar template wordpress (4), membuat desain sederhana dengan php (3), cara membuat desain koran (3), free wordpress template slider 4 kolom (3), membuat themme wp (3), contoh blogspot keren (3), bikin themes wp (3), cara membuat theme wp sendiri (3), bikin kotak (3), membuat themplate WP (2), contoh css dengan php (2), membuat template wordpress dengan WP Blank (2), contoh header keren (2), contoh template buat adsense (2), kumpulan co ntoh website dengan php gratis (2), membuat header image pada wordpress theme (2), membuat design forum (2), category post sidebar wordpress (2), theme wp menu (2), bikin theme wp (2), tema wp yang bagus (2), cara membuat desain theme wordpress (2), contoh desain kotak (2), cara membuat theme wordpress menggunakan blank wordpress theme (2), trik membuat themes wordpress (2), theme wp boldy (2), tutorial membuat slider tema boldy (1), pengertian koding sendiri (1), tutorial membuat tema sendiri wordpress (1), wordpress theme sederhana kompatibel untuk adsense (1), membagi kolom wp (1), memasukkan tag ke dalam WP (1), memasukan desain html ke blog (1), letak </body> di wp (1), membuat tema wp endiri (1), wp theme dari template html (1), panduan theme design (1), tag <blockquote gt; berfungsi untuk (1), menyisipkan kode template html di page wordpress (1), menambah kolom theme wp (1), tema css sederhana (1), thema wp (1), membuat thema wp (1), Theme framework yang bagus (1)
Daftar Isi Membuat Theme WP
- Cara Membuat Theme WordPress
- Membangun Theme WP: Style.css
- Membangun WP Theme: index.php
- Bikin Theme WP: Designing
- Bikin Tema WP: Layout
- Membuat Theme: Heading
- Buat Theme WordPress: Blog Header
- Buat Theme WP: Konten
- Mengatur Konten dalam Themes WordPress
- Styling Konten WordPress
- Membuat Sidebar Widget
- Styling Sidebar
- Membuat Footer
- Membuat Custom Background
- Membuat Drop Down Menu
- Search Form Gaya dengan Image
- Memasang Featured Image
- Memperbaiki tampilan halaman depan
- Membuat Featured Slide Show
- Bermain-main dengan Looping WordPress
- Memecah File Themes
- Memecah Sidebar
- Membuat File Single.php, archive.php, dll
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..
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.
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