Bikin Theme WP

download Bikin Theme WP

of 28

Transcript of Bikin Theme WP

  • 7/31/2019 Bikin Theme WP

    1/28

    Bikin Theme WP: Designing

    Dipublikasi padaFebruari 18, 2011olehadmin

    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 Blog2. 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?

    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/author/qzonershttp://wordpress.or.id/author/qzonershttp://wordpress.or.id/author/qzonershttp://wordpress.or.id/author/qzonershttp://wordpress.or.id/bikin-theme-wp-designing.html
  • 7/31/2019 Bikin Theme WP

    2/28

    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. 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 biar mudeng. Dalam

    HTML, semua yang ada diantara tag dan akan dimunculkan di browser. Jadi sekarang

    kita fokus dulu pada kode-kode diantara dua tag itu. Oke?

  • 7/31/2019 Bikin Theme WP

    3/28

    Nah, di deretan kode diatas, saya menempatkan beberapa tag

    . 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

    Bikin Tema WP: Layout

    Jika kemarin anda sudah belajar menentukan zona-zona di blog termasuk juga membuat desain sementara

    blog. Saat-nya kita mengatur wilayah tiap zona. Seperti diketahui, kemarin kita cuma memberi nama saja

    zona-zona yang ada menggunakan tag DIV. Nah, hari ini kita akan menentukan lebar masing-masing zona

    lengkap dengan tata letaknya sehingga tampilannya nanti akan mendekati design awal kita.

    Untuk itu, kita akan buka kembali file index.php dan meminta file tersebut untuk mengakses file style.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 seperti ini:

    1. 2. 3. Theme Ujicoba4.

    Nah, untuk memanggil style.css, kita tinggal menambahkan sebaris kode ini sebelum tag /head>:

    1.

  • 7/31/2019 Bikin Theme WP

    4/28

    1. 2. 3. Theme Ujicoba4.

  • 7/31/2019 Bikin Theme WP

    5/28

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

    Ada 2 perintah lagi yang kita masukkan yaitu height untuk menentukan tinggi header. Dalam contoh diatas

    saya buat 120 pixel. Untuk lebarnya tidak kita tentukan karena dia akan mengikuti wrap yang sudah kita

    tentukan di atas tadi. Kemudian perintah background adalah menentukan latar belakang zona header ini.

    Dalam contoh ini saya buat warna abu-abu. Untuk kode-kode warna 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 anda sendiri.. xixixi..

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

    10px dari header sehingga kelihatan putih wilayahnya nanti akan mengikuti isinya 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 float:left;. Perintah ini dipakai untuk membuat elemen dibawahnya

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

    kanan

    Jika lihat blog anda sekarang, harusnya bagian tengah sudah terpecah jadi dua bagian. Untuk content dan

    untuk sidebar. Yuk, kita terusin lagi menambahkan style untuk zona lebar, kiri dan kanan yang ada di dalam

    sidebar

  • 7/31/2019 Bikin Theme WP

    6/28

    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, mustinya sudah mulai mirip

    deh desain blog kita. Cuma masih warna-warni.. hehehe.. Gpp, ini biar anda lebih mudah melihat elemen-

    elemennya. Untuk footernya kita biarkan aja gitu ya? Dan inilah hasil akhirnya sampai pelajaran ini

    Oke, biar ada waktu untuk praktek, silahkan deh dicoba dulu di rumah. Insya Allah besok kita lanjutin dengan

    perintah-perintah yang lebih keren lagi.

    PS: Jangan lupa ngajak teman untuk ikutan belajar ya? Biar seru!

    Membuat Theme: Heading

  • 7/31/2019 Bikin Theme WP

    7/28

    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.

  • 7/31/2019 Bikin Theme WP

    8/28

    Ini kode untuk menerima ping back dari blog lain. Jadi kalau ada yang ngasih link ke kita, kita bisa 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 disana dan 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 salah satu artikel. Seharusnya

    judulnya sudah berganti-ganti menurut judul artikelnya.

    Oke, kita sudah belajar aneka atribut di head. Insya Allah besok kita akan utak-atik bagian header blog.Ditunggu yah

    Buat Theme WordPress: Blog Header

    Panduan kali ini membutuhkan konsentrasi tinggi.. hehehe.. Makanya anda butuh fokus..fokus..dan fokus..

    cieeh.. Bagi yang kesasar, ini adalah artikel ketujuh dari rangkaian artikel cara membuat theme WordPress dar

    awal sampai akhir. Anda bisa membaca-baca lagi artikel sebelumnya di bagian bawah tulisan ini:

    Yang akan kita bahas nanti adalah bagian header blog. Saya punya gambaran headernya nanti bisa 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 juga description dengan

    font lebih kecil di bawahnya dan nanti dekat dengan batas bawah header kita pasang menu navigasi. Untuk

    sementara menu navigasinya pakai list page saja. Nanti kita akan merubahnya 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 disini dengan nama blog dan sekaligus diskripsi di bawahnya lalu

    kita pasang juga list page. Kode lengkapnya seperti ini:

  • 7/31/2019 Bikin Theme WP

    9/28

    1. 2. 3.

    4. 5. 6.
  • 7/31/2019 Bikin Theme WP

    10/28

    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 buatmendatar) dan text-decoration (untuk mengatur dekorasi link. Dalam contoh 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 urut gitu ini

    setingan untuk header.

    Oh iya, ada yang terlupa kemarin. Kita belum mengatur font-nya kan? Nah, silahkan tambahin juga 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

  • 7/31/2019 Bikin Theme WP

    11/28

    Buat Theme WP: Konten

    Bukan blog namanya kalau ndak memunculkan konten. Nah, tutorial membuat theme WP kali ini akan

    beranjak turun ke bawah yaitu ke bagian konten. Disini nanti akan kita munculkan artikel-artikel blog yang

    sudah susah payah dan berpeluh serta berderai air mata kita tulis dengan tinta emas kita *lebay*

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

    1. 2. Artikel akan muncul disini3.

    Looping

    Stop dulu! sebelum kita beranjak ke kode, saya perlu jelaskan dulu soal istilah looping. Looping artinya

    perulangan. Dalam WordPress pengulangan ini dilakukan untuk menampilkan artikel. Misalnya di halaman

    depan kita setting untuk tampil 10 artikel, maka looping akan melakukan pengulangan perintah menampilkan

    artikel hingga 10 kali.

    Untuk melakukan loop, biasanya kita memakai perintah while. Yang artinya, selama masih ada artikel yang

    ingin ditampilkan, maka ulangi lagi. Perintah ini sangat fleksibel. Ketika kita membuat 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 bisa meletakkan 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.
    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 ada isinya, maka perintah di

    bawahnya akan di eksekusi. Jika tidak ya langsung ke endif.

  • 7/31/2019 Bikin Theme WP

    12/28

    Kemudian while seperti dijelaskan diatas. Selama ada tulisan (have_post) maka the_post. Fungsi the_post

    digunakan untuk mengambil data di have_post dan kemudian dengan fungsi-fungsi lainnya kita akan

    menampilkannya satu per satu.

    Sebagai bahan belajar kali ini, kita cuma akan menampilkan judul blog saja dan mengakhirinya dengan 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 bisa anda 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 muncul cuma sampai

    tanda readmore

    - the_excerpt: untuk menampilkan beberapa karakter awal artikel dan menghilangkan kode HTML-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 tagsdari codex.wordpress.org

    Berhubung beberapa hari ke depan saya agak sibuk di offline, jadi insya Allah kita akan jumpa lagi hari Senin

    ya. Sebagai PR, silahkan anda utak-atik deh fungsi-fungsi itu dan tempatkan diantara while dan endwhile.

    Mengatur Konten dalam Themes WordPress

    Wah, tidak terasa sudah lama sekali saya tidak meneruskan penduan membuat theme di wordpress.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

    1. 2. 3. 4.

  • 7/31/2019 Bikin Theme WP

    13/28

    8.

    9. 10. 11. 12. 13. 14.

    Saya jelasin per barisnya ya. Baris pertama sampai ketiga sudah saya jelaskan di cara membuat konten bagian

    looping. Jadi kita langsung melompat ke baris ke empat yaitu:

  • 7/31/2019 Bikin Theme WP

    14/28

    2.

    3. Tiga baris diatas, diapit dengan DIV dengan id=postmeta. Kita beri id karena nanti akan kita rubah style-nya

    sehingga berbeda dengan konten. Biasanya sih dibuat ukurannya lebih kecil dan ada 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 menuju lokasi

    komentar. Kata-kata dalam kurung adalah tulisan yang akan muncul bila tidak ada komentar, 1 komentar dan

    lebih dari satu komentar.

    Baris yang dalam post meta ini adalah link Edit. Link ini hanya muncul jika anda login sebagai admin atau editor

    atau author artikel tersebut. Jika bukan itu, maka link tidak akan muncul.

    Terakhir kode yang akan kita bahas adalah . Seperti nama fungsinya, kode ini

    adalah untuk menampilkan komentar lengkap dengan form untuk mengisi komentarnya.

    Dan inilah hasil akhir hingga pelajaran ini:

    Selamat Mencoba!

  • 7/31/2019 Bikin Theme WP

    15/28

    Styling Konten WordPress

    Gak terasa lagi-lagi saya gak update sekian lama. Padahal saya rasa baru beberapa hari saya tinggal blog ini

    tapi cek tanggalnya ternyata update terakhir lebih dari sepekan yang lalu. Ya udah, 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 karena ini pengaturan konten, maka

    kita tempatkan saja di bawah pengaturan untuk konten sambil sekalian 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 background:#FFCC00; agar warna belakangnya tetap putih. Jika anda simpan file style.css

    dan lihat blog anda sekarang, maka background kuningnya akan hilang sekarang dan berganti dengan putih

    bersih.

    Tahap awal, kita atur dulu tampilan untuk judulnya. Sebelumnya kita telah mengidentifikasi bagian judul

    artikel dengan . Jadi kita buat saja di style.css-nya seperti ini:

    1. .title , .title a{2. font-size: 20px;3. text-decoration:none;4. color:#000000;5. }

    Satu tambahan perintah baru kita pelajari disini yaitu text-decoration:none; Perintah ini untuk menghilangkan

    garis bawah pada judul artikel.

    Dan untuk bagian post meta yang berisi informasi tanggal publikasi, kategori, jumlah komentar serta 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. }

  • 7/31/2019 Bikin Theme WP

    16/28

    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 bagaimana menampilkan

    gambar nanti, list, link, dll. Tapi gpp, nanti kita atur lagi kalau sudah jadi. Santai saja bos

    Membuat Sidebar Widget

    Selamat berjumpa kembali dalam seri panduan membangun themes dari nol hingga menjadi themes yang

    memenuhi standart WordPress 3.1. Pelan tapi pasti themes yang sudah kita bangun mulai menampakkan

    bentuknya. Jika anda mengikuti terus panduan ini dari awal, saya yakin anda sudah mulai berani mengutak-

    atik themes yang sudah ada. Tapi buat yang terlambat silahkan baca kembali panduan ini dari awal biar

    nyambung karena saya tidak akan mengulang lagi pelajaran yang sudah lewat

    Jika kemarin kita telah menyelesaikan pembuatan bagian konten, maka sekarang kita akan coba memasukkan

    unsur canggih dalam themes kita yaitu sidebar widget. Disini kita akan berkenalan dengan file baru yang kita

    beri nama functions.php. File ini khusus menangani fungsi-fungsi PHP 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.php yang menangani fungsi widget di sidebar kita2. index.php yang bertugas menentukan dimana letak sidebar widgetnya3. style.css yang mengurusi bagaimana widget-widget ditampilkan

    Baiklah, pertama kita akan buat file functions.php. Caranya sama dengan saat kita membuat file index.php,

    kalau sudah lupa silahkan buka kembali arsip-arsip tulisan berseri ini.

  • 7/31/2019 Bikin Theme WP

    17/28

    Untuk mendeklarasikan sebuah widget, kita gunakan fungsi register_sidebar. Nah, karena kita akan meregistrasi

    3 sidebar widget sekaligus sesuai dengan theme yang kita bangun, maka kita akan buat fungsi khusus yang

    mendaftarkan 3 widget tersebut. Berikut kodenya:

    1.

  • 7/31/2019 Bikin Theme WP

    18/28

    Selanjutnya dalam fungsi tersebut kita mendeklarasikan 3 buah widget dengan nama sidebar lebar, sidebar kir

    dan sidebar kanan. Masing-masing sidebar kita beri keterangan nama sidebarnya, id, diskripsi, dll.

    Dan terakhir kita daftarkan fungsi tersebut agar dieksekusi menggunakan perintah add_action( 'widgets_init',

    'themegue_widgets' );

    Sudah paham ya?

    Menginformasikan letak sidebar widget di Themes

    Berikutnya kita akan menunjukkan kepada WordPress dimana letak sidebarnya. Gak mungkinkan 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, kodenya kemarin seperti ini:

    1. 2. 3. Iklan kotak ada disini4. 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, walaupun namanya

    sidebar widget, tapi tidak menutup kemungkinan untuk diletakkan di tempat lain lho (misalnya header atau

    footer). Karena kitalah yang menentukan dimana widget tersebut akan muncul.

    Ada 2 cara untuk menampilkan widget.

    Pertama widget baru muncul kalau ada isinya. Kalau ndak ada isinya dia hilang seolah-olah tidak ada. Cara ini

    bisa kita terapkan di sidebar lebar. Kita asumsikan, sidebar lebar digunakan untuk menampilkan iklan banner

    atau adsense. Nah, kalau tidak ada iklan sama sekali, maka sidebar itu hilang sehingga hanya memunculkan

    sidebar kiri dan kanan saja. Maka kita ganti kode untuk menampilkan sidebar lebar dengan kode berikut:

    1. 2. 3. 4. 5.

  • 7/31/2019 Bikin Theme WP

    19/28

    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. Kalau ndak ada ya hilangkan

    beserta DIV-nya sehingga tampilan kotak lebarnya ikut hilang. Gak lucu kok kalau kita cuma menampilkan

    kotak kosong doang.

    Fungsi kita pakai untuk memunculkan isi sidebar widget. Dalam hal ini

    sidebar widget dengan ID sidebar-lebar.

    Cara kedua menampilkan widget adalah jika ada isinya, maka tampilkan isinya. Tapi jika tidak ada isinya, maka

    tampilkan isi default. Jadi lokasi widgetnya tidak pernah kosong. Ini akan kita terapkan 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 isian defaultnya apa. Inilah

    kode sidebar yang saya buat dengan isian default untuk sidebar kiri adalah form search dan arsip, sedangkan

    untuk sidebar kanan saya isi meta. Cekidot !!

    1. 2.

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

  • 7/31/2019 Bikin Theme WP

    20/28

    11. 12. 13. 14. 15. 16.17.18. 19. 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

  • 7/31/2019 Bikin Theme WP

    21/28

    Menu Widget

    Tampilannya masih ancur ya? Gpp, besok kita styling bagian sidebar ini. Anda pelajari dulu apa yang sudah

    saya sampaikan sampai paham. Insya Allah ke depan kita akan lebih banyak utak-atik kode lagi.

    Styling Sidebar

    Bagaimana pelajaran kemarin? Sudah berhasil semua kan? Kali ini kita akan buat supaya sidebar kita lebih

    cakep. Untuk pewarnaan, silahkan anda pilih sendiri-sendiri ya? Warna-warna yang dipakai di panduan ini

    semuanya berdasarkan selera saya.. hehehe Anda bisa melihat daftar kode-kode warna di http://html-color-

    codes.com/ atau seperti saya menggunakan software color picker

    Nah, kita langsung saja kalau gitu. Karena kali ini kita akan bahas soal styling (kalau bahasa Indonesia 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 bisalangsung anda tambah di bawah, tapi kelak ketika anda mau mengubah-ubah lagi anda akan puyeng nyarinya

    hehehe

    Inilah style.css kita sebelumnya:

    1. #sidebar {2. width:300px;

  • 7/31/2019 Bikin Theme WP

    22/28

    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:

  • 7/31/2019 Bikin Theme WP

    23/28

    Hasil styling sidebar

    Saya menempatkan sebuah banner ukuran 300px x 250px di sidebar lebar sehingga bisa kelihatan ada bagian

    lebarnya. Sekarang tindakan terakhir adalah menghilangkan background warna abu-abu yang sementara saya

    pasang biar kelihatan bagian sidebarnya.

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

    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 bagian footernya.

    Sampai jumpa lagi.

  • 7/31/2019 Bikin Theme WP

    24/28

    Membuat Footer

    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 kita sisipkan 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.

  • 7/31/2019 Bikin Theme WP

    25/28

    Footer Theme WordPress

    Untuk sentuhan terakhir adalah memasang fungsi wp_footer yang akan dipakai oleh banyak plugin untuk

    bekerja maksimal di blog anda. Cari kode dan pasang sebelumnya seperti ini:

    1. 2. 3.

    Sekarang coba anda login dan jika benar, maka admin bar akan muncul di blog anda hehehe Dan nanti kalau

    ada plugin lain yang membutuhkan fungsi ini untuk meletakkan beberapa kode di footer, maka dia bisa

    meletakannya dengan mudah.

    Themes ini secara prinsip sudah siap. Tentunya anda bisa memodifikasinya sesuka hati sehingga sesuai denganselera anda. Anda bisa menghiasinya dengan background yang menarik atau header yang keren untuk

    membuat themes ini makin cakep.

    Dan dengan berakhirnya panduan membuat footer ini maka seri panduan dasar membangun theme

    WordPress sudah selesai. Insya Allah berikutnya akan saya berikan beberapa tips dan trik untuk meningkatkan

    performa themes ini sehingga makin maknyuss

    Makanya subscribe dong menggunakan form di sebelah kanan tuh. Biar makin semangat sharingnya. Kalau

    sepi kan kayak sharing sama hantu.. hehehe

    Membuat Custom Menu Navigasi

    Mulai artikel ini hingga artikel mendatang, saya akan sharing beberapa tips untuk membuat theme kita lebih

    canggih hehehe Pertama, saya akan sharing bagaimana cara memasang custom menu di themes sederhana

    yang sudah kita buat sebulan terakhir kemarin. Walaupun canggih, tapi caranya mudah banget lho.. xixixi

  • 7/31/2019 Bikin Theme WP

    26/28

    Pertama, kita deklarasikan dulu custom menunya di functions.php (masih ingat kan?) cukup tambahkan 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. Sedangkan themegue 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.

  • 7/31/2019 Bikin Theme WP

    27/28

    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 defaultheader blog nanti.

    define( 'HEADER_IMAGE_WIDTH', 900 ); : menentukan ukuran lebar header

    define( 'HEADER_IMAGE_HEIGHT',120 ); : menentukan ukuran tinggi header

    define( 'HEADER_TEXTCOLOR', '000000' ); : menentukan warna teks di header

    Kemudian diikuti oleh kode untuk deklarasi bahwa theme kita menyediakan fasilitas ganti header.

    add_custom_image_header( '', 'themegue_header_style' );

    Dan terakhir adalah kode yang kita gunakan untuk memasang style di halaman admin nanti saat user

    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

  • 7/31/2019 Bikin Theme WP

    28/28

    1. 2. #header {3. background : url();4. }5. .blogtitle a, .description {6. color: 7. }8.

    Anda perhatikan kode adalah kode untuk memanggil gambar header yang dipasang

    oleh user.

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