WordPress : Belajar membuat theme sendiri (part 3)

Belajar membuat wordpress theme sendiri part 3 (Menambahkan template single post ke dalam theme). Setelah dapat menambahkan sidebar seperti yang telah kita bahas dalam WordPress : Belajar membuat theme sendiri (part 2) tentunya kita ingin membuat theme yang lebih powerfull, dalam tutorial part 1 dan part 2 kita hanya menggunakan template index.php sebagai template untuk menampilkan isi blog kita (Template adalah file dari theme yang digunakan sebagai format tampilan blog, misal: template untuk tampilan index adalah index.php, single.php untuk menampilkan single post). Sebenarnya dalam sebuah theme wp bisa terdapat 2 atau lebih template . Ini digunakan untuk memudahkan dalam customisasi theme, kita dapat membagi file tersebut menjadi 2 file atau lebih bagian. Kebanyakan file template theme wordpress tersusun dari header, isi dan footer.

Dalam tutorial part 2, script header dan footer berada langsung pada file index.php (template index) sehingga ini akan memaksa kita untuk menuliskan kembali script header dan footer di dalam template lain (misal template single post) yang biasanya script header dan footer itu sama. Jadi untuk memudahkan kita dalam pembuatan template, kita bisa membuat file header.php untuk menuliskan script untuk bagian header dan membuat file footer.php untuk menuliskan script bagian footer.

Sebagai contoh kita akan membuat header.php dan footer.php dari file index.php (Silahkan buka kembali file index.php dari tutorial WordPress : Belajar membuat theme sendiri part 2 untuk membandingkan).

index.php

<?php get_header(); ?>
<div class="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permanent Link to'); ?>
<?php the_title_attribute(); ?>">
<?php the_title(); ?></a></h2>
<?php the_content(__('(more...)')); ?>
<?php wp_link_pages(); ?>
<p class="the_category"><span class="hide"><?php _e('Categories'); ?>: </span><?php the_category(', ') ?></p>
<p class="the_tags"><?php the_tags("<span >".__('Tags: ')."</span>", ', ', ''); ?> <span><?php comments_popup_link(__('No Comments'), __('1 Comment'), __('% Comments'),"icon-comment"); ?></span></p>
</div>
<?php endwhile; ?>
<div class="navigation">
<?php next_posts_link(__('Post Lama')) ?>
<?php previous_posts_link(__('Post Baru')) ?>
</div>
<?php else : ?>
<div class="post">
<h2><?php _e('Tidak Ditemukan'); ?></h2>
<p><?php _e('Maaf, Yang anda cari tidak ada.'); ?></p>
</div>
<?php endif; ?>
</div>
<!-- sidebar untuk tempat widget -->
<div class="sidebar">
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>


header.php

<!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="text/html; charset=utf-8" />
<title><?php if ( is_front_page() ) { bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); } else { wp_title( '«', true, 'right' ); bloginfo( 'name' ); } ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php wp_head(); ?>
</head>
<body>
<div class="container">
<!-- HEADER -->
<div class="header">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<p class="description"><?php bloginfo('description'); ?></p>
</div>
<!-- MENU -->
<div class="menu">
<ul>
<li><a href="<?php echo get_option('home'); ?>" title="Home">Home</a></li>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
</ul>
</div>
<!-- ISI -->
<div class="kulitdariisi">

footer.php

</div>
<!-- FOOTER -->
<div class="footer">
<p><a href="<?php echo get_option('home'); ?>/"><b><?php bloginfo('name'); ?></b></a> © 2011. <a href="<?php echo esc_url( __( 'http://wordpress.org/') ); ?>" title="<?php esc_attr_e( 'Belajar membuat theme wordpress' ); ?>" rel="generator"><?php printf( __( 'Powered by %s'), 'WordPress' ); ?></a></p>
</div>
</div>
<?php wp_footer();?>
</body>
</html>

Setelah kita mempunyai header.php dan footer.php maka ini akan memudahkan kita dalam membuat template yang lainnya. Misal kita membuat template untuk single post, buat file single.php dan isi dengan script berikut:

<?php get_header(); ?>
<div class="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Ke'); ?> <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<p class="the_time"><?php the_time('F jS, Y') ?></p>
<?php the_content(__('(more...)')); ?>
<?php wp_link_pages(); ?>
<?php if ( ! is_attachment() ) : ?>
<p class="the_category"><span class="hide"><?php _e('Categories'); ?>: </span><?php the_category(', ') ?></p>
<p class="the_tags"><?php the_tags("<span>".__('Tags: ')."</span>", ', ', ''); ?> <span class="commentcount"><br /><a class="icon-comment" href="#respond"><?php _e('Leave a comment'); ?></a></span></p>
<?php endif; ?>
<?php edit_post_link(__('Edit'), '<p>', '</p>'); ?>
</div>
<?php if ( is_attachment() ) : ?>
<div class="navigation imagenav">
<div class="alignleft"><?php previous_image_link() ?></div>
<div class="alignright"><?php next_image_link() ?></div>
</div>
<?php endif; ?>
<div class="navigation">
<div class="alignleft"><?php previous_post_link(__('%link')) ?></div>
<div class="alignright"><?php next_post_link(__('%link')) ?></div>
</div>
<?php if( ! is_attachment() ) comments_template(); ?>
<?php endwhile; ?>
<?php else: ?>
<div class="post">
<h2 class="pagetitle"><?php _e('Tidak Ada'); ?></h2>
<p class="warning"><?php _e('Maaf, yang anda cari tidak ada.'); ?></p>
</div>
<?php endif; ?>
</div>
<div class="sidebar">
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

Di dalam script-script tersebut terdapat function get_header(), wp_head(), get_footer(), wp_footer() dan get_sidebar(). Sedikit penjelasan saja:
get_header() = untuk mengambil isi file header.php,
wp_head() = untuk meletakan isi plugin dan pengaturan lain yang telah diinstruksikan untuk berada di tag header html (misal pengaturan isi tag html title) dan fungsi ini diletakan sebelum penutup tag head (</head>), http://codex.wordpress.org/Function_Reference/wp_head,
get_footer() = digunakan untuk mengambil isi file footer.php,
wp_footer() = digunakan untuk memastikan semua plugins dan proses query selesai. Diletakan sebelum penutup tag body (</body>), http://codex.wordpress.org/Function_Reference/wp_footer ,
get_sidebar() = digunakan untuk mengambil isi file sidebar.php.
Dengan adanya single post template maka wordpress mesin tidak lagi menggunakan index.php sebagai template saat menampilkan single post. Dan dengan di buatnya file header.php serta footer.php maka kita tidak perlu menuliskan kembali script yang sama apabila kita membuat template lain (category.php, archive.php, archives.php, page.php, links.php).
Untuk memudahkan, saya telah menyedian theme Belajar3 dan bisa anda download disini.

Published by

12 thoughts on “WordPress : Belajar membuat theme sendiri (part 3)”

    1. Asep Sudiyono berkata:

      apanya yang pertamax gan?
      saya cuma kepengin belajar bersama, siapa tahu dengan cara belajar yang seperti ini saya akan dapat yang lebih plus :)

  1. Amri berkata:

    Hihi.. mantab Om Cuur…
    Punyaku udah tak bagi – bagi…

    1. Asep Sudiyono berkata:

      punyamu yang sebelah mana mri yang dibagi bagi :D

  2. arif berkata:

    itu kenapa di single.php ada else not foundnya ? saya biasa pake itu cuma di index.php doang, soalnya kalo not found selain di homepage ya masuk ke 404.php :-)

    1. Asep Sudiyono berkata:

      ya buat nampilin kalo id post ( ?p=idpost ) yang diminta tidak ada bro :) , mirip 404 tapi masih di template single, kan dalam theme belajar3 nya belum ditambah template 404.php , biar saya belajarnya urutan dari dasar om :)

      trims masukannya om :)

  3. Registery berkata:

    Wow, om kencur kasih tutorial lagi, mantap

  4. afiv berkata:

    belum tertarik bikin theme sendiri! karna kalau salah harus ulang lafi deh!

    1. Asep Sudiyono berkata:

      :)

      kalo gak mau nanggung resiko gitu mending otak atik nya di localhost aja mas :)

      1. afiv berkata:

        yap’s, mending otak-atik aja!

  5. ifliandry berkata:

    Salam kenal mas ..

    izin bookmark webnya mas …
    terima kasih tutorial bikin theme WP-nya ..
    mau dicoba dulu :)

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *