Tutorial Dasar Membuat Theme WordPress

Posted: December 23rd, 2009 by sigit - Category: Tutorial

Penggunaan Content Management System (CMS) untuk mengelola suatu website saat ini menunjukkan perkembangan yang sangat pesat. Hal ini mengakibatkan munculnya ‘profesi-profesi’ baru seperti CMS theme/template developer, CMS module/plugins/extension developer, CMS customization expert, dan lain-lain. Tutorial ini akan difokuskan pada bagiamana menjadi CMS theme/template developer, dimana CMS yang digunakan adalah WordPress. Tutorial ini akan memberikan kemampuan dasar bagi Anda untuk membuat sebuah theme bagi CMS WordPress. Jika nanti Anda sudah expert, maka Anda dapat memanfaatkan kemampuan Anda untuk memperoleh uang dengan menjual premium theme buatan Anda ke marketplace seperti WooThemes atau ThemeForest siapa tau Anda dapat memperoleh 40000US dolar dalam 3 bln.

Struktur Dasar Theme pada CMS WordPress

Struktur dasar theme pada WordPress terbagi menjadi beberapa bagian yang dipisahkan dalam beberapa file. Bagian-bagian tersebut adalah header (header.php), index (index.php), sidebar (sidebar.php), dan footer (footer.php) yang berfungsi untuk layout. Selain itu masih terdapat bagian untuk menampilkan single post (single.php), menampilkan pages (pages.php) menampilkan bagian komentar (comments.php), menampilkan arsip (archieve.php), dan menampilkan form pencarian (searchform.php) dan hasil pencarian (search.php). Informasi selengkapnya mengenai hal ini dapat di lihat di sini.

Pada tutorial ini hanya akan difokuskan pada struktur dasar yang terdiri dari bagian header, index, sidebar dan footer saja dengan menggunakan studi kasus website Electronic Journals Universitas Atma Jaya Yogyakarta.

Bagian Header

Struktur untuk bagian header biasanya terdiri dari elemen-elemen untuk mendeklarasikan DOCTYPE, elemen header dari dokumen XHTML (title, meta, link, script, dll), dan komponen header dari layout website.

Langkah 1 untuk Bagian Header

Buatlah sebuah file dengan menggunakan text editor (misal Notepad++) dan simpan dengan nama file header.php.

Langkah 2 untuk Bagian Header

Langkah selanjutnya adalah menambahkan kode XHTML/PHP untuk mendeklarasikan DOCTYPE dan beberapa elemen head XHTML. Pada bagian ini, kita akan menggunakan beberapa fungsi/template tags dari WordPress yaitu:

language_attributes()
Fungsi ini digunakan untuk menampilkan atribut language dan nilai dari tag html.
bloginfo()
Template tags ini digunakan untuk mengambil informari dari beberapa parameter User Profile maupun General Options dari website. Jika parameternya ‘name’, maka akan mengambil nilai nama blog/website yang kita isikan pada saat melakukan instalasi WordPress. Jika parameternya ’stylesheet_url’ maka akan mengambil nilai URL dari stylesheet yang kita pakai dalam theme yang dibuat. Informasi lengkap mengenai template tags ini dapat dilihat di sini.
is_single()
Fungsi ini digunakan untuk mendeteksi apakah halaman yang disajikan merupakan halaman tunggal atau bukan. Fungsi lain yang terkait adalah is_home() untuk mendeteksi apakah sedang berada di halaman home atau bukan. Informasi mengenai conditional tags lainnya dapat dilihat di sini.
wp_title()
Template tags ini digunakan untuk menampilkan judul dari sebuah post/page.
wp_head()
Template tags ini digunakan untuk menampilkan beberapa elemen head dari dokumen XHTML.

Kode selengkapnya untuk bagiam header adalah sebagai berikut:

<!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" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
 <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

 <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
 <meta name="robots" content="index, follow" />
 <meta name="keywords" content="jurnal teknologi industri, fakultas teknologi industri, universitas atma jaya yogyakarta" />
 <meta name="description" content="Website Jurnal Teknologi Industri Universitas Atma Jaya Yogyakarta" />

 <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

 <?php wp_head(); ?>

</head>

Bagian Index (Layout)

Bagian index digunakan untuk menyatukan bagian-bagian yang lain (header, sidebar dan footer) dan ditambahkan dengan bagian untuk menampilkan posting dari website.

Langkah 1 untuk Bagian Index

Buatlah sebuah file dengan menggunakan text editor (misal Notepad++) dan simpan dengan nama file index.php.

Langkah 2 untuk Bagian Index

Langkah selanjutnya adalah menambahkan kode PHP untuk memanggil bagian header. Template tags yang digunakan adalah get_header().

<?php get_header(); ?>

Langkah 3 untuk Bagian Index

Langkah selanjutnya adalah menambahkan kode XHTML/PHP untuk menampilkan posting pada website. Pada bagian ini, kita akan menggunakan beberapa fungsi/template tags dari WordPress yaitu:

WP_Query()
WP_Query merupakan class dari WordPress yang digunakan untuk menampilkan posting. Parameter yang digunakan dalam template ini adalah “category_name=edisi&showposts=1″ karena hanya akan menampilkan satu posting terbaru dari kategori edisi. Informasi selengkapnya mengenai template tags WP_Query dapat dilihat di sini.
have_post() dan the_post()
Template tags ini digunakan untuk proses looping (The Loop) terkait dengan hasil dari pemanggilan fungsi WP_Query() sebelumnya.
get_post_custom_values() dan get_post_meta()
Template tags get_post_custom_values() digunakan untuk mengambil nilai custom fields yang kita tambahkan dalam posting. Pada kasus ini custom field-nya adalah cover yang menyimpan nilai lokasi file gambar cover dari jurnal. Template tags get_post_meta() digunakan untuk mengambil meta data dari posting seperti pengarang dan tanggal posting.
the_title()
Template tags ini digunakan untuk menampilkan judul posting/page.
the_content()
Template tags ini digunakan untuk menampilkan konten dari suatu post/page. Jika dtambahkan parameter ‘(Selengkapnya…)’ maka jika konten ditampilkan hanya sebagian, maka di akhir konten akan diberikan teks (Selengkapnya…) untuk melihat konten secara lengkap.

Kode yang digunakan untuk menampilkan konten yang diposting adalah sebagai berikut:

    <div id="main">
         <div id="content">
             <h2>Edisi Terbaru</h2>

             <?php
                 $br = new WP_Query("category_name=edisi&showposts=1");
                 if($br->have_posts()) {
                     $br->the_post(); ?>
                     <img src="<?php $values = get_post_custom_values("cover"); if (isset($values[0])) { $key="cover"; } ?><?php echo get_post_meta($post->ID, $key, true);?>" />
                     <h3><?php the_title(); ?></h3>
                     <p>Jurnal Teknik Sipil adalah wadah informasi bidang Teknik Sipil berupa hasil penelitian, studi kepustakaan maupun tulisan ilmiah terkait. Terbit pertama kali Oktober tahun 2000 dengan frekuensi terbit tiga kali setahun pada bulan Oktober, Pebruari dan Juni. (ISSN 1411-660X).</p>
                     <div class="clear"></div>

                     <?php the_content("(Selengkapnya...)"); ?>

                 <?php } ?>
         </div>

Langkah 4 untuk Bagian Index

Langkah selanjutnya adalah menambahkan kode PHP untuk memanggil bagian sidebar dan footer. Template tags yang digunakan adalah get_sidebar() dan get_footer().

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

Bagian Sidebar

Bagian sidebar biasanya digunakan untuk menyajikan informasi mengenai judul posting sebelumnya (recent posts), pages (bisa ditempatkan di header sebagai menu), dan informasi lainnya. Pada sidebar juga dapat ditambahkan Sidebar Widget sehingga konten sidebar bisa diatur secara dinamis melalui panel Dashboard Admin. Untuk kasus ini, bagian sidebar akan digunakan untuk menampilkan posting sebelumnya dan daftar page.

Langkah 1 untuk Bagian Sidebar

Buatlah sebuah file dengan menggunakan text editor (misal Notepad++) dan simpan dengan nama file sidebar.php.

Langkah 2 untuk Bagian Sidebar

Langkah selanjutnya adalah menambahkan kode XHTML/PHP untuk menambahkan form pencarian pada bagian Sidebar. Pada bagian ini kita menggunakan template tags bloginfo() yang sudah kita bahas di atas dengan parameter ‘url’ dan template tags the_search_query() yang digunakan untuk menampilkan query yang digunakan dalam komponen form.

   <div id="sidebar">
       <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
           <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
           <input type="submit" id="searchsubmit" value="Search" />
       </form>

Langkah 3 untuk Bagian Sidebar

Langkah selanjutnya adalah menambahkan kode XHTML/PHP untuk menampilkan daftar posting sebelumnya pada bagian Sidebar. Pada bagian ini kita menggunakan template tags wp_get_archives() yang digunakan untuk menampilkan daftar posting dari website dalam format list (<li></li>).

            <h2>Edisi Sebelumnya</h2>
            <ul>
                <?php wp_get_archives('type=postbypost'); ?>
            </ul>

Langkah 4 untuk Bagian Sidebar

Langkah selanjutnya adalah menambahkan kode XHTML/PHP untuk menampilkan keterangan dan daftar page pada bagian Sidebar. Pada bagian ini kita menggunakan template tags wp_list_pages() yang digunakan untuk menampilkan daftar pages/halaman dari website dalam format list (<li></li>).

             <h2>Tentang Jurnal</h2>
             <p>Jurnal Teknik Sipil adalah wadah informasi bidang Teknik Sipil berupa hasil penelitian, studi kepustakaan maupun tulisan ilmiah terkait. Terbit pertama kali Oktober tahun 2000 dengan frekuensi terbit tiga kali setahun pada bulan Oktober, Pebruari dan Juni. (ISSN 1411-660X).</p>

	     <ul>
		<?php wp_list_pages('title_li='); ?>
	     </ul>

	    </div>
	</div>
	<div class="clear"></div>

Bagian Footer

Langkah terakhir adalah membuat bagian footer, dimana konten dari bagian ini tergantung dari desain yang dibuat (bisa berisi informasi mengenai copyrights, dan lainnya).

Langkah 1 untuk Bagian Footer

Buatlah sebuah file dengan menggunakan text editor (misal Notepad++) dan simpan dengan nama file footer.php.

Langkah 2 untuk Bagian Footer

Langkah ini akan menambahkan elemen-elemen yang ada pada bagian footer dari website. Pada bagian ini kita menggunakan template tags wp_footer().


<div id="footer">
 <?php wp_footer(); ?>
 <p>Copyrights by Kantor Sistem Informasi 2009.</p>
 </div>

 </div>
</body>
</html>

Hasil akhir dari theme ini dapat dilihat pada website Electronic Journals Universitas Atma Jaya Yogyakarta.