Creating Wordpress Theme (Wp Tutorial)

(1)

Untuk WordCamp Indon

Untuk WordCamp Indonesia 200

esia 2009

9 Komunitas Blogger

Komunitas Blogger Makassar ANGINGMAMMIR

Makassar ANGINGMAMMIRI.ORG

I.ORG

http://angingmammiri.org

Mempersembahkan

Tutorial Membuat Wordpress Theme

Oleh: Mohammad Mustamar Natsir

http://profmustamar.com

(2)

Tutorial Membuat Wordpress Theme

Mohammad Mustamar Natsir

http://profmustamar.com

A. INTRO A. INTRO

Yang harus diperhatikan dalam membuat Wordpress theme adalah: Yang harus diperhatikan dalam membuat Wordpress theme adalah:

-- Daftar kebutuhanDaftar kebutuhan

-- Struktur dasar kode html dan css yang validStruktur dasar kode html dan css yang valid

-- Istilah-istilah dalam template WordpressIstilah-istilah dalam template Wordpress

Ok, sekarang mari kita bedah. Ok, sekarang mari kita bedah.

1.

1. Yang dibutuhkan Yang dibutuhkan untuk untuk membuat sebuah membuat sebuah Wordpress themeWordpress theme 1.

1. Local Local Apache, Apache, PHP, PHP, MySQL MySQL SeverSever

Untuk bisa menjalankan engine Wordpress, kita membutuhkan sebuah Untuk bisa menjalankan engine Wordpress, kita membutuhkan sebuah webserver Apache, PHP, dan MySQL. Hampir semua hosting (Linux webserver Apache, PHP, dan MySQL. Hampir semua hosting (Linux Hosting) memilikinya, tapi tidak di komputer kita.

Hosting) memilikinya, tapi tidak di komputer kita.

Nah, karena kita akan menjalankan Wordpress di komputer kita, maka Nah, karena kita akan menjalankan Wordpress di komputer kita, maka kita membutuhkan program yang mampu bekerja sebagai webserver kita membutuhkan program yang mampu bekerja sebagai webserver di komputer kita (Local Server).

di komputer kita (Local Server).

Untuk yang menggunakan sistem operasi Windows, dapat Untuk yang menggunakan sistem operasi Windows, dapat menggunakan beberapa software local server berlisensi opensource, menggunakan beberapa software local server berlisensi opensource, seperti:

seperti:

-- XAMPP (XAMPP (http://www.apachefriends.org/en/xampp.htmlhttp://www.apachefriends.org/en/xampp.html ), atau), atau

-- WAMP (WAMP (http://www.wampserver.com/en/ http://www.wampserver.com/en/ ))

Bagi pengguna Linux, dapat juga menggunakan XAMPP, atau LAMP Bagi pengguna Linux, dapat juga menggunakan XAMPP, atau LAMP (Linux Apache MySQL PHP)

(Linux Apache MySQL PHP)

Cara installasi LAMP dapat dilihat di situs

Cara installasi LAMP dapat dilihat di situs http://lamphowto.com/ http://lamphowto.com/

Pada tutorial ini saya menggunakan XAMPP sebagai local servernya. Pada tutorial ini saya menggunakan XAMPP sebagai local servernya. Sebagai bahan praktek, software XAMPP tersedia di dalam CD Sebagai bahan praktek, software XAMPP tersedia di dalam CD tutorial.

tutorial. (install sekarang!)(install sekarang!) 2.

2. Wordpress Wordpress FileFile

Tentunya yang kita butuhkan selanjutnya adalah Wordpress File. Saya Tentunya yang kita butuhkan selanjutnya adalah Wordpress File. Saya sarankan menggunakan Wordpress rilis terbaru (Wordpress 2.7), sarankan menggunakan Wordpress rilis terbaru (Wordpress 2.7), dapat didownload melalui situs resmi Wordpress dapat didownload melalui situs resmi Wordpress ((www.wordpress.org/downloadwww.wordpress.org/download).).

Sebagai bahan praktek, file Wordpress tersedia di dalam CD tutorial, Sebagai bahan praktek, file Wordpress tersedia di dalam CD tutorial, dengan nama wordpress.zip

(3)

3.

3. Text Text EditorEditor

Untuk mengedit kode-kode template, harus menggunakan teks editor Untuk mengedit kode-kode template, harus menggunakan teks editor standar, seperti notepad atau wordpad.

standar, seperti notepad atau wordpad.

Atau, dapat juga menggunakan web editor, seperti Adobe Dreamweaver, Atau, dapat juga menggunakan web editor, seperti Adobe Dreamweaver, atau yang berlisensi opensource semacam Nvu Web Authoring Software atau yang berlisensi opensource semacam Nvu Web Authoring Software ((http://www.net2.com/nvu/ http://www.net2.com/nvu/ ).).

Dalam tutorial ini saya menggunakan Notepad sebagai text editor. Namun Dalam tutorial ini saya menggunakan Notepad sebagai text editor. Namun jika ingin menggunakan Nvu sebagai editornya, sebagai bahan praktek, jika ingin menggunakan Nvu sebagai editornya, sebagai bahan praktek,

software installasi Nvu tersedia di dalam CD tutorial.

software installasi Nvu tersedia di dalam CD tutorial. (install sekarang!)(install sekarang!)

2.

2. Struktur Struktur dasar kode dasar kode html yhtml yang ang validvalid Struktur kode html yang valid itu:

Struktur kode html yang valid itu: a.

a. harus dimulai dengan sebuah harus dimulai dengan sebuah tag <> dan tag <> dan ditutup dengan end ditutup dengan end tag </>tag </> Contoh : Contoh : <html> <html> <head> <head> <title>title text</title> <title>title text</title> </head> </head> <body> <body> </body> </body> </html> </html>

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

seperti :

b.

b. Struktur kode Struktur kode html html harus harus berurutan. Jangan berurutan. Jangan terbalik-baliterbalik-balikk Contoh struktur yang salah:

Contoh struktur yang salah:

<div> <div> <ul> <ul> <li> text <li> text </ul> </ul> </li> </li> </div> </div> Harusnya: Harusnya: <div> <div> <ul> <ul>

(4)

<li> text <li> text </li> </li> </ul> </ul> </div> </div> 3.

3. Istilah-istiIstilah-istilah lah dalam dalam pembuatan pembuatan Wordpress Wordpress themetheme

Kita juga harus mengetahui istilah-istilah yang sering digunakan dalam Kita juga harus mengetahui istilah-istilah yang sering digunakan dalam template Wordpress. Istilah-istilah ini adalah standar yang digunakan template Wordpress. Istilah-istilah ini adalah standar yang digunakan dalam pengembangan Wordpress di seluruh dunia.

dalam pengembangan Wordpress di seluruh dunia. Istilah-ist

Istilah-istilah itu ilah itu antara lain:antara lain: a. Template

a. Template

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

layout, tanpa harus menulis kode yang sama berulang-ulang. b.

b. Template Template FileFile

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

sidebar.php, home.php c.

c. Theme Theme / / Wordpress Wordpress ThemeTheme

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

Jadi, Wordpress Theme dan Wordpress Template berbeda. Catat:Catat: BERBEDA!

BERBEDA! d. Post

d. Post

Sederhananya, post adalah entry utama yang kita tampilkan di blog. Sederhananya, post adalah entry utama yang kita tampilkan di blog. e. Page

e. Page

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

tags, dll.

4.

4. Memahami hirarki Memahami hirarki dan dan struktur file struktur file di Wordpressdi Wordpress

Setelah memahami istilah-istilah yang digunakan dalam pembuatan Setelah memahami istilah-istilah yang digunakan dalam pembuatan Wordpress theme, kita juga harus memahami struktur file di dalam Wordpress theme, kita juga harus memahami struktur file di dalam Wordpress theme.

Wordpress theme. Pertama,

Pertama,

File yang dibutuhkan untuk membangun sebuah theme sebenarnya cukup File yang dibutuhkan untuk membangun sebuah theme sebenarnya cukup hanya dengan 2 file, yaitu index.php dan style.css, yang keduanya berada hanya dengan 2 file, yaitu index.php dan style.css, yang keduanya berada dalam sebuah folder theme. Semua tampilan blog akan diarahkan ke file dalam sebuah folder theme. Semua tampilan blog akan diarahkan ke file index.php, dan style.css sebagai pendukung untuk mengatur layout blog. index.php, dan style.css sebagai pendukung untuk mengatur layout blog.

(5)

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

file itu antara lain adalah:adalah:

• • style.cssstyle.css • • index.phpindex.php • • home.phphome.php • • single.phpsingle.php • • page.phppage.php • • archive.phparchive.php • • category.phpcategory.php • • search.phpsearch.php • • 404.php404.php • • comments.phpcomments.php • • comments-popup.phpcomments-popup.php • • author.phpauthor.php • • date.phpdate.php

Semua file template itu harus disimpan dalam sebuah folder theme Semua file template itu harus disimpan dalam sebuah folder theme

dengan nama folder tertentu, misalnya ‘ThemeSaya’, dan disimpan dalam dengan nama folder tertentu, misalnya ‘ThemeSaya’, dan disimpan dalam folder /wp-contents/themes/ dalam folder installasi Wordpress.

folder /wp-contents/themes/ dalam folder installasi Wordpress. Berikut ini adalah hirarki akses blog ke dalam theme.

(6)

Diambil dari:

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

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

ada.

B.

B. PRAKTEK MEMPRAKTEK MEMBUAT WORDPRESS BUAT WORDPRESS THEMETHEME

Ok, sekarang setelah dasar-dasar teori tentang Wordpress theme sudah Ok, sekarang setelah dasar-dasar teori tentang Wordpress theme sudah diketahui, saatnya untuk memulai praktek pembuatannya.

diketahui, saatnya untuk memulai praktek pembuatannya.

Yang harus dilakukan dalam praktek ini adalah: Yang harus dilakukan dalam praktek ini adalah:

1.

1. Menginstall dan Menginstall dan menjalankan menjalankan Wordpress di Wordpress di komputerkomputer 2.

2. Membuat Membuat sebuah sebuah template htmtemplate html+css l+css komplit.komplit. 3.

3. Membuat Membuat file file template.template. 1.

1. Menginstall dan Menginstall dan menjalankan menjalankan Wordpress di Wordpress di komputerkomputer

•

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

• Setelah terinstall, jalankan Apache, MySQL, dan PHP server melaluiSetelah terinstall, jalankan Apache, MySQL, dan PHP server melalui

XAMPP Control Panel. Pastikan di XAMPP Control Panel, status XAMPP Control Panel. Pastikan di XAMPP Control Panel, status Apache dan MySQL adalah ‘running’.

Apache dan MySQL adalah ‘running’.

•

• Exstrak file Wordpress (wordpress.zip, tersedia di CD tutorial) ke folderExstrak file Wordpress (wordpress.zip, tersedia di CD tutorial) ke folder

htdocs di dalam folder installasi XAMPP. Jika menggunakan Windows, htdocs di dalam folder installasi XAMPP. Jika menggunakan Windows, secara default folder installasi XAMPP terdapat di drive C:\xampp

secara default folder installasi XAMPP terdapat di drive C:\xampp

•

• Buat sebuah MySQL database melalui PHPMyAdmin, dengan caraBuat sebuah MySQL database melalui PHPMyAdmin, dengan cara

mengakses:

mengakses: http://localhost/phpmyadminhttp://localhost/phpmyadmin lewat browser, dan membuatlewat browser, dan membuat sebuah database dengan nama tertentu, misalnya

(7)

•

• Akses wordpress melalui browser,Akses wordpress melalui browser, http://localhost/wordpresshttp://localhost/wordpress, isikan, isikan

data mengenai database sesuai dengan database yang baru saja data mengenai database sesuai dengan database yang baru saja dibuat. Isikan username dengan ‘root’, dan field password dibuat. Isikan username dengan ‘root’, dan field password dikosongkan.

dikosongkan.

•

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

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

menu Users >> Your Profile

•

• Wordpress sudah selesai diinstall, dan dapat langsung dijalankanWordpress sudah selesai diinstall, dan dapat langsung dijalankan

melalui browser, dengan alamat

melalui browser, dengan alamat http://localhost/wordpresshttp://localhost/wordpress.. 2.

2. Membuat Membuat sebuah sebuah template html+css template html+css komplit.komplit.

Setelah selesai menginstall Wordpress di komputer, yang harus dilakukan Setelah selesai menginstall Wordpress di komputer, yang harus dilakukan adalah membuat sebuah template html dan css komplit. Template ini adalah adalah membuat sebuah template html dan css komplit. Template ini adalah layout dasar blog yang akan kita buat.

layout dasar blog yang akan kita buat.

Anda dapat membuat sebuah template html dan css sendiri, namun untuk Anda dapat membuat sebuah template html dan css sendiri, namun untuk mempersingkat waktu, di dalam CD tutorial terdapat sebuah template mempersingkat waktu, di dalam CD tutorial terdapat sebuah template html+css yang akan digunakan untuk membuat file template Wordpress.

(8)

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

wp-content/themes/ di dalam folder installasi Wordpress. 3.

3. Membuat Membuat file file templatetemplate

Setelah memindahkan folder mywptheme ke dalam folder installasi Setelah memindahkan folder mywptheme ke dalam folder installasi Wordpress, yang harus dilakukan sekarang adalah memecah file layout.html Wordpress, yang harus dilakukan sekarang adalah memecah file layout.html yang terdapat di dalam folder mywptheme menjadi file-file template yang terdapat di dalam folder mywptheme menjadi file-file template Wordpress.

Wordpress.

Buka file layout.html yang terdapat di dalam folder mywptheme menggunakan Buka file layout.html yang terdapat di dalam folder mywptheme menggunakan text editor.

text editor. a.

a. Membuat Membuat file file style.cssstyle.css Style.css adalah file

Style.css adalah file cascade stylesheet (CSS),cascade stylesheet (CSS), yangyang fungsinya adalahfungsinya adalah untuk mengatur tampilan web. CSS adalah kode yang di dalamnya untuk mengatur tampilan web. CSS adalah kode yang di dalamnya terdapat kode-kode untuk mewakili warna, ukuran (size), garis, border, terdapat kode-kode untuk mewakili warna, ukuran (size), garis, border, posisi, dan sebagainya.

posisi, dan sebagainya.

Dalam praktek kali ini, kode CSS sudah tersedia di dalam file

Dalam praktek kali ini, kode CSS sudah tersedia di dalam file layout.htmllayout.html.. Buka file tersebut.

Buka file tersebut. Setelah terbuka,

Setelah terbuka, cutcut text mulai dari <style type=”text/css”> sampaitext mulai dari <style type=”text/css”> sampai </style> seperti yang terdapat pada gambar di bawah:

</style> seperti yang terdapat pada gambar di bawah:

… …

(9)

Lalu buat sebuah text file baru, lalu

Lalu buat sebuah text file baru, lalu pastepaste ke dalamnya.ke dalamnya.

Lalu tambahkan text berikut ini pada baris paling atas file tersebut : Lalu tambahkan text berikut ini pada baris paling atas file tersebut :

/* /*

Theme

Theme Name: Name: MyWPthemeMyWPtheme

Theme

Theme URI: URI: http:/http://profmustamar.com/profmustamar.com Descripti

Description: on: Theme Theme PertamakuPertamaku

Version: 1.0

Author:

Author: Mohammad Mohammad Mustamar Mustamar NatsirNatsir

Author

Author URI: URI: http:/http://profmustamar.com/profmustamar.com */

*/

Isikan Theme Name, Theme URl, Description, Version, Author, dan Isikan Theme Name, Theme URl, Description, Version, Author, dan Author URl dengan data sesuai keinginan Anda, lalu save ke dalam folder Author URl dengan data sesuai keinginan Anda, lalu save ke dalam folder mywptheme dengan nama

mywptheme dengan nama style.cssstyle.css..

Setelah jadi, susunan kode akan seperti kode dalam file

Setelah jadi, susunan kode akan seperti kode dalam file contoh-style.txtcontoh-style.txtyangyang

terdalam CD tutorial. terdalam CD tutorial. b.

b. Membuat Membuat header.phpheader.php

Buat text berikut ini pada halaman baru text file: 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"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <head>

charset=<?php bloginfo('charset'); ?>" /> charset=<?php bloginfo('charset'); ?>" />

<?php bloginfo('name'); ?></title>

this for stats -->

media="screen" />

Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link

<?php wp_head(); ?> </head>

(10)

<div i

<h1 class="judul"><a href="<?php bloginfo('url'); ?>" title="<?php <h1 class="judul"><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>

bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>

</div> <div

<div id="main-bid="main-body">ody"> <div

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

dengan nama header.phpheader.php.. c.

c. Membuat Membuat index.phpindex.php

Dari file layout.html, cari code

Dari file layout.html, cari code berikut ini:berikut ini:

<h2 class="judul-entry"

<h2 class="judul-entry">judul entry >judul entry di sini</h2>di sini</h2>

<h5 class="tanggal-author">>> tanggal 27 maret 2009, by Admin</h5> <h5 class="tanggal-author">>> tanggal 27 maret 2009, by Admin</h5> <p>Postingan kamu nanti ada di sini. Silakan diedit lagi yaa... Kalau mau <p>Postingan kamu nanti ada di sini. Silakan diedit lagi yaa... Kalau mau jalan- jalan ke blog saya, silakan langsung ke: <a

jalan ke blog saya, silakan langsung ke: <a

href="http://profmustamar.com">www.profmustamar.com</a></p> href="http://profmustamar.com">www.profmustamar.com</a></p> <p><strong>ini strong/bold</strong>:</p> <p><strong>ini strong/bold</strong>:</p> <ul> <ul>

<li>ini unordered list</li> <li>ini unordered list</li> <li>ini unordered list juga</li> <li>ini unordered list juga</li> </ul>

</ul> <ol> <ol>

<li>ini ordered list</li> <li>ini ordered list</li> <li>ini ordered list</li> <li>ini ordered list</li> </ol>

</ol>

<blockquote>ka

<blockquote>kalau ini blockquoted text. kalau lau ini blockquoted text. kalau ini blockquoted text. kalau iniini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text.

blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text. kalau inikalau ini blockquoted text. kalau ini blockquoted text.

blockquoted text. </blockquote</blockquote>>

<div class="endpost">diposting pakai kategori: tewasd, sdfasfasd, asd, as, asd <div class="endpost">diposting pakai kategori: tewasd, sdfasfasd, asd, as, asd asdf a,</div> asdf a,</div> </div> </div> </div> </div>

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

codenya:

<?php get_header(); ?> <?php get_header(); ?>

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

‘memanggil’ sidebar dan footer template. Berikut ini codenya:

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

(11)

Simpan file dengan nama

Simpan file dengan nama index.phpindex.php.. d.

d. Membuat Membuat sidebar.phpsidebar.php

Dari file layout.html, cari kode

Dari file layout.html, cari kode berikut:berikut:

<div

<div id="sidebaid="sidebar">r"> <ul> <ul> <li> <li> <h2>Judul Widget</h2> <h2>Judul Widget</h2> <ul> <ul> <li>listnya item</li> <li>listnya item</li> <li>listnya item</li> <li>listnya item</li> <li>listnya item</li> <li>listnya item</li> <li>listnya item</li> <li>listnya item</li> </ul> </ul> </li> </li> </ul> </ul> </div> </div> Copy-paste

Copy-paste code code tersebut, tersebut, ke ke dalam dalam sebuah sebuah file file text text baru, baru, lalu lalu simpansimpan dengan nama

dengan nama sidebar.phpsidebar.php .. e.

e. Membuat Membuat footer.phpfooter.php

Masih dari file layout.html, cari kode berikut: Masih dari file layout.html, cari kode berikut:

</div> </div>

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

Copy-paste ke dalam file text baru, lalu simpan dengan nama

Copy-paste ke dalam file text baru, lalu simpan dengan nama footer.phpfooter.php.. Sampai pada tahap ini, Anda sudah dapat melihat layout ‘bayangan’ Sampai pada tahap ini, Anda sudah dapat melihat layout ‘bayangan’ theme Wordpress yang sedang kita buat.

theme Wordpress yang sedang kita buat.

Untuk melihatnya, akses blog Wordpress Anda melalui browser: Untuk melihatnya, akses blog Wordpress Anda melalui browser: http://localhost/wordpress

http://localhost/wordpress..

f.

f. Bekerja Bekerja dengan dengan The The LoopLoop

The Loop adalah kode utama yang fungsinya ‘memanggil’ entry demi The Loop adalah kode utama yang fungsinya ‘memanggil’ entry demi entry post blog. Untuk itu, The Loop paling minimal harus dibuat/ditulis di entry post blog. Untuk itu, The Loop paling minimal harus dibuat/ditulis di dalam file template index.php.

dalam file template index.php.

Untuk mulai bekerja dengan The Loop, buka file

Untuk mulai bekerja dengan The Loop, buka file index.phpindex.php.. Pembuka dan penutup The Loop

(12)

Setelah kode

Setelah kode <?php get_header(); ?><?php get_header(); ?> Masukkan kode pembuka The LoopMasukkan kode pembuka The Loop

berikut ini: berikut ini:

<?php if (have_posts()) : ?> <?php if (have_posts()) : ?>

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

Lalu, masukkan kode berikut ini sebagai penutup The Loop: Lalu, masukkan kode berikut ini sebagai penutup The Loop:

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

tepat sebelum kode: tepat sebelum kode:

</div> </div>

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

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

entry post, tanggal post, author, dll. g.

g. Bekerja dengan Bekerja dengan The The ContentContent The Content

The Content adalah kumpulan kode-kode yang bertugas ‘memanggil’adalah kumpulan kode-kode yang bertugas ‘memanggil’ item-item entry. Kode-kode dalam The Content fungsinya menampilkan item-item entry. Kode-kode dalam The Content fungsinya menampilkan item seperti, judul post, entry, author, tanggal, kategori, tag, dan lain-lain. item seperti, judul post, entry, author, tanggal, kategori, tag, dan lain-lain. The Content

The Content berada di dalam The Loop, dan harus berada (minimal) diberada di dalam The Loop, dan harus berada (minimal) di dalam template file index.php.

dalam template file index.php.

Untuk mulai bekerja dengan The Content, buka file index.php Untuk mulai bekerja dengan The Content, buka file index.php menggunakan teks editor.

menggunakan teks editor. Menam

Menampilkan Post Tpilkan Post Titleitle

Kode berikutnya adalah kode untuk ‘memanggil’ judul post. Kode berikutnya adalah kode untuk ‘memanggil’ judul post.

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

?>"><?php the_title(); ?></a>

Masukkan kode di atas itu, menggantikan tulisan ‘judul entry di sini’, Masukkan kode di atas itu, menggantikan tulisan ‘judul entry di sini’, setelah kode

setelah kode <h2 id=”judul-entry”><h2 id=”judul-entry”>

Menampilkan Tanggal dan Author Menampilkan Tanggal dan Author

Selanjutnya adalah kode untuk ‘memanggil’ tanggal dan penulis (author) Selanjutnya adalah kode untuk ‘memanggil’ tanggal dan penulis (author) post. Kode tersebut adalah:

post. Kode tersebut adalah:

<h5 cl

the_author() ?> the_author() ?> the_author() ?>the_author() ?>the_author() ?>the_author() ?></h5>the_author() ?></h5>

(13)

Masukkan kode di atas, menggantikan kode berikut: Masukkan kode di atas, menggantikan kode berikut:

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

Menampilkan Entry Post Menampilkan Entry Post

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

ini:

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

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

<p>Postingan kamu nanti ada di sini. Silakan diedit lagi yaa... Kalau mau jalan-jalan <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> href="http://profmustamar.com">www.profmustamar.com</a></p> <p><strong>ini strong/bold</strong>:</p> <p><strong>ini strong/bold</strong>:</p> <ul> <ul>

<li>ini unordered list</li> <li>ini unordered list</li> <li>ini unordered list

<li>ini unordered list juga</li>juga</li> </ul>

</ul> <ol> <ol>

<li>ini ordered list</li> <li>ini ordered list</li> <li>ini ordered list</li> <li>ini ordered list</li> </ol>

</ol>

<blockquote>kalau ini blockquoted text. kalau ini blockquoted text. kalau <blockquote>kalau ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text. kalau ini ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text. kalau ini blockquoted text.

blockquoted text. </blockquote</blockquote>>

Menampilkan Kategori Post Menampilkan Kategori Post

Memasukkan kategori post, dapat menggunakan kode berikut: Memasukkan kategori post, dapat menggunakan kode berikut:

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

Masukkan kode di atas, menggantikan text di antara tag: Masukkan kode di atas, menggantikan text di antara tag:

<div

<div class="endpclass="endpost">ost"> dan tagdan tag </div</div>>

Sehingga kode akan menjadi seperti ini: Sehingga kode akan menjadi seperti ini:

<div class="endpost"><strong>Category: </strong><?php the_category(', ') ?></div> <div class="endpost"><strong>Category: </strong><?php the_category(', ') ?></div>

Sampai pada tahap ini, entry post blog sudah dapat dilihat, namun belum Sampai pada tahap ini, entry post blog sudah dapat dilihat, namun belum dapat menampilkan komentar yang masuk.

dapat menampilkan komentar yang masuk. Menampilkan Jumlah Komentar Masuk Menampilkan Jumlah Komentar Masuk Dapat menggunakan kode berikut ini: Dapat menggunakan kode berikut ini:

(14)

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

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

kode category.

h.

h. Membuat Membuat dan dan menampilkan menampilkan Comments Comments TemplateTemplate

Comments Template berisi kode untuk form komentar dan kode untuk Comments Template berisi kode untuk form komentar dan kode untuk menampilkan daftar komentar yang sudah masuk ke dalam post.

menampilkan daftar komentar yang sudah masuk ke dalam post. Berikut ini kodenya:

Berikut ini kodenya:

<?php // Do not delete these lines <?php // Do not delete these lines

if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))

die ('Please do not load this page directly. Thanks!'); die ('Please do not load this page directly. Thanks!'); if (!empty($post->post_password)) { // if there's a password if (!empty($post->post_password)) { // if there's a password

if ($_COOKIE['wp-postpass_' .

if ($_COOKIE['wp-postpass_' . COOKIEHASH] != COOKIEHASH] != $post->post_$post->post_password) password) { { //// and it doesn't match the cookie

and it doesn't match the cookie ?>

?>

the password to view comments."); ?><p> <?php

<?php return; return; } } }}

/* Function for seperating comments from track- and pingbacks. */ /* Function for seperating comments from track- and pingbacks. */

function k2_comment_type_detection($commenttxt = 'Comment',

$trackbacktxt = 'Trackback', $pingbacktxt = 'Pingback') { $trackbacktxt = 'Trackback', $pingbacktxt = 'Pingback') {

global $comment; global $comment;

if (preg_match('|trackback|', $comment->comment_type)) if (preg_match('|trackback|', $comment->comment_type))

return

return $trackbac$trackbacktxt;ktxt;

elseif (preg_match('|pingback|', $comment->comment_type)) elseif (preg_match('|pingback|', $comment->comment_type))

return

return $pingbacktxt$pingbacktxt;; else

else

return

return $commentt$commenttxt;xt; }} $templatedir = get_bloginfo('template_directory'); $templatedir = get_bloginfo('template_directory'); $comment_number = 1; $comment_number = 1; ?> ?>

<?php if (($comments) or ('open' == $post-> comment_status)) { ?> <?php if (($comments) or ('open' == $post-> comment_status)) { ?> <div

(15)

<?php if ($comments) { ?> <?php if ($comments) { ?> <dl

<?php $count_pings = 1; foreach ($comments as $comment) { ?> <?php $count_pings = 1; foreach ($comments as $comment) { ?>

<dt id="comment-<?php comment_ID() ?>"<?php if <dt id="comment-<?php comment_ID() ?>"<?php if ($comment->comment_author_email == get_the_author_email()) { ?> class="author"<?php } ?>> >comment_author_email == get_the_author_email()) { ?> class="author"<?php } ?>> <span class="comment_num"><a href="#comment-<?php <span class="comment_num"><a href="#comment-<?php

comment_ID() ?>" title="Permalink to this comment">#<?php

echo($comment_number); ?></a></span> echo($comment_number); ?></a></span>

<strong><?php comment_author_link() ?> </strong>on <strong><?php comment_author_link() ?> </strong>on <?php comment_date('m.d.y') ?> at <?php comment_time() ?> <?php comment_date('m.d.y') ?> at <?php comment_time() ?> </dt> </dt> <dd class="entry<?php if ($comment->comment_author_email == <dd class="entry<?php if ($comment->comment_author_email == get_the_author_email()) { ?> author<?php } ?>"> get_the_author_email()) { ?> author<?php } ?>">

<?php echo get_avatar( $comment, 40 ); ?> <?php echo get_avatar( $comment, 40 ); ?> <?php comment_text() ?>

<?php comment_text() ?>

<?php if ($comment->comment_approved == '0') : ?> <?php if ($comment->comment_approved == '0') : ?>

<p><strong>Your comment is awaiting

moderation.</strong></p> moderation.</strong></p> <?php endif; ?> <?php endif; ?> </dd> </dd>

<?php $comment_number++; } /* end for each comment */ ?> <?php $comment_number++; } /* end for each comment */ ?> </dl>

</dl>

<?php } else { // this is displayed if there are no comments so far ?> <?php } else { // this is displayed if there are no comments so far ?>

<?php if ('open' == $post-> comment_status) { ?> <?php if ('open' == $post-> comment_status) { ?>

<div

<p>There are no comments yet...Kick things off by filling <p>There are no comments yet...Kick things off by filling out the f

out the form below.</p>orm below.</p> </div> </div>

<?php } else { // comments are closed ?> <?php } else { // comments are closed ?>

<?php if (is_single) { // To

<?php if (is_single) { // To hide comments entirely on Pages withouthide comments entirely on Pages without comments ?>

comments ?>

<div

<p>Like gas stations in rural Texas after 10 pm, comments <p>Like gas stations in rural Texas after 10 pm, comments are closed.</p> are closed.</p> </div> </div> <?php } ?> <?php } ?> <?php } ?> <?php } ?> <?php } ?> <?php } ?>

<?php if ('open' == $post-> comment_status) : ?> <?php if ('open' == $post-> comment_status) : ?>

(16)

<?php if ( get_option('comment_registration') && !$user_ID ) : ?> <?php if ( get_option('comment_registration') && !$user_ID ) : ?>

<p class="unstyled">You must <a href="<?php echo <p class="unstyled">You must <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">log get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">log in</a> to post a comment.</p>

in</a> to post a comment.</p> <?php else : ?> <?php else : ?>

<h3 id="respond">Leave a Comment</h3> <h3 id="respond">Leave a Comment</h3>

<form action="<?php echo get_option('siteurl'); <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="comment_form">

comments-post.php" method="post" id="comment_form"> <?php if ( $user_ID ) { ?>

<?php if ( $user_ID ) { ?>

<p class="unstyled">Logged in as <a href="<?php <p class="unstyled">Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity;

?></a>. <a href="<?php echo get_option('siteurl');

?>/wp-?></a>. <a href="<?php echo get_option('siteurl');

?>/wp-login.php?action=logout&_wpnonce=246717c231" title="<?php _e('Log out of this login.php?action=logout&_wpnonce=246717c231" title="<?php _e('Log out of this account') ?>">Logout »</a></p>

account') ?>">Logout »</a></p> <?php } ?> <?php } ?>

<?php if ( !$user_ID ) { ?> <?php if ( !$user_ID ) { ?>

<p><input class="text_input" type="text"

name="author" id="author" value="<?php echo $comment_author; ?>"

name="author" id="author" value="<?php echo $comment_author; ?>" tabindex="1"tabindex="1" /><label for="author"><strong>Name</strong></label></p>

/><label for="author"><strong>Name</strong></label></p>

name="email" id="email" value="<?php echo $comment_author_email; ?>" name="email" id="email" value="<?php echo $comment_author_email; ?>" tabindex="2" /><label for="email"><strong>Mail</strong></label></p>

tabindex="2" /><label for="email"><strong>Mail</strong></label></p>

name="url" id="url" value="<?php echo $comment_author_url; ?>" tabindex="3" name="url" id="url" value="<?php echo $comment_author_url; ?>" tabindex="3" /><label for="url"><strong>Website</strong></label></p>

/><label for="url"><strong>Website</strong></label></p> <?php } ?>

<?php } ?>

use these tags: <?php echo allowed_tags(); ?></small></p>-->

<p><textarea class="text_input text_area"

name="comment" id="comment" rows="7" tabindex="4"></textarea></p> name="comment" id="comment" rows="7" tabindex="4"></textarea></p>

<?php if <?php if (function_exists('show_subscription_checkbox')) { show_subscription_checkbox(); } (function_exists('show_subscription_checkbox')) { show_subscription_checkbox(); } ?> ?> <p> <p> <input name="submit" <input name="submit"

class="form_submit" type="submit" id="submit" tabindex="5" value="Submit" /> class="form_submit" type="submit" id="submit" tabindex="5" value="Submit" />

<input type="hidden"

name="comment_post_ID" value="<?php echo $id; ?>" /> name="comment_post_ID" value="<?php echo $id; ?>" />

</p> </p> <?php do_action('comment_form', $post->ID); ?> <?php do_action('comment_form', $post->ID); ?> </form> </form>

<?php endif; // If registration required and not logged in ?> <?php endif; // If registration required and not logged in ?> <?php endif; // if you delete this the sky will fall on your head ?>

<?php endif; // if you delete this the sky will fall on your head ?> </div>

</div>  <?php } ?>

(17)

Buatlah kode di atas sebagai sebuah file baru dengan nama Buatlah kode di atas sebagai sebuah file baru dengan nama comments.php.

comments.php. Untuk mempermudah, kode tersebut tersedia di dalamUntuk mempermudah, kode tersebut tersedia di dalam CD tutorial, dengan nama

CD tutorial, dengan nama comments.txtcomments.txt ..

Untuk menampilkan template ini ke dalam layout blog, kode yang Untuk menampilkan template ini ke dalam layout blog, kode yang digunakan adalah:

digunakan adalah:

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

Kode itu harus dimasukkan ke dalam The Loop. Caranya, buka file Kode itu harus dimasukkan ke dalam The Loop. Caranya, buka file index.php

index.php dengan text editor. Masukkan kode tersebut di antara tag:dengan text editor. Masukkan kode tersebut di antara tag:

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

Sehingga kode menjadi: Sehingga kode menjadi:

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

<?php endwhile; ?><?php comments_template()<?php comments_template(); ?><?php comments_templa<?php comments_template(); ?><?php <?php comments_temp<?php comments_template()comments_template()late()te(); ?>; ?>; ?><?php endif; ?>; ?><?php endif; ?>; ?>; ?>

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

i.

i. Membuat Membuat NavigasiNavigasi

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

(18)

Contoh: Contoh:

Untuk menampilkan navigasi ini, harus dibuatkan sebuah file template Untuk menampilkan navigasi ini, harus dibuatkan sebuah file template baru dengan nama

baru dengan nama navigation.phpnavigation.php .. File template navigation.php berisi kode: File template navigation.php berisi kode:

<?php if (is_single()) : ?> <?php if (is_single()) : ?> <div

<div class="navclass="navigation">igation">

</div>

<?php else : ?> <?php else : ?> <div

<div class="navclass="navigation">igation">

<span class="next"><?php previous_posts_link('Next Entries →')

?></span></p> ?></span></p> </div> </div> <?php endif; ?> <?php endif; ?>

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

digunakan untuk ‘memanggilnya’ adalah:

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

Masukkan kode tersebut ke dalam The Loop. Kode dapat dimasukkan Masukkan kode tersebut ke dalam The Loop. Kode dapat dimasukkan setelah kode

setelah kode <?php endwhile; ?><?php endwhile; ?>

4.

4. Membuat Membuat WidgetizWidgetized ed Sidebar Sidebar (Widget (Widget Ready)Ready)

Sidebar biasanya adalah sebuah template file dengan nama sidebar.php. Sidebar biasanya adalah sebuah template file dengan nama sidebar.php. Struktur kode Wordpress dalam sidebar secara default dan standar adalah: Struktur kode Wordpress dalam sidebar secara default dan standar adalah:

<div

<h2

<h2 class=”wiclass=”widgettitle”>Judul dgettitle”>Judul Sidebar</Sidebar</h2>h2> <ul>

<ul>

(19)

</ul> </ul> </ul> </ul> </div> </div>

Dengan struktur seperti ini, akan memudahkan untuk pembuatan style (CSS), Dengan struktur seperti ini, akan memudahkan untuk pembuatan style (CSS), juga agar kompatibel dengan widget plugin, karena susunan seperti ini yang juga agar kompatibel dengan widget plugin, karena susunan seperti ini yang

digunakan untuk membangun sebuah widgetized plugin. digunakan untuk membangun sebuah widgetized plugin. Sidebar sendiri terdiri dari 2 jenis, yaitu

Sidebar sendiri terdiri dari 2 jenis, yaitu

•

• Sidebar statis, danSidebar statis, dan •

• Widget.Widget.

Sidebar Statis

Sidebar Statis, adalah bagian sidebar yang tidak dapat diubah melalui, adalah bagian sidebar yang tidak dapat diubah melalui backend, sementara,

backend, sementara, Widget

Widget, adalah bagian sidebar yang dapat diubah-ubah posisinya, ditambah,, adalah bagian sidebar yang dapat diubah-ubah posisinya, ditambah, atau pun dihilangkan dari sidebar melalui backend Wordpress.

atau pun dihilangkan dari sidebar melalui backend Wordpress. Untuk mulai membuat template sidebar, buka file template

Untuk mulai membuat template sidebar, buka file template sidebar.phpsidebar.php..

Yang pertama akan kita buat adalah

Yang pertama akan kita buat adalah Sidebar StatisSidebar Statis Pada

Pada Judul SidebarJudul Sidebar, ganti dengan, ganti dengan Latest Blog EntriesLatest Blog Entries, lalu setelah, lalu setelah <ul><ul>, masukkan, masukkan kode :

kode :

<?php query_posts('showposts=10'); ?> <?php query_posts('showposts=10'); ?>

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

Lalu pada <li>list item</li>, ganti teks list item dengan kode berikut: Lalu pada <li>list item</li>, ganti teks list item dengan kode berikut:

Lalu setelah </li>, sisipkan kode: Lalu setelah </li>, sisipkan kode:

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

Sehingga seluruh kode sidebar akan seperti ini: Sehingga seluruh kode sidebar akan seperti ini:

<div

<h2

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

<ul>

(20)

</ul> </ul> </div>

</div>

Sampai pada tahap ini, sidebar sudah dapat berfungsi normal, namun belum Sampai pada tahap ini, sidebar sudah dapat berfungsi normal, namun belum widget ready.

widget ready.

Untuk membuatnya

Untuk membuatnya widget readywidget ready, masukkan kode berikut setelah tag, masukkan kode berikut setelah tag <ul><ul>,,

sebelum tag

sebelum tag <h2 class=”wi<h2 class=”widgettitle”>dgettitle”>:: <?php if

<?php if (!function_exists(!function_exists('dynamic_s('dynamic_sidebar') || idebar') || !dynamic!dynamic_sidebar()) : _sidebar()) : ?>?>

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

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

Sehingga secara keseluruhan, kode akan seperti berikut ini: Sehingga secara keseluruhan, kode akan seperti berikut ini:

<div

<ul>

<li><?php if

<li><?php if (!function_exists(!function_exists('dynamic_s('dynamic_sidebar') || idebar') || !dynam!dynamic_sidebar()) : ic_sidebar()) : ?>?> <h2

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

<ul>

<li><a href="<?php the_permalink() ?>"><?php the_title()

?></a></li> ?></a></li> <?php endwhile; endif; ?> <?php endwhile; endif; ?> </ul> </ul> <?php endif; ?> <?php endif; ?> </li> </li> </ul> </ul> </div> </div>

Simpan perubahan (save) dengan nama

Simpan perubahan (save) dengan nama sidebar.phpsidebar.php..

File Template Sidebar sudah selesai dibuat. Namun widget belum dapat File Template Sidebar sudah selesai dibuat. Namun widget belum dapat berfungsi. Yang diperlukan berikutnya adalah file

berfungsi. Yang diperlukan berikutnya adalah file functions.phpfunctions.php yangyang berguna untuk mendaftarkan sidebar ke sistem Wordpress.

berguna untuk mendaftarkan sidebar ke sistem Wordpress. Caranya: buat sebuah file text baru, lalu masukkan kode berikut: Caranya: buat sebuah file text baru, lalu masukkan kode berikut:

<?php <?php

if

if (function_exists(function_exists('register('register_sidebar'))_sidebar')) register_sidebar();

register_sidebar(); ?>

?>

Simpan dengan nama

(21)

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

sidebar widget dari menu Appearance >> WidgetsAppearance >> Widgets

5.

5. Membuat Membuat FooterFooter

Di footer biasanya terdapat penanda hak cipta (copyright), dan terkadang Di footer biasanya terdapat penanda hak cipta (copyright), dan terkadang juga terdapat note (catatan) mengenai engine, template, dan sebagainya. juga terdapat note (catatan) mengenai engine, template, dan sebagainya.

Untuk membuat footer, digunakan file template

Untuk membuat footer, digunakan file template footer.phpfooter.php. Buka file . Buka file tersebuttersebut untuk mulai membuatnya.

untuk mulai membuatnya.

Masukkan kode berikut di antara tag <div id=”footer”> dan end tag </div> Masukkan kode berikut di antara tag <div id=”footer”> dan end tag </div>

href=”

href=”http://wordpress.org http://wordpress.org ” title=”Wordpress”>Wordpress</a>” title=”Wordpress”>Wordpress</a>

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

</div> </div>

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

href="http://wordpress.org" title="Wordpress" />Wordpress</a></div> </div> </div> </body> </body> </html> </html>

Lalu simpan perubahan. Lalu simpan perubahan. 6.

6. Membuat Membuat ScreenshotScreenshot

Sampai pada tahap ini, Theme Wordpress sudah selesai. Sekarang, yang Sampai pada tahap ini, Theme Wordpress sudah selesai. Sekarang, yang perlu dilakukan adalah membuat

perlu dilakukan adalah membuat screenshoscreenshot theme tersebut untuk agart theme tersebut untuk agar dapat tampil sebagai ‘thumbnail’ dalam pilihan Theme Wordpress di control dapat tampil sebagai ‘thumbnail’ dalam pilihan Theme Wordpress di control panel (backend) blog.

panel (backend) blog.

Screenshot ini berformat .png, dengan nama file screenshot.png. Ukuran Screenshot ini berformat .png, dengan nama file screenshot.png. Ukuran gambarnya adalah 300x225px.

(22)

Screenshot.png, 300 x 225px Screenshot.png, 300 x 225px

Tampilan di pilihan theme, Appearance >> Themes: Tampilan di pilihan theme, Appearance >> Themes:

7.

7. Theme Theme Wordpress Wordpress Sudah Sudah SelesaiSelesai

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

(23)

Referensi : Referensi :

1.

1. http://wordpress.orghttp://wordpress.org,, http://codex.wordpress.org/Main_Pagehttp://codex.wordpress.org/Main_Page ,, 2. 2. http://www.wpdesigner.com/2007/02/19/so-you-want-to-create- http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/ wordpress-themes-huh/ 3. 3. http://profmustamar.com/ http://profmustamar.com/

Thanks to :

God, Mum, and Dad (alm.) God, Mum, and Dad (alm.)

Paraikatte Blogger Makassar ANGINGMAMMIRI.ORG Paraikatte Blogger Makassar ANGINGMAMMIRI.ORG Wordpress Wordpress WordCamp Indonesia WordCamp Indonesia And You… And You… Semoga bermanfaat Semoga bermanfaat Salam, Salam,

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