Cara Membuat Theme WordPress.pdf

8/10/2019 Cara Membuat Theme WordPress.pdf

1/35

Cara Membuat Theme WordPress

190 Replies

Ini akan jadi tulisan bersambung karena saya pikir akan sulit menjelaskan cara membuat themeWordPress hanya dalam satu postingan. Kita akan mencoba membangun sebuah themesederhana, tanpa gambar sama sekali. Untuk gambar, anda bikin sendiri ya? hehehe

Sebelum kita memulai ngurusin coding, saya akan coba share dulu struktur berkas themes.Karena anda harus paham soal ini dulu sebelum beranjak mengutak-atik kode nanti.

Berkas Utama Theme

Sejatinya, ada 2 berkas penting yang harus dimiliki sebuah themes, yaitu:

- style.css- index.php

Dengan dua berkas ini, kita sudah bisa membangun sebuah themes WordPress. Tapi, untukmenampilkan hasil yang lebih fantastis, kita membutuhkan beberapa berkas lain untukmendukung themes kita.

Berkas Tambahan

Inilah berkas-berkas yang bisa dipakai sekalian dengan fungsi-fungsinya:

- home.php :digunakan untuk menampilkan halaman depan blog- header.php : Digunakan untuk menampilkan bagian header blog- sidebar.php :digunakan untuk menampilkan bagian sidebar blog- footer.php :digunakan untuk menampilkan bagian footer blog- single.php :digunakan untuk menampilkan artikel.- page.php :digunakan untuk menampilkan page.- search.php :digunakan untuk menampilkan hasil pencarian.- archive.php :digunakan untuk menampilkan arsip blog (arsip tanggal, bulan, dll).- functions.php :digunakan untuk mengatur fungsi-fungsi yang berlaku di blog.- 404.php :digunakan untuk menampilkan halaman error 404

Nah, untuk sementara itu dulu ya. Minta komentarnya dong, biar semangat gitu lho.. hehehe

Dan inilah beberapa artikel berserinya.

1. Cara Membuat Theme WordPress2. Membangun Theme WP: Style.css3. Membangun WP Theme: index.php4. Bikin Theme WP: Designing
http://wordpress.or.id/cara-membuat-theme-wordpress.html#commentshttp://wordpress.or.id/cara-membuat-theme-wordpress.html#commentshttp://wordpress.or.id/cara-membuat-theme-wordpress.htmlhttp://wordpress.or.id/cara-membuat-theme-wordpress.htmlhttp://wordpress.or.id/membangun-theme-wp-style-css.htmlhttp://wordpress.or.id/membangun-theme-wp-style-css.htmlhttp://wordpress.or.id/membangun-wp-theme-index-php.htmlhttp://wordpress.or.id/membangun-wp-theme-index-php.htmlhttp://wordpress.or.id/bikin-theme-wp-designing.htmlhttp://wordpress.or.id/bikin-theme-wp-designing.htmlhttp://wordpress.or.id/bikin-theme-wp-designing.htmlhttp://wordpress.or.id/membangun-wp-theme-index-php.htmlhttp://wordpress.or.id/membangun-theme-wp-style-css.htmlhttp://wordpress.or.id/cara-membuat-theme-wordpress.htmlhttp://wordpress.or.id/cara-membuat-theme-wordpress.html#comments


2/35

5. Bikin Tema WP: Layout6. Membuat Theme: Heading7. Buat Theme WordPress: Blog Header

Membangun Theme WP: Style.css73 Replies

Oke, sekarang kita mulai dengan membangun style dulu. Sebenarnya sih cara kerjanyabergantian antara file index.php dan style.css. Tapi karena informasi theme ada di file style.css,maka file inilah yang pertama kali kita buat.

Sebelum bicara terlalu banyak, untuk membuat theme WordPress anda membutuhkan sebuahserver lokal (localhost). Anda bisa pakai AppServ, XAMPP atau yang lainnya untuk membangunserver lokal di komputer pribadi. Sangat tidak bijaksana kalau anda membangun langsung di

hosting. Selain boros bandwidth juga boros waktu. Saya anggap anda sudah tahu soal instalasiWordPress di localhost dan cara mengaktifkan themes. Kalau belum bisa, sebaiknya anda belajardulu

Saya juga menganggap anda tahu bagaimana cara membuat file PHP. Kalau ini juga belum bisa,silahkan pelajari dulu ya? Oke, jika sudah siap, kita buat dulu folder tempat theme kita. Kitaakan namakan theme ini dengan: themegue. Jadi, silahkan buat folder /themegue/ di wp-content/themes.

Berikutnya semua file yang kita buat harus masuk di folder ini. Siap?

File pertama yang kita buat adalah style.css. File ini akan menangani semua tampilan theme kita.Untuk kustomisasi style, anda bisa baca referensi soal CSS. Tapi disini kita akan langsung pakaiperintah-perintah CSS yang kita terapkan di theme.

Pertama, kita isi file style.css dengan keterangan seperti ini:

view plaincopy to clipboardprint?

1. /*2. Theme Name: Theme Gue3. Theme URI: http://wordpress.or.id/

4.

Description: Theme Pertama yang Gue Buat untuk Bangsa Indonesia Tercinta5. Author: Lutvi Avandi6. Author URI: http://lutviavandi.com/7. Version: 1.08. */

Theme Name:isilah dengan nama theme yang ingin anda buatTheme URI:isilah dengan tempat mendownload theme ini
http://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/membuat-theme-heading.htmlhttp://wordpress.or.id/membuat-theme-heading.htmlhttp://wordpress.or.id/buat-theme-wordpress-blog-header.htmlhttp://wordpress.or.id/buat-theme-wordpress-blog-header.htmlhttp://wordpress.or.id/membangun-theme-wp-style-css.html#commentshttp://wordpress.or.id/membangun-theme-wp-style-css.html#commentshttp://wordpress.or.id/membangun-theme-wp-style-css.htmlhttp://wordpress.or.id/membangun-theme-wp-style-css.htmlhttp://wordpress.or.id/membangun-theme-wp-style-css.htmlhttp://wordpress.or.id/membangun-theme-wp-style-css.htmlhttp://wordpress.or.id/membangun-theme-wp-style-css.htmlhttp://wordpress.or.id/membangun-theme-wp-style-css.htmlhttp://wordpress.or.id/membangun-theme-wp-style-css.htmlhttp://wordpress.or.id/membangun-theme-wp-style-css.htmlhttp://wordpress.or.id/membangun-theme-wp-style-css.html#commentshttp://wordpress.or.id/buat-theme-wordpress-blog-header.htmlhttp://wordpress.or.id/membuat-theme-heading.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.html


3/35

Description:isilah dengan diskripsi singkat theme anda. Jika mau diupload ke wordpress.organda harus mengisinya dalam bahasa InggrisAuthor:isilah dengan nama anda (mau pakai nama saya boleh hehehe)Author URI:isilah dengan URL blog pribadi anda (kalau punya)Version:isi dengan versi themesnya. Idealnya sih dimulai dari 1.0

Simpanlah file tersebut dan sekarang coba anda cek di bagian Appearance Themes. Themes-nya belum muncul kan? hehehe itu karena 1 file lagi belum ada yaitu index.php. Nah, bikindeh file index.php di dalam folder themegue tadi. Tidak perlu diisi dulu, kosongan aja.

Sekarang seharusnya di menu Appearance Themes sudah ada sebuah theme baru dengan namaTheme Gue. Silahkan aktifkan.

Jika anda nekat mau melihat blog anda. Saya jamin isinya cuma blank doang. hehehe.. Namanyajuga theme belum jadi. Insya Allah besok kita akan belajar bagaimana cara mengisinya. Untuksaat ini kita tinggalkan dulu file style.css

Membangun WP Theme: index.php

42 Replies

Oke, inilah pertemuan ketiga kita dalam sharing cara membangun theme WordPress sendiri. Inimasih tingkat basic sehingga kita sama sekali belum mengutak-atik design sama sekali.
http://wordpress.or.id/membangun-wp-theme-index-php.html#commentshttp://wordpress.or.id/membangun-wp-theme-index-php.html#commentshttp://wordpress.or.id/membangun-wp-theme-index-php.html#comments


4/35

Setelah sebelumnya kita bahas soal pembuatan folder, dan penamaan theme melalui style.css,kita akan melangkah ke bagian yang lebih rumit sedikit yaitu file index.php. File ini bekerjasebagai pengatur apa saja yang ingin kita tampilkan di blog. Jadi ibaratnya gini, index.php itumengatur pasukannya, dan style.css mengatur seragamnya. Paham kan?

Semua file theme menggunakan bahasa PHP, dan tentu saja bisa disusupi tag HTML mengingathasil akhirnya nanti juga berupa HTML setelah diproses di server. Anda bisa pelajari lebih dalamsoal PHP di http://www.php.net. Kita akan langsung saja mengisi file index.php yang sudah kitabuat kemarin tapi masih kosong.

Untuk awalnya, kita isi dengan standart HTML biasa seperti ini:


1. 2.

3.

Judul Blog4. 5. 6. Judul Artikel7.

Artikel yang ingin dimunculkan
8. 9.
Simpan dan coba buka blog anda. Seharusnya sekarang sudah muncul tulisan kan? Nah, itulahcaranya memunculkan tulisan di blog melalui theme. Anda bisa gunakan perintah PHP dan tagHTML apapun disini. Suka-suka aja.

Bikin Theme WP: Designing

91 Replies

Nah, akhirnya sekarang kita melangkah pada tingkat yang lebih serius. Di artikel sebelumnyakita sudah bahas tentang index.php dan bagaimana mengimplementasikan halaman HTML kedalam 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:
http://wordpress.or.id/membangun-wp-theme-index-php.htmlhttp://wordpress.or.id/membangun-wp-theme-index-php.htmlhttp://wordpress.or.id/membangun-wp-theme-index-php.htmlhttp://wordpress.or.id/bikin-theme-wp-designing.html#commentshttp://wordpress.or.id/bikin-theme-wp-designing.html#commentshttp://wordpress.or.id/bikin-theme-wp-designing.html#commentshttp://wordpress.or.id/membangun-wp-theme-index-php.htmlhttp://wordpress.or.id/membangun-wp-theme-index-php.htmlhttp://wordpress.or.id/membangun-wp-theme-index-php.htmlhttp://wordpress.or.id/membangun-wp-theme-index-php.htmlhttp://wordpress.or.id/membangun-wp-theme-index-php.html


5/35

Contoh Design Theme

1. Header Blog2. Content3a. Sidebar lebar atas: Cocok untuk adsense atau iklan kotak besar3b. Sidebar kiri: Kita pakai untuk menampilkan recent post, category, dll3c. 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:


1. 2. 3. Theme Ujicoba4.
http://wordpress.or.id/bikin-theme-wp-designing.htmlhttp://wordpress.or.id/bikin-theme-wp-designing.htmlhttp://wordpress.or.id/bikin-theme-wp-designing.htmlhttp://wordpress.or.id/bikin-theme-wp-designing.htmlhttp://wordpress.or.id/bikin-theme-wp-designing.htmlhttp://wordpress.or.id/bikin-theme-wp-designing.htmlhttp://wordpress.or.id/bikin-theme-wp-designing.htmlhttp://wordpress.or.id/bikin-theme-wp-designing.html


6/35

5. 6. 7. 8. Lokasi header ada disini9.

10.

11. 12. Artikel akan muncul disini13. 14. 15. 16. Iklan kotak ada disini17. 18. 19. Menu-menu sidebar kiri ada disini20.

21.

22. Menu-menu sidebar kanan ada disini23. 24. 25. 26. 27. 28. Footer ada disini29. 30. 31.

32.

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

Nah, di deretan kode diatas, saya menempatkan beberapa tag &l t ; di v&gt ; . Tag ini kita pakaiuntuk menandai suatu wilayah. Nantinya, kita bisa mengatur tinggi, lebar background, warna danapapun yang ada di wilayah tersebut. Jadi, biar gampang, div dipakai untuk menamai suatuwilayah.

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. Sekarangkalau anda nekat mencoba melihat hasil kerja keras anda, biasanya masih amat jauh daridesign. Hehehe. Ndak usah khawatir, insya Allah besok kita mulai mengatur tata letaknyasehingga anda bisa senyum-senyum sendiri nantinya.. hahaha


7/35

Bikin Tema WP: Layout

72 Replies

Jika kemarin anda sudah belajar menentukan zona-zona di blog termasuk juga membuat desainsementara blog. Saat-nya kita mengatur wilayah tiap zona. Seperti diketahui, kemarin kita cumamemberi nama saja zona-zona yang ada menggunakan tag DIV. Nah, hari ini kita akanmenentukan lebar masing-masing zona lengkap dengan tata letaknya sehingga tampilannya nantiakan mendekati design awal kita.

Untuk itu, kita akan buka kembali file index.php dan meminta file tersebut untuk mengakses filestyle.css yang akan menjadi pemandu dalam tata letak dan tampilan blog nanti. caranya gimana?Perhatikan baris 1 -4 di file index.php yang sudah kita buat kemarin. Disana terlihat kode sepertiini:


1. 2. 3. Theme Ujicoba4.

Nah, untuk memanggil style.css, kita tinggal menambahkan sebaris kode ini sebelum tag:view plaincopy to clipboardprint?

1.


8/35

5.

Sampai sini paham ya?

Oke, berikutnya kita beralih ke style.css dan mulai menentukan luas wilayah tiap-tiap zona. Zonaawal yang kita tentukan adalah wrap. Fungsi zona ini untuk menentukan luas wilayahkeseluruhan blog. Ibaratnya, ini pagar paling luar lah. Masukkan ini di baris paling bawahstyle.css


1. #wrap {2. border:solid 1px #000;3. width:900px;4. margin:0 auto;

5.

padding:10px;6. }

Sekarang simpan dan coba lihat blog anda. Harusnya sudah ada garis hitam di batas terluarteritori blog. Dan kotaknya tepat berada di tengah-tengah browser. Dari perintahnya kira-kirajelaskan? border untuk nentukan garis tepi, width=lebar, margin jarak antara border dengan tepibrowser atau elemen lain. Padding untuk menentukan jarak antara border dengan tulisan.

Seharusnya tampilan blog anda akan seperti ini (klik untuk memperbesar):

Makin seru ya? Yuk, kita tangani bagian headernya. Untuk header ini, kita tentukan sajatingginya. Nantinya bisa kita isi juga lho dengan gambar. Tapi untuk sementara kita bikin jarakdulu biar ndak puyeng lagi-lagi tambahkan kode ini di bagian paling bawah style.css lalusimpan


1. #header {
http://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/wp-content/uploads/layout.gifhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.html


9/35

2. height:120px;3. background:#cccccc;4. }

Ada 2 perintah lagi yang kita masukkan yaitu height untuk menentukan tinggi header. Dalamcontoh diatas saya buat 120 pixel. Untuk lebarnya tidak kita tentukan karena dia akan mengikutiwrap yang sudah kita tentukan di atas tadi. Kemudian perintah background adalah menentukanlatar belakang zona header ini. Dalam contoh ini saya buat warna abu-abu. Untuk kode-kodewarna lain, anda bisa lihat di: html-color-codes.com

Harusnya sekarang kalau direfresh blog anda, maka akan ada box abu-abu di bagian headernya.Tidak usah screen shot ya? Udah bisa bayangkan kan? Kalau belum ya lihat aja blog andasendiri.. xixixi..

Berikutnya adalah bagian content. Untuk maincontent kita cuma akan berikan perintah untuk

mengambil jarak 10px dari header sehingga kelihatan putih wilayahnya nanti akan mengikutiisinya yaitu content dan sidebar. Kita langsung kerjakan ketiganya ya di style.css


1. #maincontent {2. margin-top:10px;3. }4. #content {5. width:590px;6. background:#FFCC00;

7.

float:left;8. }9. #sidebar {10. width:300px;11. background:#FF9900;12. float:left;13. margin-left:10px;14. }

Ada satu perintah tambahan lagi yaitu f l oat : l ef t ; . Perintah ini dipakai untuk membuat elemen

dibawahnya mengalir ke sebelah kanan. Maksudnya left adalah elemen yang bersangkutan ada dikiri dan yang lain ada di kanan

Jika lihat blog anda sekarang, harusnya bagian tengah sudah terpecah jadi dua bagian. Untukcontent dan untuk sidebar. Yuk, kita terusin lagi menambahkan style untuk zona lebar, kiri dankanan yang ada di dalam sidebar

http://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.htmlhttp://wordpress.or.id/bikin-tema-wp-layout.html


10/35

1. #lebar {2. background:#FF3300;3. margin-bottom:10px;4. }5. #kiri {

6.

background:#660000;7. width:145px;8. float:left;9. margin-right:10px;10. }11.#kanan {12. background:#660000;13. width:145px;14. float:left;15. }

Perintahnya udah ngerti semua kan? Gak ada yang baru Kalau dilihat sekarang, mustinyasudah mulai mirip deh desain blog kita. Cuma masih warna-warni.. hehehe.. Gpp, ini biar andalebih mudah melihat elemen-elemennya. Untuk footernya kita biarkan aja gitu ya? Dan inilahhasil akhirnya sampai pelajaran ini

Oke, biar ada waktu untuk praktek, silahkan deh dicoba dulu di rumah. Insya Allah besok kitalanjutin dengan perintah-perintah yang lebih keren lagi.

Membuat Theme: Heading

44 Replies
http://wordpress.or.id/membuat-theme-heading.html#commentshttp://wordpress.or.id/membuat-theme-heading.html#commentshttp://wordpress.or.id/wp-content/uploads/layout.jpghttp://wordpress.or.id/membuat-theme-heading.html#comments


11/35

Ini adalah pertemuan keenam dalam seri panduan membangun theme WordPress. Anda bisamembaca artikel-artikel sebelumnya dengan melihat daftar isi di bawah artikel ini.

Setelah kita melakukan tata letak layout di artikel sebelumnya, saatnya sekarang kita mengutak-atik bagian headernya. Disini kita akan mulai mencoba memasukkan fungsi-fungsi WordPress ke

dalam theme blog kita. Yuk kita mulai!


1. 2.


12/35

Ini kode untuk menerima ping back dari blog lain. Jadi kalau ada yang ngasih link ke kita, kitabisa langsung tahu.

Kalau kode diatas kita perlukan agar fungsi reply comment berfungsi. Tahu kan reply comment?Contohnya di blog ini. Kalau anda klik reply, maka secara otomatis form akan muncul disanadan anda bisa langsung ketik komentar di bawahnya. Canggih ya?

Nah, kalau udah dimasukkan semua, simpan deh filenya index.php dan coba anda lihat hasilnya.Untuk menguji titlenya, coba buka sebuah artikel melalui menu Posts Posts. Klik view salahsatu artikel. Seharusnya judulnya sudah berganti-ganti menurut judul artikelnya.

Buat Theme WordPress: Blog Header54 Replies

Panduan kali ini membutuhkan konsentrasi tinggi.. hehehe.. Makanya anda butuhfokus..fokus..dan fokus.. cieeh.. Bagi yang kesasar, ini adalah artikel ketujuh dari rangkaianartikel cara membuat theme WordPress dari awal sampai akhir. Anda bisa membaca-baca lagiartikel sebelumnya di bagian bawah tulisan ini:

Yang akan kita bahas nanti adalah bagian header blog. Saya punya gambaran headernya nantibisa diganti-ganti kayak Twenty Ten gitu, tapi nanti ajalah kalau kita sudah membahas soal

fungsi. Untuk saat ini kita bikin standart dulu. Namanya juga belajar. Tul nggak?

Kita akan pasang judul blog ukuran besar di bagian header. Kemudian kita tambahkan jugadescription dengan font lebih kecil di bawahnya dan nanti dekat dengan batas bawah header kitapasang menu navigasi. Untuk sementara menu navigasinya pakai list page saja. Nanti kita akanmerubahnya menjadi custom menu. Keren kan?

Yuk, langsung buka file index.php lalu fokus pada zona header yaitu baris antara tag hingga . Yuk kita lihat lagi kodenya:


1. 2. Lokasi header ada disini3.

Sekarang kita ganti tulisan Lokasi header ada disinidengan nama blog dan sekaligus diskripsidi bawahnya lalu kita pasang juga list page. Kode lengkapnya seperti ini:
http://wordpress.or.id/buat-theme-wordpress-blog-header.html#commentshttp://wordpress.or.id/buat-theme-wordpress-blog-header.html#commentshttp://wordpress.or.id/buat-theme-wordpress-blog-header.htmlhttp://wordpress.or.id/buat-theme-wordpress-blog-header.htmlhttp://wordpress.or.id/buat-theme-wordpress-blog-header.htmlhttp://wordpress.or.id/buat-theme-wordpress-blog-header.htmlhttp://wordpress.or.id/buat-theme-wordpress-blog-header.htmlhttp://wordpress.or.id/buat-theme-wordpress-blog-header.htmlhttp://wordpress.or.id/buat-theme-wordpress-blog-header.htmlhttp://wordpress.or.id/buat-theme-wordpress-blog-header.htmlhttp://wordpress.or.id/buat-theme-wordpress-blog-header.html#comments


13/35


1. 2. 3.

4.

5. 6.


14/35

16. }17.#menu ul {18. margin: 0;19. padding: 5px 0 0 15px;20. list-style: none;

21.

display: block;22. }23.#menu li , #menu li a{24. float: left;25. position: relative;26. margin-right:10px;27. color:#ffffff;28. text-decoration: none;29.}

Ada beberapa perintah CSS baru yang kita masukkan: font-size (untuk mengatur ukuran font),

list-style (untuk mengatur style list page), display (untuk mengatur bagaimana list ditampilkan.Dalam contoh ini kita buat mendatar) dan text-decoration (untuk mengatur dekorasi link. Dalamcontoh ini kita pilih none karena kita gak mau ada garis bawah di link-nya).

Agar mudah mengaturnya, kita tempatkan kode tersebut tepat diatas kode #maincontent biar urutgitu ini setingan untuk header.

Oh iya, ada yang terlupa kemarin. Kita belum mengatur font-nya kan? Nah, silahkan tambahinjuga deh di bagian atas deretan setingan CSS kode ini:


1. body {2. font-family: Georgia, "Bitstream Charter", serif;3. }

Nah, sekarang harusnya blog anda sudah muncul seperti ini:

Mudah-mudahan masih bisa diikuti ya? Insya Allah besok kita beranjak ke bagian konten-nya.Doakan aja moga sehat dan punya banyak kesempatan
http://wordpress.or.id/buat-theme-wordpress-blog-header.htmlhttp://wordpress.or.id/buat-theme-wordpress-blog-header.htmlhttp://wordpress.or.id/buat-theme-wordpress-blog-header.htmlhttp://wordpress.or.id/buat-theme-wordpress-blog-header.htmlhttp://wordpress.or.id/buat-theme-wordpress-blog-header.htmlhttp://wordpress.or.id/buat-theme-wordpress-blog-header.htmlhttp://wordpress.or.id/buat-theme-wordpress-blog-header.htmlhttp://wordpress.or.id/buat-theme-wordpress-blog-header.html


15/35

Buat Theme WP: Konten

43 Replies

Bukan blog namanya kalau ndak memunculkan konten. Nah, tutorial membuat theme WP kaliini akan beranjak turun ke bawah yaitu ke bagian konten. Disini nanti akan kita munculkanartikel-artikel blog yang sudah susah payah dan berpeluh serta berderai air mata kita tulis dengantinta emas kita *lebay*

Untuk itu mari fokus lagi ke index.php dan kita akan mengutak-atik kode ini:


1. 2. Artikel akan muncul disini

3.

Looping

Stop dulu! sebelum kita beranjak ke kode, saya perlu jelaskan dulu soal istilah looping. Loopingartinya perulangan. Dalam WordPress pengulangan ini dilakukan untuk menampilkan artikel.Misalnya di halaman depan kita setting untuk tampil 10 artikel, maka looping akan melakukanpengulangan perintah menampilkan artikel hingga 10 kali.

Untuk melakukan loop, biasanya kita memakai perintah while. Yang artinya, selama masih adaartikel yang ingin ditampilkan, maka ulangi lagi. Perintah ini sangat fleksibel. Ketika kitamembuat halaman artikel, berarti kan disana cuma ada 1 artikel saja yang akan ditampilkan.Maka while pun akan bekerja 1 kali saja. Enak kan?

Banyak fungsi-fungsi WP yang harus dimasukkan dalam loop ini. Artinya anda tidak bisameletakkan di luar loop. Contoh yang paling sering ditemui adalah fungsi the_title, the_content,the_date, dll.

Sekarang kita coba belajar bikin loop dulu. Ini kodenya. Pasang kode ini menggantikan tulisan

Artikel akan muncul disini


1. 2. 3. 4.
http://wordpress.or.id/buat-theme-wp-konten.html#commentshttp://wordpress.or.id/buat-theme-wp-konten.html#commentshttp://wordpress.or.id/buat-theme-wp-konten.htmlhttp://wordpress.or.id/buat-theme-wp-konten.htmlhttp://wordpress.or.id/buat-theme-wp-konten.htmlhttp://wordpress.or.id/buat-theme-wp-konten.htmlhttp://wordpress.or.id/buat-theme-wp-konten.htmlhttp://wordpress.or.id/buat-theme-wp-konten.htmlhttp://wordpress.or.id/buat-theme-wp-konten.htmlhttp://wordpress.or.id/buat-theme-wp-konten.htmlhttp://wordpress.or.id/buat-theme-wp-konten.htmlhttp://wordpress.or.id/buat-theme-wp-konten.htmlhttp://wordpress.or.id/buat-theme-wp-konten.htmlhttp://wordpress.or.id/buat-theme-wp-konten.htmlhttp://wordpress.or.id/buat-theme-wp-konten.htmlhttp://wordpress.or.id/buat-theme-wp-konten.htmlhttp://wordpress.or.id/buat-theme-wp-konten.htmlhttp://wordpress.or.id/buat-theme-wp-konten.htmlhttp://wordpress.or.id/buat-theme-wp-konten.html#comments


16/35

5. 6. 7.

Kita bahas satu per satu ya. Pertama fungsi have_posts(). Fungsi ini untuk mengecek apakah ada

tulisan yang ingin ditampilkan. Kita pakai fungsi IF untuk pengecekan. Jika have_posts adaisinya, maka perintah di bawahnya akan di eksekusi. Jika tidak ya langsung ke endif.

Kemudian while seperti dijelaskan diatas. Selama ada tulisan (have_post) maka the_post. Fungsithe_post digunakan untuk mengambil data di have_post dan kemudian dengan fungsi-fungsilainnya kita akan menampilkannya satu per satu.

Sebagai bahan belajar kali ini, kita cuma akan menampilkan judul blog saja dan mengakhirinyadengan tanda
untuk mengganti baris.

Sekarang jika anda melihat blog, maka akan ada judul-judul artikel disana. Cobalah membuat

beberapa artikel agar terlihat bagaimana loop bekerja.

Nah, silahkan berkreasi, ingin menampilkan apa di blog anda. Dan ini beberapa fungsi yang bisaanda pakai:

- the_permalink : digunakan untuk menampilkan URL artikel- the_title : untuk menampilkan judul artikel- the_content : untuk menampilkan konten artikel. Jika lebih dari 1 artikel, maka yang munculcuma sampai tanda readmore- the_excerpt: untuk menampilkan beberapa karakter awal artikel dan menghilangkan kodeHTML-nya

- the_time : untuk menampilkan kapan artikel ini di publikasikan- the_author : untuk menampilkan penulisnya- the_category : untuk menampilkan kategori artikel

Untuk menambah wawasan anda, silahkan coba baca-bacadaftar template tagsdaricodex.wordpress.org

Mengatur Konten dalam Themes WordPress

65 Replies

Wah, tidak terasa sudah lama sekali saya tidak meneruskan penduan membuat theme diwordpress.or.id. Bagaimana PR yang saya berikan, harusnya sih udah selesai semua ya? Nah,pertemuan kali ini saya cuma akan menunjukkan pengaturan konten yang saya lakukan.Barangkali ada yang masih belum mengerjakan, silahkan deh di contek

http://codex.wordpress.org/Template_Tagshttp://codex.wordpress.org/Template_Tagshttp://codex.wordpress.org/Template_Tagshttp://wordpress.or.id/mengatur-konten-dalam-themes-wordpress.html#commentshttp://wordpress.or.id/mengatur-konten-dalam-themes-wordpress.html#commentshttp://wordpress.or.id/mengatur-konten-dalam-themes-wordpress.htmlhttp://wordpress.or.id/mengatur-konten-dalam-themes-wordpress.htmlhttp://wordpress.or.id/mengatur-konten-dalam-themes-wordpress.htmlhttp://wordpress.or.id/mengatur-konten-dalam-themes-wordpress.htmlhttp://wordpress.or.id/mengatur-konten-dalam-themes-wordpress.htmlhttp://wordpress.or.id/mengatur-konten-dalam-themes-wordpress.htmlhttp://wordpress.or.id/mengatur-konten-dalam-themes-wordpress.htmlhttp://wordpress.or.id/mengatur-konten-dalam-themes-wordpress.htmlhttp://wordpress.or.id/mengatur-konten-dalam-themes-wordpress.html#commentshttp://codex.wordpress.org/Template_Tags


17/35

1. 2. 3. 4.


18/35

Selanjutnya kita akan bahas langsung 3 baris karena nanti di blog 3 baris kode ini akan munculhanya sebaris saja. Jadi kita sikat aja langsung ketiganya. OK?


1.

Publish on under by |2. 3.

Tiga baris diatas, diapit dengan DIV dengan id=postmeta. Kita beri id karena nanti akan kitarubah style-nya sehingga berbeda dengan konten. Biasanya sih dibuat ukurannya lebih kecil danada box gitu. Di dalam post meta ini kita masukkan tanggal artikel ini di publish dengan kode.

Kita juga akan menampilkan kategori artikel ini dengan perintah . Lalu disambung dengan menampilkan penulis artikel dengan kode .

Baris berikutnya adalah kode untuk menampilkan jumlah komentar lengkap dengan link menujulokasi komentar. Kata-kata dalam kurung adalah tulisan yang akan muncul bila tidak adakomentar, 1 komentar dan lebih dari satu komentar.

Baris yang dalam post meta ini adalah link Edit. Link ini hanya muncul jika anda login sebagaiadmin atau editor atau author artikel tersebut. Jika bukan itu, maka link tidak akan muncul.

Terakhir kode yang akan kita bahas adalah . Seperti namafungsinya, kode ini adalah untuk menampilkan komentar lengkap dengan form untuk mengisikomentarnya.

Dan inilah hasil akhir hingga pelajaran ini:
http://wordpress.or.id/mengatur-konten-dalam-themes-wordpress.htmlhttp://wordpress.or.id/mengatur-konten-dalam-themes-wordpress.htmlhttp://wordpress.or.id/mengatur-konten-dalam-themes-wordpress.htmlhttp://wordpress.or.id/mengatur-konten-dalam-themes-wordpress.htmlhttp://wordpress.or.id/mengatur-konten-dalam-themes-wordpress.htmlhttp://wordpress.or.id/mengatur-konten-dalam-themes-wordpress.htmlhttp://wordpress.or.id/mengatur-konten-dalam-themes-wordpress.htmlhttp://wordpress.or.id/mengatur-konten-dalam-themes-wordpress.html


19/35

Selamat Mencoba!

Styling Konten WordPress

28 Replies

Gak terasa lagi-lagi saya gak update sekian lama. Padahal saya rasa baru beberapa hari sayatinggal blog ini tapi cek tanggalnya ternyata update terakhir lebih dari sepekan yang lalu. Yaudah, kita terusin deh sharing ilmu cara membuat themes WordPress-nya.

Kali ini kita akan mengatur tampilan konten yang sudah kita buat di pertemuan sebelumnya.Karena mengatur style, berarti file yang akan kita edit sekarang adalah file style.css. Dan karenaini pengaturan konten, maka kita tempatkan saja di bawah pengaturan untuk konten sambilsekalian menghilangkan warna kuning di bagian konten artikelnya. Yuk, kita cari kode ini:


1. #content {2. width:590px;3. background:#FFCC00;4. float:left;5. }

Lalu kita hilangkan kode backgr ound: #FFCC00; agar warna belakangnya tetap putih. Jika andasimpan file style.css dan lihat blog anda sekarang, maka background kuningnya akan hilangsekarang dan berganti dengan putih bersih.

Tahap awal, kita atur dulu tampilan untuk judulnya. Sebelumnya kita telah mengidentifikasibagian judul artikel dengan . Jadi kita buat saja di style.css-nya seperti ini:
http://wordpress.or.id/styling-konten-wordpress.html#commentshttp://wordpress.or.id/styling-konten-wordpress.html#commentshttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.html#comments


20/35


1. .title , .title a{2. font-size: 20px;3. text-decoration:none;

4.

color:#000000;5. }

Satu tambahan perintah baru kita pelajari disini yaitu t ext- decor ati on: none; Perintah iniuntuk menghilangkan garis bawah pada judul artikel.

Dan untuk bagian post meta yang berisi informasi tanggal publikasi, kategori, jumlah komentarserta link edit, kita buat dengan font lebih kecil dan background warna abu-abu:


1.

#postmeta {2. font-size:10px;3. background: #EDEDED;4. padding:10px;5. }

Sekarang simpan dan lihat bagaimana tampilan blog anda sekarang

Hasil Akhir Styling bagian Konten

Pada bagian konten ini, sebenarnya ada banyak hal yang harus kita atur, misalnya bagaimanamenampilkan gambar nanti, list, link, dll. Tapi gpp, nanti kita atur lagi kalau sudah jadi. Santaisaja bos
http://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.htmlhttp://wordpress.or.id/styling-konten-wordpress.html


21/35

Membuat Sidebar Widget

83 Replies

Selamat berjumpa kembali dalam seri panduan membangun themes dari nol hingga menjadithemes yang memenuhi standart WordPress 3.1. Pelan tapi pasti themes yang sudah kita bangunmulai menampakkan bentuknya. Jika anda mengikuti terus panduan ini dari awal, saya yakinanda sudah mulai berani mengutak-atik themes yang sudah ada. Tapi buat yang terlambatsilahkan baca kembali panduan ini dari awal biar nyambung karena saya tidak akan mengulanglagi pelajaran yang sudah lewat

Jika kemarin kita telah menyelesaikan pembuatan bagian konten, maka sekarang kita akan cobamemasukkan unsur canggih dalam themes kita yaitu sidebar widget. Disini kita akan berkenalandengan file baru yang kita beri nama f unct i ons. php. File ini khusus menangani fungsi-fungsiPHP yang kita bangun untuk keseluruhan blog. Jadi, anda harus benar-benar membaca artikel ini

dengan baik dan teliti

Dalam membuat sidebar widget, kita akan bekerja dengan 3 file sekaligus:

1. functions.phpyang menangani fungsi widget di sidebar kita2. index.phpyang bertugas menentukan dimana letak sidebar widgetnya3. style.cssyang mengurusi bagaimana widget-widget ditampilkan

Baiklah, pertama kita akan buat file functions.php. Caranya sama dengan saat kita membuat fileindex.php, kalau sudah lupa silahkan buka kembali arsip-arsip tulisan berseri ini.

Untuk mendeklarasikan sebuah widget, kita gunakan fungsi r egi st er _si debar . Nah, karenakita akan meregistrasi 3 sidebar widget sekaligus sesuai dengan theme yang kita bangun, makakita akan buat fungsi khusus yang mendaftarkan 3 widget tersebut. Berikut kodenya:


1.


22/35

14. 'name' => 'Sidebar Kiri',15. 'id' => 'sidebar-kiri',16. 'description' => 'Sidebar kiri dengan lebar 145px terletak di bawah sidebar lebar',17. 'before_widget' => '',18. 'after_widget' => '',

19.

'before_title' => '',20. 'after_title' => '',21. ) );22.23. register_sidebar( array(24. 'name' => 'Sidebar Kanan',25. 'id' => 'sidebar-kanan',26. 'description' => 'Sidebar kanan dengan lebar 145px terletak di bawah sidebar lebar, di s

ebelah kanan sidebar kiri',27. 'before_widget' => '',28. 'after_widget' => '',

29.

'before_title' => '',30. 'after_title' => '',31. ) );32.33.}34.add_action( 'widgets_init', 'themegue_widgets' );35.?>

Oke, saya jelaskan dulu. Pertama kode f unct i on t hemegue_wi dgets( ) dipakai untukmendeklarasikan sebuah fungsi baru. Dalam contoh ini nama fungsinya adalaht hemegue_wi dget s.

Selanjutnya dalam fungsi tersebut kita mendeklarasikan 3 buah widget dengan nama sidebarlebar, sidebar kiri dan sidebar kanan. Masing-masing sidebar kita beri keterangan namasidebarnya, id, diskripsi, dll.

Dan terakhir kita daftarkan fungsi tersebut agar dieksekusi menggunakan perintah add_acti on(' wi dget s_i ni t ' , ' t hemegue_wi dget s' ) ;

Sudah paham ya?

Menginformasikan letak sidebar widget di Themes

Berikutnya kita akan menunjukkan kepada WordPress dimana letak sidebarnya. Gakmungkinkan kita cuma daftarin aja widgetnya tapi nggak kita tunjukkan mau muncul dimana.Konyol dong jadinya. Bagaimana caranya?

Buka file index.php dan kita cari kode sidebar kita yang dahulu. Kalau tidak salah, kodenyakemarin seperti ini:


23/35


1. 2. 3. Iklan kotak ada disini

4.

5. 6. Menu-menu sidebar kiri ada disini7. 8. 9. Menu-menu sidebar kanan ada disini10. 11.

Disinilah kita perintahkan WordPress meletakkan widget sidebar. Dan perlu diingat, walaupunnamanya sidebar widget, tapi tidak menutup kemungkinan untuk diletakkan di tempat lain lho

(misalnya header atau footer). Karena kitalah yang menentukan dimana widget tersebut akanmuncul.

Ada 2 cara untuk menampilkan widget.

Pertama widget baru muncul kalau ada isinya. Kalau ndak ada isinya dia hilang seolah-olah tidakada. Cara ini bisa kita terapkan di sidebar lebar. Kita asumsikan, sidebar lebar digunakan untukmenampilkan iklan banner atau adsense. Nah, kalau tidak ada iklan sama sekali, maka sidebar ituhilang sehingga hanya memunculkan sidebar kiri dan kanan saja. Maka kita ganti kode untukmenampilkan sidebar lebar dengan kode berikut:


1. 2. 3. 4. 5. 6. 7.

Lihat kan? Kita gunakan fungsi IF untuk melakukan pengecekan apakah sidebar lebar ada isinya

atau tidak (maksudnya widgetnya terisi atau tidak). Kalau ada, maka munculkan isinya. Kalaundak ada ya hilangkan beserta DIV-nya sehingga tampilan kotak lebarnya ikut hilang. Gak lucukok kalau kita cuma menampilkan kotak kosong doang.

Fungsi kita pakai untuk memunculkan isisidebar widget. Dalam hal ini sidebar widget dengan ID sidebar-lebar.
http://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.html


24/35

Cara kedua menampilkan widget adalah jika ada isinya, maka tampilkan isinya. Tapi jika tidakada isinya, maka tampilkan isi default. Jadi lokasi widgetnya tidak pernah kosong. Ini akan kitaterapkan untuk sidebar kiri dan kanan. Kodenya seperti ini:


1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

11.

12. 13. 14.

Nah, sudah paham kan? Sekarang tinggal kreatifitas anda sendiri yang menentukan isiandefaultnya apa. Inilah kode sidebar yang saya buat dengan isian default untuk sidebar kiri adalahform search dan arsip, sedangkan untuk sidebar kanan saya isi meta. Cekidot !!


1.

2. 3. 4. 5. 6. 7.8. 9. Arsip10. 11.

12.

13.

14. 15. 16.17.18. 19.
http://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.htmlhttp://wordpress.or.id/membuat-sidebar-widget.html


25/35

20. 21. Meta22. 23. 24.

25.

26. 27. 28. 29. 30.

Sekarang coba lihat blog anda. Sebelum kita pasang widget, seharusnya tampilannya seperti ini:

Tampilan sidebar sebelum dipasang widget

Dan inilah tampilan wp-admin pada menu widget


26/35

Menu Widget

Tampilannya masih ancur ya? Gpp, besok kita styling bagian sidebar ini. Anda pelajari dulu apayang sudah saya sampaikan sampai paham. Insya Allah ke depan kita akan lebih banyak utak-atik kode lagi. Buat anda yang nyasar kesini dan bingung mulai dari mana,klik disini untukmelihat daftar isinya.

Styling Sidebar

18 Replies

Bagaimana pelajaran kemarin? Sudah berhasil semua kan? Kali ini kita akan buat supaya sidebarkita lebih cakep. Untuk pewarnaan, silahkan anda pilih sendiri-sendiri ya? Warna-warna yangdipakai di panduan ini semuanya berdasarkan selera saya.. hehehe Anda bisa melihat daftarkode-kode warna di http://html-color-codes.com/ atau seperti saya menggunakan software colorpicker

Nah, kita langsung saja kalau gitu. Karena kali ini kita akan bahas soal styling (kalau bahasaIndonesia apa ya?) maka file yang kita utak-atik apa?

Bener style.css jadi GPL, langsung buka style.css dan kita cari lokasi styling sidebarnya.Sebenarnya bisa langsung anda tambah di bawah, tapi kelak ketika anda mau mengubah-ubahlagi anda akan puyeng nyarinya hehehe
http://wordpress.or.id/membuat-themes-wordpresshttp://wordpress.or.id/membuat-themes-wordpresshttp://wordpress.or.id/membuat-themes-wordpresshttp://wordpress.or.id/membuat-themes-wordpresshttp://wordpress.or.id/styling-sidebar.html#commentshttp://wordpress.or.id/styling-sidebar.html#commentshttp://wordpress.or.id/styling-sidebar.html#commentshttp://wordpress.or.id/membuat-themes-wordpresshttp://wordpress.or.id/membuat-themes-wordpresshttp://wordpress.or.id/membuat-themes-wordpress


27/35

Inilah style.css kita sebelumnya:


1. #sidebar {

2.

width:300px;3. background:#FF9900;4. float:left;5. margin-left:10px;6. }

Dan kita rubah seperti ini


1. #sidebar {

2.

width:300px;3. float:left;4. margin-left:10px;5. }6. #sidebar ul {7. margin: 0px;8. padding: 0px;9. }10.#sidebar li {11. list-style:none;12. font-size:12px;

13.

margin-bottom:5px;14.}15.#sidebar li a {16. text-decoration:none;17.}18.#sidebar h3 {19. font-size:16px;20. margin: 0 0 10px 0;21.}

Dan inilah hasilnya:
http://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.html


28/35

Hasil styling sidebar

Saya menempatkan sebuah banner ukuran 300px x 250px di sidebar lebar sehingga bisakelihatan ada bagian lebarnya. Sekarang tindakan terakhir adalah menghilangkan backgroundwarna abu-abu yang sementara saya pasang biar kelihatan bagian sidebarnya.

Mudah saja, cukup menghapus baris-baris sidebar di ID lebar, kiri dan kanan sehingga sepertiini:


1. #lebar {2. margin-bottom:10px;3. }4. #kiri {5. width:145px;6. float:left;7. margin-right:10px;8. }9. #kanan {10. width:145px;11.

float:left;12.}

Nah, sekarang anda lihat bagaimana hasil akhir blog anda. Insya Allah besok kita ngurusi bagianfooternya. Sampai jumpa lagi
http://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.htmlhttp://wordpress.or.id/styling-sidebar.html


29/35

Membuat Footer

81 Replies

Footer atau kaki blog adalah bagian yang biasanya berisi informasi singkat soal copy right,mesin yang dipakai dan mungkin juga informasi kecil soal blog. Di footer ini juga bisa kitasisipkan judul artikel sehingga bisa menambah daya dorong SEO-nya.

Pertama mari kita buka index.php. Dan kita cari bagian footernya:


1. 2. Footer ada disini3.

Kita akan ganti kata-kata Footer ada disini dengan informasi sebagai berikut:

1. Nama Blog2. Copyright3. Judul Artikel yg sedang dibuka4. Powered by WordPress

Maka kodenya adalah seperti ini:


1. 2.


30/35

Dan inilah hasil akhirnya saudara-saudara.. hehehe

Footer Theme WordPress

Untuk sentuhan terakhir adalah memasang fungsi wp_footer yang akan dipakai oleh banyakplugin untuk bekerja maksimal di blog anda. Cari kode dan pasang sebelumnya sepertiini:


1. 2. 3.

Sekarang coba anda login dan jika benar, maka admin bar akan muncul di blog anda heheheDan nanti kalau ada plugin lain yang membutuhkan fungsi ini untuk meletakkan beberapa kodedi footer, maka dia bisa meletakannya dengan mudah.

Themes ini secara prinsip sudah siap. Tentunya anda bisa memodifikasinya sesuka hati sehinggasesuai dengan selera anda. Anda bisa menghiasinya dengan background yang menarik atauheader yang keren untuk membuat themes ini makin cakep.

Dan dengan berakhirnya panduan membuat footer ini maka seri panduan dasar membanguntheme WordPress sudah selesai. Insya Allah berikutnya akan saya berikan beberapa tips dan trikuntuk meningkatkan performa themes ini sehingga makin maknyuss

Membuat Custom Menu Navigasi

38 Replies

Mulai artikel ini hingga artikel mendatang, saya akan sharing beberapa tips untuk membuattheme kita lebih canggih hehehe Pertama, saya akan sharing bagaimana cara memasang
http://wordpress.or.id/membuat-footer.htmlhttp://wordpress.or.id/membuat-footer.htmlhttp://wordpress.or.id/membuat-footer.htmlhttp://wordpress.or.id/membuat-custom-menu-navigasi.html#commentshttp://wordpress.or.id/membuat-custom-menu-navigasi.html#commentshttp://wordpress.or.id/membuat-custom-menu-navigasi.html#commentshttp://wordpress.or.id/membuat-footer.htmlhttp://wordpress.or.id/membuat-footer.htmlhttp://wordpress.or.id/membuat-footer.htmlhttp://wordpress.or.id/membuat-footer.htmlhttp://wordpress.or.id/membuat-footer.html


31/35

custom menu di themes sederhana yang sudah kita buat sebulan terakhir kemarin. Walaupuncanggih, tapi caranya mudah banget lho.. xixixi

Pertama, kita deklarasikan dulu custom menunya di functions.php (masih ingat kan?) cukuptambahkan kode ini di bawah file functions.php:


1. register_nav_menus( array(2. 'primary' => __( 'Navigasi Utama', 'themegue' ),3. ) );

Tulisan Navigasi Utama adalah nama lokasi yang akan kita masukkan custom menu. Sedangkanthemegue ya nama themesnya Untuk primary adalah nama identitas menu-nya.

Sekarang kita tinggal tentukan mau dipasang dimana custom menu-nya. Kalau dari theme yang

kita buat, berarti pasangnya di bagian header. Kita cari dulu kode ini:


1. 2.


32/35

Kita juga bisa menentukan lebar dan tinggi bagian headernya sehingga sesuai dengan themes.Hebatnya lagi, ternyata trik agar themes kita punya fasilitas custom header sangat mudah lho..hehehe Bagaimana sih caranya? Cekidot gan!

Ada 2 file yang kita otak-atik disini yaitu file functions.php dan index.php. Pada functions.php

kita tambahkan kode ini di bagian bawah:


1. define( 'HEADER_IMAGE_WIDTH', 900 );2. define( 'HEADER_IMAGE_HEIGHT',120 );3. define( 'HEADER_TEXTCOLOR', '000000' );4.5. add_custom_image_header( '', 'themegue_header_style' );6.7. function themegue_header_style() {

8.

echo '9. 10.#headimg {11. height:120px;12. background:#cccccc;13.}14.#name {15. font-family: Georgia, "Bitstream Charter", serif;16. font-size:30px;17.}18.h1 a {

19.

text-decoration:none;20.

}21.#desc {22. font-family: Georgia, "Bitstream Charter", serif;23. font-size:14px;24.}25.26.';27.}

Ada 3 bagian dalam kode diatas. Pertama adalah kode-kode define yang berisi nilai-nilai yang

menjadi default header blog nanti.

def i ne( ' HEADER_I MAGE_WI DTH' , 900 ) ; : menentukan ukuran lebar headerdef i ne( ' HEADER_I MAGE_HEI GHT' , 120 ) ; : menentukan ukuran tinggi headerdef i ne( ' HEADER_TEXTCOLOR' , ' 000000' ) ; : menentukan warna teks di header

Kemudian diikuti oleh kode untuk deklarasi bahwa theme kita menyediakan fasilitas gantiheader.
http://wordpress.or.id/membuat-custom-header.htmlhttp://wordpress.or.id/membuat-custom-header.htmlhttp://wordpress.or.id/membuat-custom-header.htmlhttp://wordpress.or.id/membuat-custom-header.htmlhttp://wordpress.or.id/membuat-custom-header.htmlhttp://wordpress.or.id/membuat-custom-header.htmlhttp://wordpress.or.id/membuat-custom-header.htmlhttp://wordpress.or.id/membuat-custom-header.html


33/35

add_cust om_i mage_header ( ' ' , ' t hemegue_header _st yl e' ) ;

Dan terakhir adalah kode yang kita gunakan untuk memasang style di halaman admin nanti saatuser mengedit gambar headernya.

Setelah kode-kode tersebut masuk di functions.php kita tentukan letak headernya di index.php(ingat, WP hanya robot yang nggak tahu apa-apa kalau ndak kita kasih tahu)

Karena design theme kita gambarnya adalah latar belakang maka kita letakkan style sebelum tag


1. 2. #header {3. background : url();4. }5.

.blogtitle a, .description {6. color: 7. }8.

Anda perhatikan kode adalah kode untuk memanggil gambarheader yang dipasang oleh user.

Sekarang silahkan deh coba masuk ke wp-admin lalu klik menu Appearance HeaderSelamat mencoba!

Membuat Custom Background

74 Replies

Sepertinya makin seru aja nih kegiatan kita utak-atik Themes WordPress. Dan kali ini saya ingintunjukkan sebuah jurus lagi untuk membuat themes anda lebih gaya dan full fungsi. Apalagikalau bukan custom background. hehehe..

Walaupun hasil akhirnya nanti sangat keren, tapi bikinnya ternyata gampang banget. Bahkancuma perlu edit 1 file doang. Apalagi kalau bukan file functions.php yang selama ini sudah

menemani kita dalam mempercanggih tampilan blog. Apa sih kode rahasianya? Nih, copy danpaste ke functions.php anda ya

1. add_custom_background();

Hah? cuman gitu doang mas? Trus apalagi yang diedit?
http://wordpress.or.id/membuat-custom-header.htmlhttp://wordpress.or.id/membuat-custom-header.htmlhttp://wordpress.or.id/membuat-custom-header.htmlhttp://wordpress.or.id/membuat-custom-background.html#commentshttp://wordpress.or.id/membuat-custom-background.html#commentshttp://wordpress.or.id/membuat-custom-background.html#commentshttp://wordpress.or.id/membuat-custom-header.htmlhttp://wordpress.or.id/membuat-custom-header.htmlhttp://wordpress.or.id/membuat-custom-header.htmlhttp://wordpress.or.id/membuat-custom-header.htmlhttp://wordpress.or.id/membuat-custom-header.html


34/35

Karena background itu dimana-mana cuma ada satu, jadi kita ndak perlu ngasih tahu WordPressdimana backgroundnya hehehe.. Dia sudah cukup cerdas untuk menebaknya.

Tapi setelah saya coba, ternyata ada masalah nih dengan theme kita saat kita pasangin fungsi ini.Masalahnya yaitu, background bagian dalam ikut-ikutan berubah warna. Maklum, kemarin

waktu bikin kita ndak ngisi dengan warna sehingga dianggap transparant. Nah, kita perbaikinyuk.

Buka style.css dan cari kode ini:


1. #wrap {2. border:solid 1px #000;3. width:900px;4. margin:0 auto;

5.

padding:10px;6. }

lalu kita tambahin deh kode warna latar belakang untuk tulisannya, misalnya putih sehinggajadinya seperti ini:


1. #wrap {2. border:solid 1px #000;3. width:900px;

4.

margin:0 auto;5. padding:10px;6. background:#ffffff;7. }

Yuk, kita lihat bagaimana hasilnya sekarang setelah kita rubah backgroundnya dengan warnacoklat misalnya
http://wordpress.or.id/membuat-custom-background.htmlhttp://wordpress.or.id/membuat-custom-background.htmlhttp://wordpress.or.id/membuat-custom-background.htmlhttp://wordpress.or.id/membuat-custom-background.htmlhttp://wordpress.or.id/membuat-custom-background.htmlhttp://wordpress.or.id/membuat-custom-background.htmlhttp://wordpress.or.id/membuat-custom-background.htmlhttp://wordpress.or.id/membuat-custom-background.htmlhttp://wordpress.or.id/membuat-custom-background.htmlhttp://wordpress.or.id/membuat-custom-background.htmlhttp://wordpress.or.id/membuat-custom-background.htmlhttp://wordpress.or.id/membuat-custom-background.htmlhttp://wordpress.or.id/membuat-custom-background.htmlhttp://wordpress.or.id/membuat-custom-background.htmlhttp://wordpress.or.id/membuat-custom-background.htmlhttp://wordpress.or.id/membuat-custom-background.html


35/35
http://wordpress.or.id/wp-content/uploads/hasil-akhir.jpg

Cara Membuat Theme WordPress.pdf

Documents

Transcript of Cara Membuat Theme WordPress.pdf