creating wordpress theme (wp tutorial)

Copyright © 2009 http://www.profmustamar.com

Untuk WordCamp Indonesia 2009

Komunitas Blogger Makassar ANGINGMAMMIRI.ORG http://angingmammiri.org

Mempersembahkan

Tutorial Membuat Wordpress Theme

Oleh: Mohammad Mustamar Natsir http://profmustamar.com


Tutorial Membuat Wordpress Theme Mohammad Mustamar Natsir http://profmustamar.com

A. INTRO Yang harus diperhatikan dalam membuat Wordpress theme adalah:

- Daftar kebutuhan - Struktur dasar kode html dan css yang valid - Istilah-istilah dalam template Wordpress

Ok, sekarang mari kita bedah.

1. Yang dibutuhkan untuk membuat sebuah Wordpress theme 1. Local Apache, PHP, MySQL Sever

Untuk bisa menjalankan engine Wordpress, kita membutuhkan sebuah webserver Apache, PHP, dan MySQL. Hampir semua hosting (Linux Hosting) memilikinya, tapi tidak di komputer kita. Nah, karena kita akan menjalankan Wordpress di komputer kita, maka kita membutuhkan program yang mampu bekerja sebagai webserver di komputer kita (Local Server). Untuk yang menggunakan sistem operasi Windows, dapat menggunakan beberapa software local server berlisensi opensource, seperti: - XAMPP (http://www.apachefriends.org/en/xampp.html), atau - WAMP (http://www.wampserver.com/en/) Bagi pengguna Linux, dapat juga menggunakan XAMPP, atau LAMP (Linux Apache MySQL PHP) Cara installasi LAMP dapat dilihat di situs http://lamphowto.com/ Pada tutorial ini saya menggunakan XAMPP sebagai local servernya. Sebagai bahan praktek, software XAMPP tersedia di dalam CD tutorial. (install sekarang!)

2. Wordpress File Tentunya yang kita butuhkan selanjutnya adalah Wordpress File. Saya sarankan menggunakan Wordpress rilis terbaru (Wordpress 2.7), dapat didownload melalui situs resmi Wordpress (www.wordpress.org/download). Sebagai bahan praktek, file Wordpress tersedia di dalam CD tutorial, dengan nama wordpress.zip


3. Text Editor Untuk mengedit kode-kode template, harus menggunakan teks editor standar, seperti notepad atau wordpad. Atau, dapat juga menggunakan web editor, seperti Adobe Dreamweaver, atau yang berlisensi opensource semacam Nvu Web Authoring Software (http://www.net2.com/nvu/). Dalam tutorial ini saya menggunakan Notepad sebagai text editor. Namun jika ingin menggunakan Nvu sebagai editornya, sebagai bahan praktek, software installasi Nvu tersedia di dalam CD tutorial. (install sekarang!)

2. Struktur dasar kode html yang valid

Struktur kode html yang valid itu: a. harus dimulai dengan sebuah tag <> dan ditutup dengan end tag </>

Contoh :

<html> <head> <title>title text</title> </head> <body>

</body> </html>

kecuali beberapa tag yang tidak membutuhkan penutup end tag, seperti :

<br />, <hr />, <img /> b. Struktur kode html harus berurutan. Jangan terbalik-balik

Contoh struktur yang salah:

<div> <ul>

<li> text </ul>

</li> </div>

Harusnya:

<div> <ul>


<li> text </li>

</ul> </div>

3. Istilah-istilah dalam pembuatan Wordpress theme Kita juga harus mengetahui istilah-istilah yang sering digunakan dalam template Wordpress. Istilah-istilah ini adalah standar yang digunakan dalam pengembangan Wordpress di seluruh dunia. Istilah-istilah itu antara lain: a. Template

Adalah set kode yang dapat digunakan di berbagai tempat dalam layout, tanpa harus menulis kode yang sama berulang-ulang.

b. Template File Adalah file yang berisi beberapa kode template. Contohnya, index.php, sidebar.php, home.php

c. Theme / Wordpress Theme Adalah kumpulan semua file yang digunakan. File-file itu dapat berupa gambar, teks, kode, dll, yang terhimpun dalam sebuah folder theme. Jadi, Wordpress Theme dan Wordpress Template berbeda. Catat: BERBEDA!

d. Post Sederhananya, post adalah entry utama yang kita tampilkan di blog.

e. Page Adalah sejenis post juga, tetapi tidak tergantung pada pilihan kategori, tags, dll.

4. Memahami hirarki dan struktur file di Wordpress Setelah memahami istilah-istilah yang digunakan dalam pembuatan Wordpress theme, kita juga harus memahami struktur file di dalam Wordpress theme. Pertama, File yang dibutuhkan untuk membangun sebuah theme sebenarnya cukup hanya dengan 2 file, yaitu index.php dan style.css, yang keduanya berada dalam sebuah folder theme. Semua tampilan blog akan diarahkan ke file index.php, dan style.css sebagai pendukung untuk mengatur layout blog.


Tapi, agar blog dapat bekerja lebih fungsional dan efektif, sebaiknya dibuatkan pula template file lainnya sebagai pendukung. Daftar template file itu antara lain adalah:

• style.css • index.php • home.php • single.php • page.php • archive.php • category.php • search.php • 404.php • comments.php • comments-popup.php • author.php • date.php

Semua file template itu harus disimpan dalam sebuah folder theme dengan nama folder tertentu, misalnya ‘ThemeSaya’, dan disimpan dalam folder /wp-contents/themes/ dalam folder installasi Wordpress.

Berikut ini adalah hirarki akses blog ke dalam theme.


Diambil dari: http://codex.Wordpress.org/Templates_Hierarchy

Nah, dari gambar di atas dapat kita lihat bahwa semua halaman yang kita akses akan diarahkan ke index.php jika template file pendukungnya tidak ada.

B. PRAKTEK MEMBUAT WORDPRESS THEME Ok, sekarang setelah dasar-dasar teori tentang Wordpress theme sudah diketahui, saatnya untuk memulai praktek pembuatannya. Yang harus dilakukan dalam praktek ini adalah:

1. Menginstall dan menjalankan Wordpress di komputer 2. Membuat sebuah template html+css komplit. 3. Membuat file template.

1. Menginstall dan menjalankan Wordpress di komputer

• Install XAMPP di komputer. (file installer tersedia di CD tutorial)

• Setelah terinstall, jalankan Apache, MySQL, dan PHP server melalui XAMPP Control Panel. Pastikan di XAMPP Control Panel, status Apache dan MySQL adalah ‘running’.

• Exstrak file Wordpress (wordpress.zip, tersedia di CD tutorial) ke folder htdocs di dalam folder installasi XAMPP. Jika menggunakan Windows, secara default folder installasi XAMPP terdapat di drive C:\xampp

• Buat sebuah MySQL database melalui PHPMyAdmin, dengan cara mengakses: http://localhost/phpmyadmin lewat browser, dan membuat sebuah database dengan nama tertentu, misalnya wordpress


• Akses wordpress melalui browser, http://localhost/wordpress, isikan data mengenai database sesuai dengan database yang baru saja dibuat. Isikan username dengan ‘root’, dan field password dikosongkan.

• Ikuti instruksi selanjutnya hingga selesai, dan Anda dapat login ke

dashboard. Setelah itu, pastikan Anda mengganti password melalui menu Users >> Your Profile

• Wordpress sudah selesai diinstall, dan dapat langsung dijalankan melalui browser, dengan alamat http://localhost/wordpress.

2. Membuat sebuah template html+css komplit.

Setelah selesai menginstall Wordpress di komputer, yang harus dilakukan adalah membuat sebuah template html dan css komplit. Template ini adalah layout dasar blog yang akan kita buat. Anda dapat membuat sebuah template html dan css sendiri, namun untuk mempersingkat waktu, di dalam CD tutorial terdapat sebuah template html+css yang akan digunakan untuk membuat file template Wordpress.


Pindahkan folder mywptheme yang terdapat pada CD tutorial ke dalam folder wp-content/themes/ di dalam folder installasi Wordpress.

3. Membuat file template

Setelah memindahkan folder mywptheme ke dalam folder installasi Wordpress, yang harus dilakukan sekarang adalah memecah file layout.html yang terdapat di dalam folder mywptheme menjadi file-file template Wordpress. Buka file layout.html yang terdapat di dalam folder mywptheme menggunakan text editor. a. Membuat file style.css

Style.css adalah file cascade stylesheet (CSS), yang fungsinya adalah untuk mengatur tampilan web. CSS adalah kode yang di dalamnya terdapat kode-kode untuk mewakili warna, ukuran (size), garis, border, posisi, dan sebagainya. Dalam praktek kali ini, kode CSS sudah tersedia di dalam file layout.html. Buka file tersebut. Setelah terbuka, cut text mulai dari <style type=”text/css”> sampai </style> seperti yang terdapat pada gambar di bawah:

…

Lalu buat sebuah text file baru, lalu paste ke dalamnya. Lalu tambahkan text berikut ini pada baris paling atas file tersebut :

/* Theme Name: MyWPtheme Theme URI: http://profmustamar.com Description: Theme Pertamaku Version: 1.0 Author: Mohammad Mustamar Natsir Author URI: http://profmustamar.com */

Isikan Theme Name, Theme URl, Description, Version, Author, dan Author URl dengan data sesuai keinginan Anda, lalu save ke dalam folder mywptheme dengan nama style.css. Setelah jadi, susunan kode akan seperti kode dalam file contoh-style.txt yang terdalam CD tutorial.

b. Membuat header.php

Buat text berikut ini pada halaman baru text file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php if (is_home()) { bloginfo('description'); } else { wp_title('',true); } ?> — <?php bloginfo('name'); ?></title> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_head(); ?> </head>


<body> <div id="wrap"> <div id="header"> <h1 class="judul"><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1> <h2 class="judul"><?php bloginfo('description'); ?></h2> </div> <div id="main-body"> <div id="container">

Kode tersedia dalam CD tutorial dengan nama inside-head.txt. Lalu save dengan nama header.php.

c. Membuat index.php Dari file layout.html, cari code berikut ini:

<div class="post"> <h2 class="judul-entry">judul entry di sini</h2> <h5 class="tanggal-author">>> tanggal 27 maret 2009, by Admin</h5> <p>Postingan kamu nanti ada di sini. Silakan diedit lagi yaa... Kalau mau jalan-jalan ke blog saya, silakan langsung ke: <a href="http://profmustamar.com">www.profmustamar.com</a></p> <p><strong>ini strong/bold</strong>:</p> <ul> <li>ini unordered list</li> <li>ini unordered list juga</li> </ul> <ol> <li>ini ordered list</li> <li>ini ordered list</li> </ol> <blockquote>kalau ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text. </blockquote> <div class="endpost">diposting pakai kategori: tewasd, sdfasfasd, asd, as, asd asdf a,</div> </div> </div>

Copy, lalu paste ke dalam sebuah file text baru. Tambahkan pada baris paling atas code untuk ‘memanggil’ header template file. Berikut ini codenya:

<?php get_header(); ?>

Lalu pada baris paling bawah, tambahkan kode berikut ini untuk ‘memanggil’ sidebar dan footer template. Berikut ini codenya:

<?php get_sidebar(); ?> <?php get_footer(); ?>


Simpan file dengan nama index.php.

d. Membuat sidebar.php Dari file layout.html, cari kode berikut:

<div id="sidebar"> <ul> <li> <h2>Judul Widget</h2> <ul> <li>listnya item</li> <li>listnya item</li> <li>listnya item</li> <li>listnya item</li> </ul> </li> </ul> </div>

Copy-paste code tersebut, ke dalam sebuah file text baru, lalu simpan dengan nama sidebar.php.

e. Membuat footer.php

Masih dari file layout.html, cari kode berikut:

</div> <div id="footer">footer here</div> </div> </body> </html>

Copy-paste ke dalam file text baru, lalu simpan dengan nama footer.php. Sampai pada tahap ini, Anda sudah dapat melihat layout ‘bayangan’ theme Wordpress yang sedang kita buat. Untuk melihatnya, akses blog Wordpress Anda melalui browser: http://localhost/wordpress.

f. Bekerja dengan The Loop The Loop adalah kode utama yang fungsinya ‘memanggil’ entry demi entry post blog. Untuk itu, The Loop paling minimal harus dibuat/ditulis di dalam file template index.php. Untuk mulai bekerja dengan The Loop, buka file index.php. Pembuka dan penutup The Loop


Setelah kode <?php get_header(); ?> Masukkan kode pembuka The Loop berikut ini:

<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>

Lalu, masukkan kode berikut ini sebagai penutup The Loop:

<?php endwhile; ?><?php endif; ?>

tepat sebelum kode:

</div> <?php get_sidebar(); ?>

Sampai pada tahap ini, The Loop sudah selesai dibuat. Selanjutnya adalah membuat kode untuk memanggil item-item entry, seperti judul, entry post, tanggal post, author, dll.

g. Bekerja dengan The Content The Content adalah kumpulan kode-kode yang bertugas ‘memanggil’ item-item entry. Kode-kode dalam The Content fungsinya menampilkan item seperti, judul post, entry, author, tanggal, kategori, tag, dan lain-lain. The Content berada di dalam The Loop, dan harus berada (minimal) di dalam template file index.php. Untuk mulai bekerja dengan The Content, buka file index.php menggunakan teks editor. Menampilkan Post Title Kode berikutnya adalah kode untuk ‘memanggil’ judul post.

<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>

Masukkan kode di atas itu, menggantikan tulisan ‘judul entry di sini’, setelah kode <h2 id=”judul-entry”> Menampilkan Tanggal dan Author Selanjutnya adalah kode untuk ‘memanggil’ tanggal dan penulis (author) post. Kode tersebut adalah:

<h5 class="tanggal-author">>> <?php the_time('F jS, Y') ?><?php the_time('F jS, Y') ?><?php the_time('F jS, Y') ?><?php the_time('F jS, Y') ?> — by: <?php <?php <?php <?php the_author() ?>the_author() ?>the_author() ?>the_author() ?></h5>


Masukkan kode di atas, menggantikan kode berikut:

<h5 class="tanggal-author">>> tanggal 27 maret 2009, by Admin</h5>

Menampilkan Entry Post Berikutnya, memasukkan kode untuk entry post. Masukkan kode berikut ini:

<?php the_content("Continue reading →"); ?>

Setelah tag </h5>, lalu hapus seluruh kode berikut:

<p>Postingan kamu nanti ada di sini. Silakan diedit lagi yaa... Kalau mau jalan-jalan ke blog saya, silakan langsung ke: <a href="http://profmustamar.com">www.profmustamar.com</a></p> <p><strong>ini strong/bold</strong>:</p> <ul> <li>ini unordered list</li> <li>ini unordered list juga</li> </ul> <ol> <li>ini ordered list</li> <li>ini ordered list</li> </ol> <blockquote>kalau ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text. </blockquote>

Menampilkan Kategori Post Memasukkan kategori post, dapat menggunakan kode berikut:

<strong>Category: </strong><?php the_category(', ') ?>

Masukkan kode di atas, menggantikan text di antara tag:

<div class="endpost"> dan tag </div> Sehingga kode akan menjadi seperti ini: <div class="endpost"><strong>Category: </strong><?php the_category(', ') ?></div>

Sampai pada tahap ini, entry post blog sudah dapat dilihat, namun belum dapat menampilkan komentar yang masuk. Menampilkan Jumlah Komentar Masuk Dapat menggunakan kode berikut ini:

<?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?>

Kode tersebut harus disisipkan di dalam The Loop. Misalnya, di sekitar kode category.

h. Membuat dan menampilkan Comments Template Comments Template berisi kode untuk form komentar dan kode untuk menampilkan daftar komentar yang sudah masuk ke dalam post. Berikut ini kodenya:

<?php // Do not delete these lines if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die ('Please do not load this page directly. Thanks!'); if (!empty($post->post_password)) { // if there's a password if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn't match the cookie ?> <p class="center"><?php _e("This post is password protected. Enter the password to view comments."); ?><p> <?php return; } } /* Function for seperating comments from track- and pingbacks. */ function k2_comment_type_detection($commenttxt = 'Comment', $trackbacktxt = 'Trackback', $pingbacktxt = 'Pingback') { global $comment; if (preg_match('|trackback|', $comment->comment_type)) return $trackbacktxt; elseif (preg_match('|pingback|', $comment->comment_type)) return $pingbacktxt; else return $commenttxt; } $templatedir = get_bloginfo('template_directory'); $comment_number = 1; ?>  <?php if (($comments) or ('open' == $post-> comment_status)) { ?> <div id="comments"> <div class="comments-top"></div> <h3 class="comment_num"><?php comments_number('0 comments', '1 comment so far', '% comments' );?> ↓</h3>

<?php if ($comments) { ?> <dl id="comment_list"> <?php $count_pings = 1; foreach ($comments as $comment) { ?> <dt id="comment-<?php comment_ID() ?>"<?php if ($comment->comment_author_email == get_the_author_email()) { ?> class="author"<?php } ?>> <span class="comment_num"><a href="#comment-<?php comment_ID() ?>" title="Permalink to this comment">#<?php echo($comment_number); ?></a></span> <strong><?php comment_author_link() ?> </strong>on <?php comment_date('m.d.y') ?> at <?php comment_time() ?> </dt> <dd class="entry<?php if ($comment->comment_author_email == get_the_author_email()) { ?> author<?php } ?>"> <?php echo get_avatar( $comment, 40 ); ?> <?php comment_text() ?> <?php if ($comment->comment_approved == '0') : ?> <p><strong>Your comment is awaiting moderation.</strong></p> <?php endif; ?> </dd> <?php $comment_number++; } /* end for each comment */ ?> </dl> <?php } else { // this is displayed if there are no comments so far ?> <?php if ('open' == $post-> comment_status) { ?>  <div class="entry"> <p>There are no comments yet...Kick things off by filling out the form below.</p> </div> <?php } else { // comments are closed ?>  <?php if (is_single) { // To hide comments entirely on Pages without comments ?> <div class="entry"> <p>Like gas stations in rural Texas after 10 pm, comments are closed.</p> </div> <?php } ?> <?php } ?> <?php } ?>  <?php if ('open' == $post-> comment_status) : ?>

<?php if ( get_option('comment_registration') && !$user_ID ) : ?> <p class="unstyled">You must <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">log in</a> to post a comment.</p> <?php else : ?> <h3 id="respond">Leave a Comment</h3> <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="comment_form"> <?php if ( $user_ID ) { ?> <p class="unstyled">Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout&_wpnonce=246717c231" title="<?php _e('Log out of this account') ?>">Logout »</a></p> <?php } ?> <?php if ( !$user_ID ) { ?> <p><input class="text_input" type="text" name="author" id="author" value="<?php echo $comment_author; ?>" tabindex="1" /><label for="author"><strong>Name</strong></label></p> <p><input class="text_input" type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" tabindex="2" /><label for="email"><strong>Mail</strong></label></p> <p><input class="text_input" type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" tabindex="3" /><label for="url"><strong>Website</strong></label></p> <?php } ?>  <p><textarea class="text_input text_area" name="comment" id="comment" rows="7" tabindex="4"></textarea></p> <?php if (function_exists('show_subscription_checkbox')) { show_subscription_checkbox(); } ?> <p> <input name="submit" class="form_submit" type="submit" id="submit" tabindex="5" value="Submit" /> <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /> </p> <?php do_action('comment_form', $post->ID); ?> </form> <?php endif; // If registration required and not logged in ?> <?php endif; // if you delete this the sky will fall on your head ?> </div>  <?php } ?>


Buatlah kode di atas sebagai sebuah file baru dengan nama comments.php. Untuk mempermudah, kode tersebut tersedia di dalam CD tutorial, dengan nama comments.txt. Untuk menampilkan template ini ke dalam layout blog, kode yang digunakan adalah:

<?php comments_template(); ?>

Kode itu harus dimasukkan ke dalam The Loop. Caranya, buka file index.php dengan text editor. Masukkan kode tersebut di antara tag:

<?php endwhile; ?> dan <?php endif; ?>

Sehingga kode menjadi:

<?php endwhile; ?><?php comments_template()<?php comments_template()<?php comments_template()<?php comments_template(); ?>; ?>; ?>; ?><?php endif; ?>

Sampai di tahap ini, template Comments sudah terlihat di entry post blog.

i. Membuat Navigasi

Navigasi ini berguna untuk membuat link ke entry post sebelum dan setelah post yang ditampilkan.


Contoh:

Untuk menampilkan navigasi ini, harus dibuatkan sebuah file template baru dengan nama navigation.php. File template navigation.php berisi kode:

<?php if (is_single()) : ?> <div class="navigation"> <p><?php previous_post_link('← %link') ?> <span class="next"><?php next_post_link('%link →') ?></span></p> </div> <?php else : ?> <div class="navigation"> <p><?php next_posts_link('← Previous Entries') ?> <span class="next"><?php previous_posts_link('Next Entries →') ?></span></p> </div> <?php endif; ?>

Kode di atas terdapat di dalam CD tutorial, dengan nama navigation.txt. Dan untuk menampilkannya ke dalam halaman entry post, kode yang digunakan untuk ‘memanggilnya’ adalah:

<?php include (TEMPLATEPATH . '/navigation.php'); ?>

Masukkan kode tersebut ke dalam The Loop. Kode dapat dimasukkan setelah kode <?php endwhile; ?>

4. Membuat Widgetized Sidebar (Widget Ready) Sidebar biasanya adalah sebuah template file dengan nama sidebar.php. Struktur kode Wordpress dalam sidebar secara default dan standar adalah:

<div id="sidebar"> <ul> <li>

<h2 class=”widgettitle”>Judul Sidebar</h2> <ul> <li>list item</li>


</ul> </ul>

</div> Dengan struktur seperti ini, akan memudahkan untuk pembuatan style (CSS), juga agar kompatibel dengan widget plugin, karena susunan seperti ini yang digunakan untuk membangun sebuah widgetized plugin. Sidebar sendiri terdiri dari 2 jenis, yaitu

• Sidebar statis, dan

• Widget. Sidebar Statis, adalah bagian sidebar yang tidak dapat diubah melalui backend, sementara, Widget, adalah bagian sidebar yang dapat diubah-ubah posisinya, ditambah, atau pun dihilangkan dari sidebar melalui backend Wordpress. Untuk mulai membuat template sidebar, buka file template sidebar.php. Yang pertama akan kita buat adalah Sidebar Statis Pada Judul Sidebar, ganti dengan Latest Blog Entries, lalu setelah <ul>, masukkan kode :

<?php query_posts('showposts=10'); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Lalu pada <li>list item</li>, ganti teks list item dengan kode berikut: <a href="<?php the_permalink() ?>"><?php the_title() ?></a> Lalu setelah </li>, sisipkan kode: <?php endwhile; endif; ?>

Sehingga seluruh kode sidebar akan seperti ini:

<div id="sidebar"> <ul> <li>

<h2 class=”widgettitle”>Latest Blog Entries</h2> <ul>

<?php query_posts('showposts=10'); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<li><a href="<?php the_permalink() ?>"><?php the_title() ?></a></li> <?php endwhile; endif; ?> </ul>


</ul> </div>

Sampai pada tahap ini, sidebar sudah dapat berfungsi normal, namun belum widget ready. Untuk membuatnya widget ready, masukkan kode berikut setelah tag <ul>, sebelum tag <h2 class=”widgettitle”> :

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar()) : ?>

Lalu sebelum end tag </li>, sisipkan kode berikut:

<?php endif; ?>

Sehingga secara keseluruhan, kode akan seperti berikut ini:

<div id="sidebar"> <ul> <li><?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar()) : ?> <h2 class=”widgettitle”>Latest Blog Entries</h2> <ul> <?php query_posts('showposts=10'); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <li><a href="<?php the_permalink() ?>"><?php the_title() ?></a></li> <?php endwhile; endif; ?> </ul> <?php endif; ?> </li> </ul> </div>

Simpan perubahan (save) dengan nama sidebar.php. File Template Sidebar sudah selesai dibuat. Namun widget belum dapat berfungsi. Yang diperlukan berikutnya adalah file functions.php yang berguna untuk mendaftarkan sidebar ke sistem Wordpress. Caranya: buat sebuah file text baru, lalu masukkan kode berikut:

<?php if (function_exists('register_sidebar')) register_sidebar(); ?>

Simpan dengan nama functions.php


Sampai pada tahap ini File Template Sidebar sudah Widget Ready. Untuk menambah Widget, login ke control panel (backend) blog, kemudian pilih sidebar widget dari menu Appearance >> Widgets

5. Membuat Footer Di footer biasanya terdapat penanda hak cipta (copyright), dan terkadang juga terdapat note (catatan) mengenai engine, template, dan sebagainya. Untuk membuat footer, digunakan file template footer.php. Buka file tersebut untuk mulai membuatnya. Masukkan kode berikut di antara tag <div id=”footer”> dan end tag </div>

Copyright © 2007 <?php bloginfo(’name’); ?><br>Powered by: <a href=”http://wordpress.org” title=”Wordpress”>Wordpress</a>

Sehingga kode dalam file template footer.php adalah sebagai berikut:

</div> <div id="footer">Copyright © 2007 <?php bloginfo(’name’); ?><br>Powered by: <a href="http://wordpress.org" title="Wordpress" />Wordpress</a></div> </div> </body> </html>

Lalu simpan perubahan.

6. Membuat Screenshot Sampai pada tahap ini, Theme Wordpress sudah selesai. Sekarang, yang perlu dilakukan adalah membuat screenshot theme tersebut untuk agar dapat tampil sebagai ‘thumbnail’ dalam pilihan Theme Wordpress di control panel (backend) blog. Screenshot ini berformat .png, dengan nama file screenshot.png. Ukuran gambarnya adalah 300x225px.


Screenshot.png, 300 x 225px

Tampilan di pilihan theme, Appearance >> Themes:

7. Theme Wordpress Sudah Selesai

Theme Wordpress sudah selesai. Silakan melakukan perubahan pada file style.css sesuai selera.


Referensi :

1. http://wordpress.org, http://codex.wordpress.org/Main_Page, 2. http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-

wordpress-themes-huh/ 3. http://profmustamar.com/

Thanks to : God, Mum, and Dad (alm.) Paraikatte Blogger Makassar ANGINGMAMMIRI.ORG Wordpress WordCamp Indonesia And You… Semoga bermanfaat Salam, Mohammad Mustamar Natsir http://profmustamar.com

creating wordpress theme (wp tutorial)

Documents