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 :

1. WordPress Theme yang terinstal dan dapat berjalan secara lokal di komputer anda.
2. Editor untuk mengedit source code
3. 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.

1. Untuk melakukan ini, download XAMPP, software yang akan membuat PC anda mampu
bekerja sebagai server ( download yang installer ) disini lalu install pada PC anda
2. 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 :

1. 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.
2. 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

NEXT.

Tutorial Cara Membuat Theme WordPress

Sendiri ( Langkah #1 : Memahami struktur
File Theme WordPress )
oleh Fikri
Lanjutan dari seri Tutorial Cara Membuat Theme Sendiri. Sebelum anda membaca post ini,
pastikan anda sudah membaca Pendahuluan dan Tools yang di perlukan.

Ok, berlanjut dari pendahuluan, sekarang kita berlanjut ke pemahaman dasar mengenai Theme
WordPress.

Bagaimana theme wordpress bekerja? Mengapa bisa

dengan mudahnya kita mengganti tampilan blog wordpress
hanya dengan cukup klik pada Design > themes ?
WordPress adalah CMS ( Content Management System ) yang disusun menggunakan bahasa
pemrogmaran PHP. Asumsi saya, anda sudah melakukan Tutorial #0, maka sekarang coba anda
masuk ke direktori wordpress pada komputer lokal anda, dan buka file index.php

index.php merupakan file yang dibuka ketika browser menunjuk satu direktori tanpa menuliskan
alamat file. contoh : menuliskan alamat http://localhost/example pada browser berarti membuka
file index ( jika memang ada ) pada direktori tersebut : http://localhost/example/index.php

ketika anda mengakses suatu alamat blog berengine wordpress, yang dilakukan blog tersebut (
File index.php utama ) adalah mengecek Theme yang tengah digunakan oleh blog tersebut, lalu
menampilkan konten blog dari database menggunakan kerangka dan desain yang theme yang
tengah digunakan tersebut.

maka dari itu, kita dapat berganti theme dengan mudah di wordpress. ganti theme yang aktif =
kerangka dan desain yang digunakan berubah = tampilan blog berubah.

Sekarang, Theme WordPress itu apa? Terdiri dari apa saja?

WordPress Theme standar, terdiri dari tiga jenis file :

satu file .png yang akan menampilkan screenshot theme pada Design > Themes
file .css yang akan mendefinisikan desain dan memberi tampilan kerangka file php
tersebut
file .php yang menggunakan nama file tertentu yang menjadi standar file theme
wordpress yang akan menjadi kerangka tampilan blog, dan file

Nama file utama pada struktur theme WordPress perlu mengikuti standar yang ada. Jadi nama
file yang ada harus mengikuti aturan yang telah ditetapkan wordpress agar dapat terbaca dan
digunakan oleh sistem wordpress. Adapun nama nama file tersebut adalah ( Hanya file file
utama yang penting dan digunakan pada umumnya ) :

screenshot.png : File image berukuran ( umumnya ) 300 X 225 pixel. untuk

menampilkan screenshot pada Dashboard WordPress anda di Design > Themes
style.css : file css yang berfungsi untuk mendefinisikan tampilan kerangka file php.
File css ini juga bertugas menyimpan informasi mengenai theme seperti nama theme,
kode versi, alamat pembuat theme, pembuat theme, deskripsi theme, dll menggunakan
tag yang telah distandarkan oleh wordpress
index.php : file utama sebuah theme. file untuk mendefinisikan tampilan blog secara
umum, yang berguna sebagai alternatif terakhir. penjelasan lengkap ada dibawah.
home.php : file ini mendefinisikan tampilan utama blog ( tampilan home )
page.php : file ini mendefiniskan apa saja yang akan ditampilkan pada halaman page.
page adalah halaman statis dari blog wordpress. contoh, pada bloggingly.com, halaman
pagenya adalah About Bloggingly. ( Ditampilkan di menu diatas )
single.php : file ini mendefinisikan apa saja yang akan ditampilkan pada halaman post.
halaman post adalah halaman yang menampilkan post anda secara full, lengkap dengan
bagian commentnya. contoh halaman post adalah halaman yang tengah anda baca ini
comment.php : file yang mendefinisikan kerangka bagian komentar dan form untuk
mengirimkan komentar
search.php : file yang mendefinisikan apa saja yang akan ditampilkan pada halaman
hasil pencarian
archive.php : file yang mendefinisikan apa saja yang harus ditampilkan pada halaman
category, tag dan archive
404.php : file yang mendefinisikan apa saja yang akan ditampilkan pada halaman yang
tidak eksis / error page
function.php : file yang digunakan untuk mendefinisikan fungsi wordpress tertentu.
header.php : file untuk mendefinisikan data data pada header, lalu digunakan secara
bersama oleh tiap file. gunanya? agar header tiap file dipastikan seragam.
footer.php : file untuk mendefinisikan nilai footer. sama seperti header.

Sistem theme wordpress memiliki hirarki tertentu. misalnya, jika file page.php tidak ada pada
theme, secara otomatis wordpress akan menggunakan file index.php untuk mendefinisikan
tampilan halaman page. ini Hirarki lengkapnya ( sumber dari codex.wordpress.org ) :
Maka dari itu, sebenarnya theme tetap dapat berjalan meskipun hanya berisi file index.php dan
style.css saja.

Sebernarnya masih ada file file lain untuk mendefiniskan halaman yang lain agar tampilan
semakin customize. namun karena jarang digunakan, akan kita bahas pada versi advancenya.
Setelah serial Tutorial Cara Membuat Theme WordPress Sendiri beres.

Ok, langkah Memahami Struktur File Theme WordPress 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.
untuk pemahaman lengkap mengenai struktur file theme wordprss, anda dapat mengunjungi
codex wordpress mengenai hirarki template .

Selanjutnya, Langkah #2 : Memahami Tag tag XHTML & Kegunaannya, dan aturan
penulisannya

NEXT
Tutorial Cara Membuat Theme WordPress
Sendiri ( Langkah #2 : Memahami Tag tag
XHTML & Kegunaannya, dan aturan
penulisannya )
oleh Fikri

Lanjutan dari seri Tutorial Cara Membuat Theme WordPress Sendiri. Untuk memastikan tidak
ada miskonsepsi, kami rekomendasikan anda membaca seri post ini dari awal :

1. Langkah #0 : Pendahuluan, serta tools tools yang dibutuhkan

2. Langkah #1 : Memahami Struktur File Theme WordPress

Sekarang, berlanjut ke Langkah #2 : Memahami Aturan, Penulisan, & Kegunaan Tag XHTML.

Untuk apa kita memahami aturan, penulisan dan kegunaan

tag XHTML? bukankah file theme ditulis dalam .php?
Well, seperti yang telah kami bahas pada Langkah #1 bahwa File Theme WordPress memang
ditulis dalam file php. Namun ada informasi yang perlu ditambahkan :

Bahasa php yang digunakan dalam file tersebut berfungsi untuk memuat konten blog dari
database ke dalam tampilan blog, yang mana memiliki kerangka yang terbuat dari tag
XHTML yang akan didefinisikan desainnya oleh file css.
Sekarang begini saja : baca saja dulu, telan bulat bulat karena prakteknya sendiri akan
dimulai pada post langkah #3. kalau ada yang kurang jelas, silahkan sampaikan melalui form
komentar, ok?

Memahami Tagi Tag XHTML & Kegunaannya

DISCLAIMER : kami tidak akan menuliskan keseluruhan tag XHTML pada halaman ini. untuk
lengkapnya anda bisa lihat halaman W3C school mengenai daftar lengkap tag xhtml, dan
halaman wikipedia untuk penjelasan lengkap elemen html. Yang kami tulis hanya sebagian saja,
yang sering digunakan dalam pembuatan theme wordpress.

Tag pembangun halaman :

<html> </html>
tag yang wajib dimiliki sebuah halaman web. hanya informasi yang tersimpan diantara tag
tersebut yang dibaca oleh browser.

<head> </head>
informasi & tag yang ditulis diantara tag ini tidak akan ditampilkan di halaman browser. Yang
ditaruh diantara tag ini adalah deklarasi file html, tag metadata halaman web, link ke file css dan
javascript, dan script2 javascript atau css yang ditulis secara internal

<body></body>
Informasi yang ditulis diantara tag ini akan ditampilkan pada browser.

tiga tag ini merupakan tiga tag dasar dari sebuah halaman web. Dengan menggunakan tiga tag
dasar ini saja anda sudah bisa membuat sebuah halaman web sebenarnya. Untuk memahami
maksudnya, buka aplikasi notepad++ anda, lalu copy paste script ini :

1 <html>
2 <head>
3 </head>
4 <body>
5 test tiga tag dasar
6 </body>
7 </html>

lalu save dengan nama file tigatag.html . sudah di save? buka file tersebut menggunakan browser
anda.

Tag tag pada bagian head :

<title></title>
tag title page. informasi yang ditulis diantara tag ini akan menjadi identitas halaman web, dan
muncul pada top bar aplikasi browser
<link rel=" type=" href=">

tag rel. untuk menghubungkan halaman web dengan file yang memberikan fungsi / definisi pada
halaman tersebut

Tag dasar konten web :

1 <h1> This is heading </h1>

2 <h2> This is heading </h2>
3 <h3> This is heading </h3>

ini disebut tag heading. fungsinya untuk mengatur besar kecil ukuran teks yang ditulis diantara
tag tersebut. tag <h1> merupakan ukuran terbesar. semakin besar nomernya, semakin kecil
ukurannya.

<p> </p>
tag paragraf. informasi yang di tulis diantaranya dianggap satu paragraf

<br />
tag break, atau fungsi enter pada editor : untuk membuat tulisan turun ke baris selanjutnya. Jika
pada tag tag lain mengal adanya starting tag dan closing tag, jadi informasi diapit diantara tag,
maka tag break merupakan pengecualian. cukup letakkan tag break diantara tag paragraf, dan
informasi yang ditulis setelah tag break akan turun ke baris selanjutnya.

<i></i>
tag italic. Informasi yang ditulis diantara tag ini akan tampak miring

<b></b>
tag boldface. informasi yang ditulis diantara tag ini akan tampak tebal

<blockquote></blockquote>
tag untuk quotation. membuat informasi yang ditulis diantara tag ini memiliki karakter yang
berbeda dari yang ditulis diantara tag paragraf, diberi style quotation

<a href="></a>
tag link. informasi yang diletakkan diantara tag ini akan menjadi link yang mengarah pada
halaman web lain.

contoh :
<a href=http://fikrirasyid.com/about/>about fikri</a>
akan tampil pada browser menjadi :
about fikri
<img src=">
tag untuk memanggil image.

Tag list / daftar : list ini akan sering anda jumpai dalam sidebar dan membuat
menu bar

<li></li>
tag list item. untuk isi dari list yang ada, sebagai item dari tag ordered list dan unordered list.
pemahaman lengkapnya ada dibawah

<ul></ul>
tag unordered list ( daftar tidak berurut ). Sederhananya : Untuk membuat daftar dengan bullet
style. agak sulit dijelaskan, lihat contoh ini :
Penulisan script :

1 <<ul>
2 <li>list satu</li>
3 <li>list dua</li>
4 </ul>

pada browser akan tampak seperti ini :

list satu
list dua

<ol></ol>
tag ordered list ( daftar berurut ). Sederhananya L Untuk membuat daftar berurut menggunakan
angka. Lihat contoh ini :
Penulisan script :

1 <ol>
2 <li>list satu</li>
3 <li>list dua</li>
4 </ol>

pada browser akan tampak seperti ini :

1. list satu
2. list dua

Tag Div :

<div><div>
tag div merupakan tag vital dalam design web menggunakan CSS. tag ini berfungsi untuk
mendefinisikan wilayah tertentu dalam halaman web. tag div ini nantinya akan diberikan nilai
menggunakan atribut id ( untuk nilai yang hanya keluar sekali ) atau class ( untuk nilai yang
keluar berkali kali ).

contoh :

<div id=header>
Just another Weblog
</div>

tag div ini memiliki atribut id dan nilai header. nilai header ini nanti akan didefinisikan pada file
css, berapa lebarnya, berapa tingginya, apa warna backgroundnya, dll. Lebih dalam mengenai
bagian ini akan dibahas di langkah selanjutnya

Aturan Penulisan Tag

Ada beberapa aturan yang harus anda pastikan agar theme anda memenuhi standar web :

1. tulis semua tag dalam huruf kecil. tulis <div> bukan <DIV> ok?
2. tutup tag secara tepat. Menutup tag dengan tepat : tutup terlebih dahulu tag terakhir yang
terbuka. Contoh :

Tepat:

<ul>
<li>list one</li>
</ul>

Tidak Tepat :

<ul>
<li>list one</ul>
</li>

ingat : tutup dahulu yang tag terakhir yang terbuka. Ok?

Yup, cukup untuk pembahasan post ini. Yang kami bahas pada post kali ini memang tag tag
dasar saja yang akan banyak digunakan pada pembangunan wordpress theme.

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.
untuk pemahaman lanjutan mengenai Tag HTML, anda bisa kunjungi W3C atau Wikipedia.

Selanjutnya, Langkah #3 :Membuat File Dasar Theme WordPress : index.php & style.css

NEXT..

Tutorial Cara Membuat Theme WordPress

Sendiri ( Langkah #3 : Membuat File Dasar
Theme WordPress : index.php & style.css)
oleh Fikri

Lanjutan dari seri Tutorial Cara Membuat Theme WordPress Sendiri. Untuk memastikan tidak
ada miskonsepsi, kami rekomendasikan anda membaca seri post ini dari awal :

Langkah #0 : Pendahuluan, serta tools tools yang dibutuhkan

Langkah #1 : Memahami Struktur File Theme WordPress
Langkah #2 : Memahami Tag tag XHTML & Kegunaannya, dan aturan penulisannya
Ok. untuk materi persiapannya kami kira cukup dengan 3 post diatas. sekarang kita masuk ke
langkah langkah membuat theme. Pada post kali ini kita akan membuat file dasar Theme
WordPress : index.php & style.css.

Perlu anda ketahui, tidak ada aturan baku langkah per langkah membuat theme wordpress.
Selama theme tersebut bekerja, lakukan. jadi langkah yang kami buat disini adalah langkah
versi kami, berdasarkan apa yang sudah kami lakukan

Sekarang, seperti yang sudah kami katakan pada langkah #0 : anda membutuhkan Engine
WordPress yang terinstall pada komputer lokal anda. sekarang, nyalakan XAMPP Control Panel,
nyalakan server apache dan Database Mysql.

Buat direktori dengan nama latihantheme pada direktori themes wp-content anda. Jika anda
menginstall sesuai petunjuk kami pada partisi C, lokasinya direktorinya berarti ada di :
C:\xampp\wordpress\wp-content\themes\ . buat direktori latihantheme disini

lalu buka wordpress lokal anda : Buka browser anda, jika anda mengikuti panduan instalasi
wordpress pada halaman lokal ini, maka ketik url address ini : http://localhost/wordpress/

Lalu, buka aplikasi Notepad++ anda.

Membuat File style.css

Ketik / Copy Paste script ini pada notepadd ++ anda :

01 /*
02
03 Theme Name: Theme Latihan
04 Theme URL: http://www.bloggingly.com
05 Description: Theme untuk latihan
06 Version: 0.1
07 Author: Nama Saya
08 Author URL: http://namabloganda.com
09 Tags: red, fixed width, two columns, widget ready
10
11 Theme ini di desain oleh <a href="http://namabloganda.com">Nama Anda</a>
12
13 */

Save dengan nama style.css di direktori latihantheme ( C:\xampp\wordpress\wp-

content\themes\latihantheme )

Membuat File index.php

Buka file baru pada notepad ++ anda.
Ketik / Copy Paste script ini pada notepadd ++ anda :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

1
"http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 </head>
5
6 <body>
7 </body>
8 </html>

Save dengan nama index.php di direktori latihantheme ( C:\xampp\wordpress\wp-

content\themes\latihantheme )

Memahami apa yang baru saja kita lakukan :

Sekarang masuk ke dashboard wordpress lokal anda. masuk ke bagian Design > Themes, Anda
akan mendapati ada kolom baru untuk Theme Latihan :

Data yang anda ketik setelah Theme Name : menjadi nama theme anda
Data yang anda ketik setelah Theme URL : menjadi link nama theme anda
Data yang anda ketik setelah Description : muncul menjadi deskripsi theme anda
Data yang anda ketik setelah Tags : muncul menjadi tag untuk theme anda
Version. Author, Autor URL dan data Theme ini di desain oleh <a
href=http://namabloganda.com>Nama Anda</a> tidak muncul di dashboard admin
anda, namun anda tetap harus menuliskannya, karena data ini akan berguna ketika anda
mensubmit theme ke direktori theme wordpress, atau ketika desain orang ingin melihat
siapa pembuat theme melalui file style.css ini.

Yup, cukup untuk pembahasan post ini. Yang kami bahas pada post kali ini memang hanya
pembuatan file dasar theme wordpress saja : index.php dan style.css

NEXT
Tutorial Cara Membuat Theme WordPress
Sendiri ( Langkah #4 : Memuat Konten Blog
Ke Dalam Theme)
oleh Fikri

Lanjutan dari seri Tutorial Cara Membuat Theme WordPress Sendiri. Untuk memastikan tidak
ada miskonsepsi, kami rekomendasikan anda membaca seri post ini dari awal :

Langkah #0 : Pendahuluan, serta tools tools yang dibutuhkan

Langkah #1 : Memahami Struktur File Theme WordPress
Langkah #2 : Memahami Tag tag XHTML & Kegunaannya, dan aturan penulisannya
Langkah #3 : Membuat File Dasar Theme WordPress : index.php & style.css

Ok. Seperti pada post sebelumnya, awali dengan nyalakan XAMPP Control Panel, hidupkan
Apache Server & Database MySQLnya, lalu buka aplikasi browser dan buka halaman dashboard
administrator wordpress lokal anda ( http://localhost/wordpress/wp-admin ).

Pada post kali ini, kita akan memuat konten blog kepada Theme WordPress yang telah kita
buat kemarin. Tepatnya, memasukkan konten blog ke halaman utama blog ( index.php ) yang
filenya telah kita buat kemarin. Maka dari itu, coba perhatikan struktur halaman utama sebuah
blog wordpress pada umumnya :
Elemen halaman utama blog wordpress

Dari contoh sebuah halaman utama blog wordpress ini, bisa kita simpulkan elemen elemen
yang membangun sebuah halaman blog wordpress :

Header / Nama Blog

Tagline Blog
Menu ( Memberikan link ke page / halaman statis )
Post & Metadata Post( Terdiri dari judul post, potongan/keseluruhan post, link read more,
link komentar, link tags, dan link category )
Link untuk membaca entri sebelumnya ( Previous page )
Sidebar

Pada Post pendahuluan saya sudah menjelaskan mengenai rumus sederhana membuat wordpress
theme :

WordPress Theme = XHTML + tag-tag PHP untuk memanggil fungsi & konten WordPress +
CSS + Javascript ( untuk efek2 tertentu )
Pada Langkah #2 kita sudah mempelajari sedikit mengenai tag tag XHTML. pada post kali ini,
yang akan kita pelajari adalah bagian tag tag PHP untuk memanggil fungsi & konten
wordpress. Kita akan bahas satu persatu tag yang akan kita gunakan untuk memanggil elemen
elemen halaman utama blog wordpress.

Sekarang, buka file index.php pada folder latihantheme : kita mendapati satu file php yang
masih kosong. Untuk pendahuluan, ketik / copy paste script ini diantara <head> dan </head> :

01 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

02 <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
03
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;
04
charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
05
<!-- leave this for stats please -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
06
type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php
07
bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php
08
bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3"
09
href="<?php bloginfo('atom_url'); ?>" />
10 <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
11 <?php wp_get_archives('type=monthly&format=link'); ?>
12 <?php //comments_popup_script(); // off by default ?>
13 <?php wp_head(); ?>

Ok, script apa ini?

script yang anda baru copy paste kan adalah tag php untuk memanggil informasi pada <head>.
Kita sudah bahas pada langkah #2 bagian Tag Pembangun Halaman bahwa informasi yang
ditulis diantara tag <head> dan </head> adalah informasi mengenai halaman web yang tidak
ditampilkan pada browser. Informasi ini dimuat untuk kepentingan teknis, seperti SEO. Yup, hal
yang teknis dan sudah strict. maka dari itu copy dan paste saja.

Header / Nama Blog

Header / Nama Blog dipanggil menggunakan tag sederhana ini :

<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name');

1
?></a></h1>

Ketik / Copy paste kan ke file index.php, diantara tag <body> dan </body>
Tagline Blog
Tagline Blog dipanggil menggunakan tag sederhana ini :

1 <?php bloginfo('description'); ?>

Ketik / Copy paste kan ke file index.php, diantara tag <body> dan </body>, setelah tag
pemanggil nama blog

Menu ( Memberikan link ke page / halaman statis )

Menu untuk link ke halaman statis dipanggil menggunakan tag ini :

1 <ul>
2 <li class="first"><a href="<?php echo get_option('home'); ?>/">Home</a></li>
3 <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
4 </ul>

Ok, yang ini agak sedikit tricky. kita bahas yang satu ini.

pertanyaan pertama yang keluar adalah : mengapa menggunakan tag unordered list +
list item? jadi list dengan bullet style dong? well, pertama kali mempelajari hal ini di
blog Kang Didats, saya juga memiliki pertanyaan serupa. Jawabannya : Pada design
menggunakan CSS, memang begini gayanya. nantinya, si menu akan dibuat memanjang
secara horizintal, di styling menggunakan CSS
selanjutnya, penjelasan list item pertama : <?php echo get_option(home); ?>/ adalah
tag untuk memanggil halaman home blog wordpress, maka dari itu ditaruh sebagai nilai
dari atribur href yang melink ke home
penjelasan list item kedua : <?php
wp_list_pages(sort_column=menu_order&depth=1&title_li=);?> merupakan tag
untuk memanggil link ke page, dan menyusunnya sebagai list item.

Post & Metadata Post ( Terdiri dari judul post,

potongan/keseluruhan post, link read more, link komentar,
link tags, dan link category )
Waw, yang ini Lebih tricky lagi. bagian post ini menggunakan fungsi loop pada php. yang
dimaksud dengan loop disini adalah pengulangan. Coba anda perhatikan, ada berapa post &
metadata yang muncul pada halaman utama blog wordpress? jumlah pengulangan tergantung
pada setting di bagian setting > reading. Namun intinya, bagian ini menggunakan fungsi loop,
dengan parameter jumlah pengulangan yang di setting pada Setting > Reading.

ini tag yang dibutuhkan untuk memuat Post & Metadata post pada theme :
01 <?php if(have_posts()):?>
02 <?php while(have_posts()):the_post(); ?>
03 <div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php
04
the_title(); ?></a></h2>
05
<?php _e('Category :'); ?> <?php the_category(', ') ?> <?php _e('| ');?>
<?php the_tags(); ?> <?php _e('| ');?> <?php the_time('M') ?> <?php
06
the_time('d') ?>, <?php the_time('Y'); ?> <?php _e('by'); ?> <?php
the_author(); ?>
<?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?>
07
<?php edit_post_link('Edit', ' &#124; ', ''); ?>
08
09 <?php the_content(); ?>
10
11 </div>
12 <?php endwhile; ?>
13 <div class="navigation">
14 <?php posts_nav_link(); ?>
15 </div>
16 <?php else: ?>
17 <div class="post">
18 <h2><?php _e("The page you've requested does not exist.
19 Suggestions:
20 <ul>
21 <li>Check the spelling of the address you typed</li>
22 <li>If you are still having problems, please contact us</li>
23 </ul>"); ?></h2>
24 </div>
25 <?php endif; ?>

Penjelasan :

<?php if(have_posts()):?> mengecek, jika terdapat post pada database, maka lakukan
perintah dibawah hingga tag <?php else: ?>
<?php while(have_posts()):the_post(); ?> = ulangi ( loop ) konten sejumlah parameter
pada setting > reading
<div class=post id=post-<?php the_ID(); ?>> = mengelompokkan post dalam div
khusus
<h2><a href=<?php the_permalink(); ?> title=<?php the_title(); ?>><?php
the_title(); ?></a></h2> = memuat judul post dan link, dalam ukuran header 2
<?php the_content(); ?> = memuat konten post
<?php _e(); ?> = Memuat tulisan yang berada dalam
<?php the_category(, ) ?> = Memuat category yang dimiliki post
 <?php the_tags(); ?> = memuat Tag yang dimiliki post
<?php the_time(M) ?> = Memuat data waktu ( bulan ) post di publikasi
<?php the_time(d) ?> = Memuat data waktu ( tanggal) post di publikasi
<?php the_time(Y); ?> = Memuat data waktu ( tahun ) post di publikasi
<?php the_author(); ?> = Memuat data penulis post
<?php comments_popup_link(No Comments, 1 Comment, % Comments); ?> =
Memuat jumlah komentar yang dimiliki post
<?php edit_post_link(Edit, &#124; , ); ?> = Memuat link edit pada post, jika
pengakses halaman blog merupakan author dari post
<?php endwhile; ?> = Mengakhiri pengulangan ( loop ) yang dilakukan <?php
while(have_posts()):the_post(); ?>
<?php posts_nav_link(); ?> = Memuat link Next Page atau Previous Page
<?php else: ?> = Mengakhiri perintah yang dilakukan <?php if(have_posts()):?> .
Artinya, jika tidak ditemukan post pada database, kalukan perintah yang tertulis setelah
<?php else: ?> hingga <?php endif; ?>
<?php endif; ?> = mengakhiri semua perintah yang ada di bagian <?php
if(have_posts()):?>

Well, a litle bit tricky kan?

Sidebar
yang ini lebih tricky lagi. perhatikan bagian ini baik baik : Untuk mengelola sidebar, tim
developer wordpress telah mengembangkan sistem widget, sistem yang memungkinkan anda
menambah atau mengurangi konten sidebar hanya dengan drag and drop pada bagian Design >
Widget. kami membahasakan ini dengan istilah widget ready.

nah, untuk memfungsikan fungsi widget ini, diperlukan file khusus bernama function.php. maka
dari itu, buat file baru ( Ctr + N ) pada aplikasi notepad ++ anda, lalu ketik / copy paste script ini
:

1 <?
2 if ( function_exists('register_sidebar') )
3 register_sidebars(1);
4 ?>

Save pada direktori latihantheme dengan nama file function.php

sekarang, coba perhatikan : register_sidebars(1); . angka 1 disini berarti sistem wordpress akan
membuat satu sidebar. Jika anda hendak membuat lebih dari satu sidebar, ganti saja jumlah
dalam tanda kurungnya. untuk tutorial ini, kita hanya akan menggunakan satu sidebar saja. jadi
tidak usah diganti dulu.

Sekarang, tag untuk memuat sidebar pada theme. Ketik / Copy Paste tag berikut pada file
index.php, setelah tag <?php endif; ?> :
1 <?php dynamic_sidebar(1);?>

perhatikan : ada angka 1 disana. jika anda meregister sidebar lebih dari satu, maka anda perlu
membuat beberapa tag seperti ini, dengan inisial angka berbeda. Namun pada tutorial ini, kita
bermain denga satu sidebar saja dulu, jadi tidak usah diganti.

Bingung Mengetikkan kodenya secara terpisah? Ini

Summarynya
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
01
"http://www.w3.org/TR/html4/loose.dtd">
02 <html>
03 <head>
04
05 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
06 <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
07
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;
08
charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
09
<!-- leave this for stats please -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
10
type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php
11
bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php
12
bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3"
13
href="<?php bloginfo('atom_url'); ?>" />
14 <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
15 <?php wp_get_archives('type=monthly&format=link'); ?>
16 <?php //comments_popup_script(); // off by default ?>
17 <?php wp_head(); ?>
18
19 </head>
20
21 <body>
22
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name');
23
?></a></h1>
24 <?php bloginfo('description'); ?>
25
26 <ul>
27 <li class="first"><a href="<?php echo get_option('home'); ?>/">Home</a></li>
28 <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
29 </ul>
30
31 <?php if(have_posts()):?>
32 <?php while(have_posts()):the_post(); ?>
33 <div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php
34
the_title(); ?></a></h2>
35
<?php _e('Category :'); ?> <?php the_category(', ') ?> <?php _e('| ');?>
<?php the_tags(); ?> <?php _e('| ');?> <?php the_time('M') ?> <?php
36
the_time('d') ?>, <?php the_time('Y'); ?> <?php _e('by'); ?> <?php
the_author(); ?>
<?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?>
37
<?php edit_post_link('Edit', ' &#124; ', ''); ?>
38
39 <?php the_content(); ?>
40
41 </div>
42 <?php endwhile; ?>
43 <div class="navigation">
44 <?php posts_nav_link(); ?>
45 </div>
46 <?php else: ?>
47 <div class="post">
48 <h2><?php _e("The page you've requested does not exist.
49 Suggestions:
50 <ul>
51 <li>Check the spelling of the address you typed</li>
52 <li>If you are still having problems, please contact us</li>
53 </ul>"); ?></h2>
54 </div>
55 <?php endif; ?>
56
57 <?php dynamic_sidebar(1);?>
58
59 </body>
60 </html>

Ok. sekarang kita memiliki 3 file : index.php yang sudah bisa memuat konten dari blog,
function.php yang berisi fungsi widget, dan style.css. Sekarang, masuk Dashboard > Design >
Theme, lalu activate Theme Latihan ini. Lihat tampilan theme latihan kita.
Yup, cukup untuk pembahasan post ini : Memuat Konten blog pada theme. Pada post selanjutnya
kita akan membahas Styling Theme menggunakan CSS.

NEXT.

Tutorial Cara Membuat Theme WordPress

Sendiri ( Langkah #5 : Mendesain Theme
Menggunakan CSS )
oleh Fikri

Lanjutan dari seri Tutorial Cara Membuat Theme WordPress Sendiri. Untuk memastikan tidak
ada miskonsepsi, kami rekomendasikan anda membaca seri post ini dari awal :

Langkah #0 : Pendahuluan, serta tools tools yang dibutuhkan

Langkah #1 : Memahami Struktur File Theme WordPress
Langkah #2 : Memahami Tag tag XHTML & Kegunaannya, dan aturan penulisannya
Langkah #3 : Membuat File Dasar Theme WordPress : index.php & style.css
Langkah #4 : Memuat Konten Blog Ke Dalam Theme
Ok. Seperti pada post sebelumnya, awali dengan nyalakan XAMPP Control Panel, hidupkan
Apache Server & Database MySQLnya, lalu buka aplikasi browser dan buka halaman dashboard
administrator wordpress lokal anda ( http://localhost/wordpress/wp-admin ).

Kemarin kita memuat konten ke dalam theme, dan theme tersebut sudah kita aktifkan.
Masalahnya adalah, theme tersebut masih berupa halaman html telanjang yang polos hanya
begitu saja.

Sekarang, kita akan me-desain halaman html theme yang polos itu menggunakan CSS. Maka
dari itu, buka file index.php dan style.css theme latihantheme anda menggunakan Notepad ++,
dan akses halaman dummy blog anda menggunakan browser.

Berkaitan dengan isu browser compatibility ( Setiap browser menggunakan cara yang berbeda
dalam menampilkan styling CSS), gunakan browser FireFox untuk melakukan step ini. Internet
Explorer tidak direkomendasikan. IE merupakan mimpi buruk bagi setiap web designer. nanti
kita buat bagian khusus untuk mengatasi IE

Sebelum memulai, baca dulu penjelasan tentang Apa itu CSS di halaman ini.

Dalam mendesain menggunakan css, anda akan sangat familiar dengan tag <div> yang disertai
dengan atribut id atau class.

Apa, untuk apa, dan bagaimana tag <div> itu bekerja?

tag div merupakan tag dalam bahasa html, yang berfungsi untuk mendefinisikan area tertentu.
Sederhananya, menandai area tertentu. Area dalam tag div tersebut lalu diberi nama oleh atribut
class atau id seperti ini : <div id=area> atau <div class=area>, dan lalu area class atau id
bernama area tersebut akan di styling / diberi gaya oleh file CSS.

Penting untuk diperhatikan : seperti tag html lainnya, tag <div> pun perlu ditutup
menggunakan tag penutup : </div>
Sekarang, langsung praktek :

Langkah 5.0 : mendefinisikan style halaman secara

keseluruhan :
pada style.css, ketik / copypaste kode ini :

1 body{
2 margin:0px;
3 font-family: Verdana,Arial,Helvetica,sans-serif;
4 color: #333333;
5 font-size:11.4px;
6 line-height:1.58em;
7 vertical-align: baseline;
8 background:#D0BFA5;
9}

Penjelasan :

body{} : mendefinisikan tag <body>. jika menuliskan sesuatu tanpa karakter # atau .,
berarti kita mendefinisikan tag yang kita tulis. body{} berarti mendefinisikan tag <body>
hingga </body>
font-family : mendefinisikan font apa yang digunakan untuk teks yang berada dalam area
body tersebut. fon-family ini ditulis secara hierarkis. maknanya, jika Verdana tidak ada
pada komputer pengakses web, digunakan lah font Arial.
color : mendefinisikan warna apa yang akan digunakan untuk font pada area tersebut.
definisi warna menggunakan kode heksa.
font-size: mendefinisikan ukuran font pada area yang didefinisikan.
line-height: mendefinisikan jarak antar baris pada font di area yang didefinisikan
vertical-align : mendefinisikan align vertical font pada area yang didefinsikan

Langkah 5.1 : div global untuk mendefinisikan seluruh

konten theme dan membuatnya berada di tengah halaman
pada index.php :

persis setelah tag <body>, ketik / copypaste tag ini : <div id=kontainer>
persis sebelum tag <body>, ketik / copypaste tag ini : </div>

ketik / copypaste script ini pada style.css :

1 #kontainer{
2 width:780px;
3 margin:0 auto 0 auto;
4}

Penjelasan :

#kontainer pada style.css : # menunjukan id, dan kontainer menunjukan nama id yang
didefinisikan
width : mendefinisikan lebar dari id. width:780px; berarti width dari id tersebut 780
piksel
px disini artinya piksel. wajib ditulis setelah nilai atribut yang sifatnya jarak. kalau tidak
ditulis, tidak akan bekerja.margin : atribut css untuk mendefinisikan jarak antara div yang
satu ke div yang lainnya.
margin:jarakluaratas jarakluarkanan jarakluarbawah jarakluarkiri; ( searah jarum jam )
NOTE : perhatikan cara penulisan css. setelah atribut dan nilai dituilis, selalu ikuti dengan ;.
width:100%;

Langkah 5.2 : div global untuk mem-float halaman.

pada index.php :

persis setelah tag <div id=kontainer>, ketik / copypaste tag ini : <div id=dalamkontainer>
persis sebelum tag </div>, ketik / copypaste tag ini : </div>

pada style.css :
ketik / copypaste script ini :

1 #dalamkontainer{
2 float:left;
3 padding:10px;
4 width:760px;
5 background:#fff;
6}

Penjelasan :

Float memiliki fungsi vital dalam web design menggunakan CSS. Fungsinya adalah
untuk memampatkan dan meratakan area. Area yang dimampatkan ini memiliki nilai
height dan width secara otomatis, dan hal ini lah yang membuat design web dengan css
fleksibel.

Bingung? ya sudah, ikut saja dulu. Nanti juga paham seiring dengan pengalaman kok

float: atribut css untuk memampatkan dan meratakan area. float:left; berarti di float
ke kiri
padding : atribut css untuk mendefinisikan jarak antara div ke dalam kontennya.
padding:jarakdalamatas jarakdalamkanan jarakdalambawah jarakdalamkiri; ( searah
jarum jam )
background : mendefinisikan latar belakang. kalau untuk memanggil warna,
menggunakan kode heksa. kode heksa adalah kode enam digit yang diawali dengan
karakter # untuk mendefinisikan warna pada browser

NOTE :
kalau ditulis hanya sekali saja, seperti : padding:10px; , berarti padding atas-kanan-bawah-kiri
semuanya sama, 10px
px disini artinya piksel. wajib ditulis setelah nilai atribut yang sifatnya jarak. kalau tidak ditulis,
tidak akan bekerja.
Langkah 5.3 : Mendefinisikan & Memberi Desain untuk
Area Header

pada index.php :

persis SEBELUM tag <h1><a href=<?php echo get_option(home); ?>/><?php

bloginfo(name); ?></a></h1>, ketik / copypaste tag ini : <div id=kepala>
persis SETELAH tag <?php bloginfo(description); ?>, ketik / copypaste tag ini : </div>

pada style.css :
ketik / copypaste script ini :

1 #kepala{
2 float:left;
3 width:740px;
4 padding:10px;
5 background:#7F663F;
6 color:#fff;
7}

Langkah 5.4 : Mendefinisikan & Memberi desain untuk top

menu.
nah, yang ini agak tricky. Seperti yang sudah dibahas kemarin, kok membuat menu horisontal
menggunakan tag <ul> dan <li> sih? jadi list bullet style yang vertikal itu dong?. Well,
mari lihat yang satu ini :

pada index.php :

persis SEBELUM tag <ul><li class=first><a href=<?php echo get_option(home);

?>/>Home</a></li>, ketik / copypaste tag ini : <div id=menuatas>
persis SETELAH tag <?php
wp_list_pages(sort_column=menu_order&depth=1&title_li=);?></ul>, ketik / copypaste tag ini
: </div>

pada style.css :
ketik / copypaste script ini :

01 #menuatas{
02 width:780px;
03 float:left;
04 color:#fff;
05 background:#5F3C00;
06 }
07
08 #menuatas ul{
09 list-style:none;
10 margin:0;
11 padding:0;
12 }

Penjelasan :

script ini mendefinisikan area unordered lis <ul> yang berada di #menuatas.
list-style:none berarti meniadakan icon list.

1 #menuatas ul li{
2 float:left;
3 display:inline;
4 padding:5px 10px 5px 10px;
5 margin:0;
6 border-right:1px solid #e2e2e2;
7}

Penjelasan :

script ini mendefinisikan SETIAP ITEM LIST <li> yang berada di area unordered list
<ul> #menuatas
float:left; meratakan item <li> kesamping dan memampatkannya, sehingga list item
secara otomatis memiliki definisi height memiliki nilainya sesuai dengan parameter yang
lain.
display:inline; mendefinisikan list item agar BERJEJER KESAMPING, bukan kebawah
seperti definisi defaultnya ( display:inline secara bahasa artinya tunjukan dalam satu
garis. hehe ).
border-right : garis di samping kanan pada area yang diberi definisi

Langkah 5.5 : Mendefinisikan area body

Pada index.php :

persis SEBELUM tag <?php if(have_posts()):?>, ketik / copypaste tag ini : <div id=badan>
persis SETELAH tag <?php endif; ?>, ketik / copypaste tag ini : </div>

Pada style.css :
ketik / copypaste script ini :
1 #badan{
2 float:left;
3 width:500px;
4}

Langkah 5.6. mendefinisikan area sidebar

Pada index.php :

persis SEBELUM tag <?php dynamic_sidebar(1);?>, ketik / copypaste tag ini : <div
id=barsisi>
persis SETELAH tag <?php dynamic_sidebar(1);?>, ketik / copypaste tag ini : </div>

Pada style.css :

ketik / copypaste script ini :

1 #barsisi{
2 float:left;
3 width:240px;
4 padding:10px;
5 margin:10px 0 0 0;
6 background:#efefef;
7}

Langkah 5.7 : merapihkan sidebar.

Sidebar disusun atas tag <ul> dan <li>. dampaknya? item sidebar jadi ada bullet listnya dan
margin paddingnya menggunakan margin-padding default tag <ul> dan <li>. sekarang akan
kita rapihkan.

Pada style.css :
ketik / copypaste script ini :

01 #barsisi li{
02 list-style:none;
03 }
04
05 #barsisi li ul{
06 padding:0px;
07 list-style:asterix;
08 }
09
10 #barsisi li ul li {
11 margin:0 0 0 15px;
12 }

Penjelasan :

setiap tag, termasuk <ul> dan <li> memiliki style dan nilai padding-marginnya sendiri. Itulah
sebabnya terkadang tanpa kita definisikan stylenya, sebuah halaman html memiliki style sendiri.
contoh : link berwarna biru. link yang sudah dikunjungi berwarna ungu.

Langkah 5.8 : styling caption dan image ( untuk versi 2.5

keatas )
Dalam membuat theme, ada beberapa bagian yang dalam pengembangannya sudah ada dan
tinggal gunakan saja, tanpa mengulik lebih jauh. Mengapa melakuykan hal ini? karena ada
beberaa hal mendasar yang termasuk sistem, yang akan sangat panjang jika dijelaskan. Dan
caption & image ini termasuk kedalamnya. Just simply copy and paste. Styling image & caption
ini saya modifikasi dari theme kubrick yang menjadi default theme wordpress.

Ketik / CopyPaste script ini pada style.css :

/* ----------------------------------Begin Images--------------------------
01
-------*/
02 p img {
03 padding: 0;
04 max-width: 100%;
05 }
06
07 img.centered {
08 display: block;
09 margin-left: auto;
10 margin-right: auto;
11 }
12
13 img.alignright {
14 padding: 4px;
15 margin: 0 0 2px 7px;
16 display: inline;
17 }
18
19 img.alignleft {
20 padding: 4px;
21 margin: 0 7px 2px 0;
22 display: inline;
23 }
24
25 .alignright {
26 float: right;
27 }
28
29 .alignleft {
30 float: left
31 }
32 /* End Images */
33
/* -----------------------------------------Captions-----------------------
34
----------*/
35 .aligncenter,
36 div.aligncenter {
37 display: block;
38 margin-left: auto;
39 margin-right: auto;
40 }
41
42 .wp-caption {
43 background-color:#EAE9E9;
44 text-align: center;
45 padding-top: 4px;
46 margin: 10px;
47 -moz-border-radius: 5px;
48 -khtml-border-radius: 5px;
49 -webkit-border-radius: 5px;
50 border-radius: 5px;
51 }
52
53 .wp-caption img {
54 border:0;
55 margin: 0;
56 padding: 0;
57 }
58
59 .wp-caption p.wp-caption-text {
60 font-size: 11px;
61 line-height: 17px;
62 padding: 0 4px 5px;
63 margin: 0;
64 }
65 /* End captions */

Untuk mengganti warna caption, rubah background-color pada .wp-caption

Well, selesai sudah styling area pada file index.php. namun masih ada yang kurang nyaman.

Yup, link link yang ada masih menggunakan tampilan default : link biru dengan dekorasi garis
bawah yang berubah menjadi ungu jika link tersebut telah di buka.

langkah 5.9 : Styling link

pada style.css, ketik / copypaste kode ini :

1 a, a:visited{
2 color:#CF830C;
3 text-decoration:none;
4}
5
6 a:hover{
7 text-decoration:underline;
8}

anda bisa menggunakan atribut yang sama untuk dua area yang berbeda. Caranya,
gunakan koma : a, a:visited{} berarti atribut dan nilai tersebut berlaku untuk a dan
a:visited
a:visited berarti tag link <a href="> yang sudah di kunjungi ( visited )
a:hover berarti tag link <a href="> yang di hover / dilewati oleh kursor

Waw!sebuah post yang cukup panjang. Akhirnya beres sudah styling halaman index.php oleh
style.css. ini screenshot hasilnya :
screenshot hasil latihantheme

Pada post berikutnya akan dijelaskan mengenai pembuatan kerangka halaman yang lain, sesuai
dengan hirarki theme wordpress. Umumnya, kerangka kerangka halaman lain tersebut juga
desainnya didefinisikan oleh style.css. Tapi bisa juga di definisikan oelh css lain jika dibutuhkan.

anyway, ini script index.php dan style.css lengkapnya:

index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
01
"http://www.w3.org/TR/html4/loose.dtd">
02 <html>
03 <head>
04
05 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
06 <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
07
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;
08
charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
09
<!-- leave this for stats please -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
10
type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php
11
bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php
12
bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3"
13
href="<?php bloginfo('atom_url'); ?>" />
14 <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
15 <?php wp_get_archives('type=monthly&format=link'); ?>
16 <?php //comments_popup_script(); // off by default ?>
17 <?php wp_head(); ?>
18
19 </head>
20
21 <body>
22 <div id="kontainer">
23 <div id="dalamkontainer">
24
25 <div id="kepala">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name');
26
?></a></h1>
27 <?php bloginfo('description'); ?>
28 </div>
29
30 <div id="menuatas">
31 <ul>
<li class="first"><a href="<?php echo get_option('home');
32
?>/">Home</a></li>
33 <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
34 </ul>
35 </div>
36
37 <div id="badan">
38 <?php if(have_posts()):?>
39 <?php while(have_posts()):the_post(); ?>
40 <div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php
41
the_title(); ?></a></h2>
42
<?php _e('Category :'); ?> <?php the_category(', ') ?> <?php _e('| ');?>
<?php the_tags(); ?> <?php _e('| ');?> <?php the_time('M') ?> <?php
43
the_time('d') ?>, <?php the_time('Y'); ?> <?php _e('by'); ?> <?php
the_author(); ?>
<?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?>
44
<?php edit_post_link('Edit', ' &#124; ', ''); ?>
45
46 <?php the_content(); ?>
47
48 </div>
49 <?php endwhile; ?>
50 <div class="navigation">
51 <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
52 </div>
53 <?php else: ?>
54 <div class="post">
55 <h2><?php _e("The page you've requested does not exist.
56 Suggestions:
57 <ul>
58 <li>Check the spelling of the address you typed</li>
59 <li>If you are still having problems, please contact us</li>
60 </ul>");
61 ?></h2>
62 </div>
63 <?php endif; ?>
64
65 </div>
66
67 <div id="barsisi">
68 <?php dynamic_sidebar(1);?>
69 </div>
70 </div>
71 </body>
72 </html>

style.css
001 /*
002
003 Theme Name: Theme Latihan
004 Theme URL: http://www.bloggingly.com
005 Description: Theme untuk latihan
006 Version: 0.1
007 Author: Nama Saya
008 Author URL: http://namabloganda.com
009 Tags: red, fixed width, two columns, widget ready
010
011 Theme ini di desain oleh <a href="http://namabloganda.com">Nama Anda</a>
012
013 */
014
015 body{
016 margin:0px;
017 font-family: Verdana,Arial,Helvetica,sans-serif;
018 color: #333;
019 font-size:11.4px;
020 line-height:1.58em;
021 vertical-align: baseline;
022 background:#D0BFA5;
023 }
024
025 #kontainer{
026 width:780px;
027 margin:0 auto 0 auto;
028 }
029
030 #dalamkontainer{
031 float:left;
032 padding:10px;
033 width:760px;
034 background:#fff;
035 }
036
037 #kepala{
038 float:left;
039 width:740px;
040 padding:10px;
041 background:#7F663F;
042 color:#fff;
043 }
044
045 #menuatas{
046 width:760px;
047 float:left;
048 color:#fff;
049 background:#5F3C00;
050 }
051
052 #menuatas ul{
053 list-style:none;
054 margin:0;
055 padding:0;
056 }
057
058 #menuatas ul li{
059 float:left;
060 display:inline;
061 padding:5px 10px 5px 10px;
062 margin:0;
063 border-right:1px solid #e2e2e2;
064 }
065
066 #badan{
067 float:left;
068 width:500px;
069 }
070
071 #barsisi{
072 float:left;
073 width:240px;
074 padding:10px;
075 margin:10px 0 0 0;
076 background:#efefef;
077 }
078
079 #barsisi li{
080 list-style:none;
081 }
082
083 #barsisi li ul{
084 padding:0px;
085 list-style:asterix;
086 }
087
088 #barsisi li ul li {
089 margin:0 0 0 15px;
090 }
091
/* ----------------------------------Begin Images-------------------------
092
--------*/
093 p img {
094 padding: 0;
095 max-width: 100%;
096 }
097
098 img.centered {
099 display: block;
100 margin-left: auto;
101 margin-right: auto;
102 }
103
104 img.alignright {
105 padding: 4px;
106 margin: 0 0 2px 7px;
107 display: inline;
108 }
109
110 img.alignleft {
111 padding: 4px;
112 margin: 0 7px 2px 0;
113 display: inline;
114 }
115
116 .alignright {
117 float: right;
118 }
119
120 .alignleft {
121 float: left
122 }
123 /* End Images */
124
/* -----------------------------------------Captions----------------------
125
-----------*/
126 .aligncenter,
127 div.aligncenter {
128 display: block;
129 margin-left: auto;
130 margin-right: auto;
131 }
132
133 .wp-caption {
134 background-color:#EAE9E9;
135 text-align: center;
136 padding-top: 4px;
137 margin: 10px;
138 -moz-border-radius: 5px;
139 -khtml-border-radius: 5px;
140 -webkit-border-radius: 5px;
141 border-radius: 5px;
142 }
143
144 .wp-caption img {
145 border:0;
146 margin: 0;
147 padding: 0;
148 }
149
150 .wp-caption p.wp-caption-text {
151 font-size: 11px;
152 line-height: 17px;
153 padding: 0 4px 5px;
154 margin: 0;
155 }
156 /* End captions */
157
158 a, a:visited{
159 color:#CF830C;
160 text-decoration:none;
161 }
162
163 a:hover{
164 text-decoration:underline;
165 }

NEXT

Tutorial Cara Membuat Theme WordPress

Sendiri ( Langkah #6 : Merapihkan Styling
CSS )
oleh Fikri
Lanjutan dari seri Tutorial Cara Membuat Theme WordPress Sendiri. Untuk memastikan tidak
ada miskonsepsi, kami rekomendasikan anda membaca seri post ini dari awal :

Langkah #0 : Pendahuluan, serta tools tools yang dibutuhkan

Langkah #1 : Memahami Struktur File Theme WordPress
Langkah #2 : Memahami Tag tag XHTML & Kegunaannya, dan aturan penulisannya
Langkah #3 : Membuat File Dasar Theme WordPress : index.php & style.css
Langkah #4 : Memuat Konten Blog Ke Dalam Theme
Langkah #5 : Mendesain Theme Menggunakan CSS

Ok. Seperti pada post sebelumnya, awali dengan nyalakan XAMPP Control Panel, hidupkan
Apache Server & Database MySQLnya, lalu buka aplikasi browser dan buka halaman wordpress
lokal anda ( http://localhost/wordpress/ ).

Well, sudah 6 langkah. langkah selanjutnya apa?

Sebenarnya kami ingin terus lanjut ke langkah membuat file theme lain berdasarkan index.php
sesuai dengan hirarki theme wordpress. Tapi sebelum masuk ke langkah itu, tadi kami mencoba
mengakses tampilan latihantheme pada dua browser yang berbeda : FireFox ( yang kami wanti
wanti anda untuk gunakan untuk mendesain web ), dan Internet Explorer ( Browser ajaib.
ahaha ), dan kami menyadari bahwa ada yang harus kita selesaikan *halah* terlebih dahulu :

Merapihkan Styling CSS latihantheme

Jadi begini. Di jagat internet, setidaknya ada 4 jenis browser yang paling sering digunakan :
Internet Explorer (IE ), Mozilla Firefox ( FF ), Opera, dan Safari. Browser yang paling banyak
digunakan adalah Internet Explorer. lebih dari 70% pengakses internet menggunakan IE sebagai
browsernya. Sisanya, menggunakan Firefox, Opera, dan Safari.
Masalahnya adalah : Terkadang, tampilan website yang menggunakan CSS berbeda jika diakses
menggunakan satu browser dan browser lainnnya. Hal ini disebabkan karena setiap browser
menggunakan caranya masing masing dalam memahami definisi CSS.

Note : buka wordpress lokal anda yang menggunakan latihantheme di Firefox dan Internet
Explorer. Dapat perbedaannya?

See? ada beberapa perbedaan yang muncul ketika latihantheme diakses menggunakan FireFox
dan Internet Explorer.

Well,setelah kami analisa, ketidak rapihan ini ternyata disebabkan oleh objek yang ID atau
CLASS nya belum di definisikan. Maka dari itu, browser otomatis memberikan nilai default
pada ID dan CLASS tersebut. Masalahnya adalah : nilai default tiap browser berbeda

Oke, ini perbedaan latihantheme yang diakses menggunakan IE :

title post yang terdiri atas dua baris tidak enak dilihat : tabrakan dan kebesaran.
blog title kebesaran
konten list item pada sidebar terlalu menjorok ke dalam.
Title widget yang beda ukuran

mari atasi yang satu ini sekarang

title post yang terdiri atas dua baris tidak enak dilihat :
tabrakan dan kebesaran.
Masalah tabrak menabrak antar baris ini terjadi karena line-height title post mengikuti line-height
yang kita set untuk <body> . Cara Mengatasinya :

ketik / copypaste kode ini ke style.css

1 .post h2{
2 line-height:1.2;
3 font-size:20px;
4}

problem solved. Refresh browser anda

blog title kebesaran

Menyelesaikan masalah ini cukup mudah juga. Ketik / Copypaste kode ini :

1 #kepala h1{
2 font-size:20px;
3 margin:10px 0 10px 0;
4}

konten list item pada sidebar terlalu menjorok ke dalam

cari #barsisi li ul{}. tambahkan margin:0; sehingga jadi seperti ini :

1 #barsisi li ul{
2 padding:0px;
3 margin:0;
4}

Title Widget beda ukuran

ketik / copypaste kode ini ke style.css

1 .widgettitle{
2 font-size:20px;
3 margin:10px;
4}

Hoho, sekarang baik di IE atau di FF tampilannya sudah rapih. Pada post selanjutnya kita bisa
meneruskan pembahasan kita pada langkah selanjutnya.

NEXT

Tutorial Cara Membuat Theme WordPress

Sendiri ( Langkah #7 : Melengkapi File
Theme )
oleh Fikri
Lanjutan dari seri Tutorial Cara Membuat Theme WordPress Sendiri. Untuk memastikan tidak
ada miskonsepsi, kami rekomendasikan anda membaca seri post ini dari awal :

Langkah #0 : Pendahuluan, serta tools tools yang dibutuhkan

Langkah #1 : Memahami Struktur File Theme WordPress
Langkah #2 : Memahami Tag tag XHTML & Kegunaannya, dan aturan penulisannya
Langkah #3 : Membuat File Dasar Theme WordPress : index.php & style.css
Langkah #4 : Memuat Konten Blog Ke Dalam Theme
Langkah #5 : Mendesain Theme Menggunakan CSS
Langkah #6 : Merapihkan Styling CSS

Ok. Seperti pada post sebelumnya, awali dengan nyalakan XAMPP Control Panel, hidupkan
Apache Server & Database MySQLnya, lalu buka aplikasi browser dan buka halaman wordpress
lokal anda ( http://localhost/wordpress/ ).

Seperti yang sudah kami sebutkan pada langkah #1, mengenai struktur file Theme WordPress :
Theme wordpress terdiri dari berbagai file. Pada 7 langkah sebelumnya, kita telah menghasilkan
3 file inti dari theme wordpress : index.php, style.css, dan function.php.

Pada post kali ini, kita akan membuat file yang lainnya : header.php, comment.php, single.php,
page.php, archive.php, dan search.php.

Sebentar, sepertinya ada yang terlewat. Bagaimana dengan

footer.php dan home.php?
Well, karena pada latihantheme ini kita tidak menampilkan footer apapun, maka tidak kita
butuhkan file footer.php ini. Sedangkan untuk home.php, karena settingan index.php sudah
sesuai dengan apa yang kita butuhkan tampilan halaman depan, maka kita tidak membutuhkan
home.php untuk latihantheme.

Ok, Langsung saja kita bahas satu persatu. buka browser dan akses localhost/wordpress, dan
buka index.php menggunakan notepad ++.

membuat header.php
header.php merupakan file untuk mendefinisikan data data pada header, lalu digunakan secara
bersama oleh tiap file. gunanya? agar header tiap file dipastikan seragam. persis seperti konsep
style.css : satu file yang mendefinisikan seluruh halaman, maka dari itu dibuat dalam file
tersendiri, dan digunakan secara bersama sama. tujuannya? agar tampilan seragam. begitu pula
dengan header.

Kalau kita analisa, apa sih yang membedakan halaman ( yang standar y ) home, post, page, tag
dan categories? hanya kontennya. Sidebar, header dan footernya sama. Maka dari itu, dari pada
menduplikasi konten file, lebih baik tampilan yang sama ditulis dalam satu file terpisah dan
script tersebut digunakan secara bersamaan oleh semua file. Enough for the theory. Sekarang
praktek :

1. buka file baru pada notepad ++.

2. buka file index.php. select kode dari baris sesudah tag <meta http-equiv=Content-
Type content=text/html; charset=iso-8859-1> hingga <?php
wp_list_pages(sort_column=menu_order&depth=1&title_li=);?></ul></div>, lalu
tekan CTR + X alias cut.
3. Paste script yang tadi di cut ke file baru notepad++, lalu save dengan nama header.php
4. Kembali ke file index.php. pada bagian yang tadi kita pindahkan scriptnya ke header.php,
ketik / copypaste kode ini : <?php get_header(); ?>

Penjelasan : <?php get_header(); ?> merupakan tag wordpress yang berfungsi untuk me-
LOAD seluruh script yang terdapat pada file
header.php

OK, sekarang, file header.php beres

Membuat comment.php
comment.php merupakan kerangka dari tampilan komentar : apa yang akan ditampilkan jika
ada komentar, apa yang akan ditampilkan jika tidak ada komentar, dan apa yang ditampilkan jika
sistem komentar blog anda membutuhkan pengunjung login terlebih dahulu. Sistem komentar
yang akan kita gunakan ini saya ambil dari kerangka kubrick. Theme default bawaan wordpress.

Buat file baru pada notepad ++, copy paste script berikut dan save dengan nama comments.php
:
001 <?php // Jangan menghapus baris ini!
if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' ==
002
basename($_SERVER['SCRIPT_FILENAME']))
003 die ('Please do not load this page directly. Thanks!');
004
005 if (!empty($post->post_password)) { // jika ada password
if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { //
006 dan passwordnya tidak sesuai dengan cookie, yang artinya pengunjung sedang
tidak login. script ini yang akan muncul
007 ?>
008
<p class="nocomments">Post ini di kunci. masukan password untuk membaca
009
post ini</p>
010
011 <?php
012 return;
013 }
014 }
015
016 /* variabel ini untuk membuat alternatif background comment*/
017 $oddcomment = 'class="alt" ';
018 ?>
019
020 <!-- Kerangka Comment dimulai dari sini -->
021
022 <?php if ($comments) : ?>
<h3 id="comments"><?php comments_number('Tidak ada komentar', 'Satu
023
Komentar', '% Komentar' );?> to &#8220;<?php the_title(); ?>&#8221;</h3>
024
025 <ol class="commentlist">
026
027 <?php foreach ($comments as $comment) : ?>
028
029 <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
030 <?php echo get_avatar( $comment, 32 ); ?>
031 <cite><?php comment_author_link() ?></cite> Says:
032 <?php if ($comment->comment_approved == '0') : ?>
033 <em>Your comment is awaiting moderation.</em>
034 <?php endif; ?>
035 <br />
036
037 <small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>"
 title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a>
<?php edit_comment_link('edit','&nbsp;&nbsp;',''); ?></small>
038
039 <?php comment_text() ?>
040
041 </li>
042
043 <?php
044 /* Membuat setiap komentar memiliki class yang berbeda */
045 $oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
046 ?>
047
048 <?php endforeach; /* Akhir dari setiap komentar */ ?>
049
050 </ol>
051
<?php else : // Jika setting komentar enable namun tidak ada komentar,
052
maka script dibawah ini dieksekusi ?>
053
054 <?php if ('open' == $post->comment_status) : ?>
055 <!-- Jika sistem komentar enable, namun belum ada komentar yang masuk. -->
056
057 <?php else : // komentar di disable ?>
058 <!-- Jika sistem komentar di disable, script ini yang muncul -->
059 <p class="nocomments">Tidak Menerima Komentar.</p>
060
061 <?php endif; ?>
062 <?php endif; ?>
063
064 <?php if ('open' == $post->comment_status) : ?>
065 <h3 id="respond">Berikan Komentar Anda</h3>
066
<!-- Jika setting komentar membutuhkan pengunjung login terlebih dahulu
067
untuk memberikan komentar, script ini dieksekusi-->
068 <?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-
069 login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged
in</a> to post a comment.</p>
070
071 <!-- Jika setting komentar terbuka, script ini dieksekusi -->
072 <?php else : ?>
073 <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php"
 method="post" id="commentform">
074
075 <!-- Jika pengakses halaman sedang login, script ini yang dieksekusi-->
076 <?php if ( $user_ID ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-
admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo
077
get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of
this account">Log out &raquo;</a></p>
078
079 <!-- Jika pengakses alaman tidak sedang login, form ini yang muncul-->
080 <?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo
081 $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-
required='true'"; ?> />
<label for="author"><small>Nama <?php if ($req) echo "(required)";
082
?></small></label></p>
083
<p><input type="text" name="email" id="email" value="<?php echo
084 $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo
"aria-required='true'"; ?> />
<label for="email"><small>E-Mail (tidak akan dipublikasikan) <?php if
085
($req) echo "(required)"; ?></small></label></p>
086
<p><input type="text" name="url" id="url" value="<?php echo
087
$comment_author_url; ?>" size="22" tabindex="3" />
088 <label for="url"><small>Website</small></label></p>
089
090 <?php endif; ?>
091
<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php
092
echo allowed_tags(); ?></code></small></p>-->
093
<p><textarea name="comment" id="comment" cols="100%" rows="10"
094
tabindex="4"></textarea></p>
095
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit
096
Comment" />
097 <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
098 </p>
099 <?php do_action('comment_form', $post->ID); ?>
100
101 </form>
102
103 <?php endif; // endif jika butuh komentar membutuhkan registrasi dan belum
 login ?>
104
105 <?php endif; // hapus baris ini dan semuanya akan menjadi mimpi buruk?>

Wow. cukup panjang bukan? kami tidak akan menjelaskan perintah2 yang terdapat pada
comments.php karena itu akan membuat post ini menjadi terlalu panjang. Namun ketika anda
sudah men-savenya di notepad ++ nanti, anda akan dapat melihat penjelasan dari tag, yang kami
buat di file comments.php ( berwarna hijau )

Membuat single.php
single.php adalah file yang mendefinisikan apa saja yang akan di tampilkan pada halaman post (
halaman post adalah halaman yang menampilkan post dan komentarnya ). ketika anda
mengakses halaman post, file ini yang digunakan sbagai kerangka halaman tersebut. Langsung
saja langkahnya :

1. buat file baru di notepad ++

2. copypaste semua konten index.php ke file baru tersebut, lalu save dengan nama
single.php
3. hapus tag <?php comments_popup_link(No Comments, 1 Comment, %
Comments); ?>. mengapa dihapus? karena pada post, metadata tentang jumlah
komentar tidak akan ditampilkan
4. ganti tag<div class=navigation><?php posts_nav_link(); ?></div> dengan <div
class=navigation><?php previous_post_link(&laquo; %link) ?><br /><?php
next_post_link( %link &raquo;) ?></div>
5. setelah tag yang tadi kita save, ketik / copypaste tag ini : <div id=commentall><?php
comments_template(); ?></div> TEPAT SETELAH TAG YANG BARU KITA
GANTI TADI lalu save.

single.php beres

Penjelasan :

Tag pada poin ke 3 merupakan perintah untuk menampilkan jumlah komentar

Tag pada poin ke 4 merupakan link ke post selanjutnya dan post sebelumnya, dengan link
berupa judul post
tag pada poin ke 5 merupakan perintah untuk me load comments.php pada halaman yang
ada

Membuat page.php
page.php adalah file yang mendefinisikan apa saja yang akan ditampilkan pada halaman statis (
page ) wordpress. contoh : halaman about me. Ok, langsung saja langkah pembuatannya :

1. buat file baru di notepad ++ ( ctr + n )

 2. copypaste semua konten single.php ke file baru tersebut, lalu save dengan nama page.php
3. hapus tag <?php _e(Category :); ?> <?php the_category(, ) ?> <?php _e(| );?>
<?php the_tags(); ?> <?php _e(| );?>. Mengapa dihapus? karena halaman statis
wordpress tidak memiliki category dan tags
4. ganti <?php previous_post_link(&laquo; %link) ?><br /><?php next_post_link(
%link &raquo;) ?> dengan <?php link_pages(<p><strong>Pages:</strong> ,
</p>, number); ?>
5. Save. page.php beres.

Penjelasan :

tag <?php the_category(, )?> merupakan tag untuk memanggil category dari post
tag <?php the_tags();?> merupakan tag untuk memanggil tags dari post
tag pada poin ke 4 merupakan tag untuk memanggil link jika halamana post di break
this post

Membuat archive.php
archive.php adalah file yang mendefinisikan apa saja yang akan ditampilkan pada bagian
archive, tag, dan category. Lankah cukup sederhana :

1. buat file baru di notepad ++ ( Ctr + N )

2. copypaste semua konten index.php, ingat y, index.php, ke file baru tersebut. Lalu save
dengan nama archive.php
3. ganti tag <?php the_content(); ?> dengan <?php the_excerpt(); ?>
4. Save. archive.php beres

Penjelasan :

tag pada poin ke 3 merupakan tag untuk memanggil excerpt / ringkasan dari post yang
dimaksud

Membuat search.php
search.php adalah file yang mendefinisikan apa apa yang tampil pada halaman hasil
pencarian. Well, yang satu ini cukup mudah :

1. buat file baru di notepad ++ ( Ctr + N )

2. Copypaste semua konten archive.php, lalu save dengan nama search.php
3. ketik / copypaste tag <h2>Hasil Pencarian Untuk <span><?php echo $s;
?></span></h2> tepat setelah tag <?php if(have_posts()):?>
4. Ganti tag ini : <?php _e(The page youve requested does not exist.
Suggestions:<ul><li>Check the spelling of the address you typed</li><li>If you are
still having problems, please contact us</li></ul>); ?> dengan <?php _e(Tidak ada
halaman yang sesuai untuk kata kunci); ?> <?php echo $s; ?>
search.php beres

Penjelasan :

tag pada poin ke 3, <?php echo $s; ?> merupakan tag untuk memanggil keyword yang
digunakan untuk pencarian

tag pada poin ke 4 merupakan tag untuk memanggil kalimat yang disetting untuk keluar jika
pencarian tidak menghasilkan apa apa

Membuat screenshot latihantheme

Agar sebuah theme memiliki preview ketika di lihat dari dashboard admin wordpress, Sebuah
theme perlu memiliki sebuah file image bernama snapshot dengan ukuran 300 X 250 piksel.
jenis file bisa .png, jpg, atau gif. Kami mengcapture tampilan latihantheme menggunakan add
ons firefox bernama screengrab, lalu meresizenya menggunakan microsoft office picture
manager, lalu di letakan di direktori latihantheme. Yup, Sesederhana itu.

***

Wohooo!!! akhirnya selesai sudah Seri Tutorial Cara Membuat Theme WordPress Sendiri ini.
Satu pekan yang panjang eh?

Beberapa dari anda mungkin merasa bahwa panduan yang disajikan oleh seri tutorial ini tidak
lengkap. Well, dengan senang hati saya mengatkana bahwa ya, memang benar seri tutorial ini
sengaja hanya menampilkan dasarnya saja. Mengapa? karena kebutuhan tiap orang akan theme
wordpress berbeda. Maka dari itu, seri ini hanya menampilkan dasarnya saja.

Lalu, jika saya ingin menampilkan sesuatu pada theme saya

dan saya belum tahu caranya serta tidak dibahas pada
tutorial ini bagaimana dong?
Pertanyaan bagus. Cara yang saya gunakan untuk mengatasi ini : cari theme yang secara struktur
menampilkan apa yang kita butuhkan, lalu download theme tersebut. Setelah di download,
bedah theme tersebut, dan cari tahu tag / script apa yang digunakan theme tersebut untuk
menampilkan konten2 tertentu.

atau, mungkin kami bisa membantu? silahkan kontak melalui contact form saja.

Anyway, hasil dari tutorial membuat theme ini, anda bisa download latihantheme disini :

[Download not found]

P.S. : Kalau menemukan bug, tolong di laporkan ke bloggingly y! thanks

Ok, Tutorial cara membuat theme wordpress sendiri SELESAI sampai disini.

Ada pertanyaan? atau Ada langkah yang kurang jelas? Atau mungkin ada yang terlewat? izinkan
kami mengetahuinya. silahkan sampaikan pandangan anda melalui kolom komentar

Enjoy!

FINISH.