WordPress: Belajar membuat theme sendiri (part 1)

Belajar membuat wordpress theme sendiri. Untuk memulainya anda hanya membutuhkan sedikit kemampuan tentang HTML, CSS dan tentunya PHP. Mengapa demikian? ya karena 3 hal tersebut mutlak telah dan sedang digunakan oleh wordpress. Kalau belum mengerti 3 hal tersebut tentunya kita akan kesulitan untuk memulai ini. Oh iya, kalo untuk belajar lebih baik menggunakan webserver lokal di pc kita saja, misal menggunakan XAMPP untuk windows OS.

Kita mulai saja part 1 ini dengan membuat theme yang sangat sederhana dan kita gunakan Belajar1 sebagai nama theme. Buat direktori baru di dalam direktori theme anda, misal: Belajar1 , lalu buat file style.css dan isi dengan kode css berikut:

/*
Theme Name:Belajar1
Theme URI:http://kencur.net/
Description: Belajar membuat sendiri theme wordpress part 1
Version:0.1
Author:Securesh
Author URI:http://kencur.net/
Tags:one columns, untuk belajar
*/
/* ----- Reset ----- */

@charset "utf-8";
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #42413C;
	margin: 0;
	padding: 0;
	color: #000;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px; 
}

a:link {
	color: #00C;
	text-decoration: underline;
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}

.container {
	width: 960px;
	background: #FFF;
	margin: 0 auto; 
}

.header {
	background: #ADB96E;
}
.menu{
	text-transform: capitalize;
}
.menu ul {
	list-style:none;
	margin:0;
	padding:0;
}
.menu ul li{
	float: left;
	margin-right: 10px;
}
.content {
	background: #C0C0C0;
	padding: 10px 0;
	width: 960px;
	float: left;
}

.footer {
	background: #CCC49F;
	position: relative;
	clear: both;
	margin-top: 10px;
	padding: 20px 0;
}
.clearfloat { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}


File ini (style.css) digunakan oleh mesin wordpress untuk mengatur tampilan blog dan juga digunakan untuk mengidentifikasikan nama theme, pembuat theme, deskripsi theme, alamat theme dan tag theme. Lihat bagian atas dari kode css tersebut.
Buat file index.php di direktori yang sama dengan style.css dan isi dengan kode 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">
<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>
    <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="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>
	<!-- FOOTER -->
	<div class="footer">
    <p><a href="<?php echo get_option('home'); ?>/"><b><?php bloginfo('name'); ?></b></a>  © 2011 .</p>
    <p><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>

File ini digunakan sebagai design untuk output dari query yang diterima mesin wordpress.
Apabila sudah selesai, coba aktifkan theme baru anda. Buat screenshot wordpress blog anda lalu simpan sebagai screenshot.png dan letakan di direktori theme baru anda. Nantinya file ini digunakan sebagai preview theme anda pada saat anda berada di wp-admin.
File-file tersebut bisa anda download disini.

Selesai sudah theme wordpress kita yang sederhana sekali :D , Penambahan widget di sidebar dengan menggunakan theme ini tidak dapat dilakukan, karena membutuhkan beberapa function tambahan. Tunggu post saya selanjutnya tentang menambahkan fitur tersebut pada theme kita ini.

Published by

7 thoughts on “WordPress: Belajar membuat theme sendiri (part 1)”

  1. Amri berkata:

    kalo bisa jelasin satu persatu css nya sama fungsi tag php-nya. :D
    biar jelas.. :D

    1. Asep Sudiyono berkata:

      wah kalo dijelasin satu satu bisa banyak banget dong om :)
      sebagai bahan rujukan untuk CSS > http://www.w3schools.com/css/default.asp , HTML > http://www.w3schools.com/html/default.asp
      untuk php > http://www.w3schools.com/php/default.asp

      kalo tag php yang ada dalam script index.php bisa tanyakan sama saya langsung lewat komen :)

  2. arif berkata:

    oh ya mas saya mau tanya,, ada theme buatan saya yang kalau dicoba di localhost bisa tapi kalau di install online malah cuma ngeblank putih doang ? kira-kira masalahnya dimana…

  3. Asep Sudiyono berkata:

    @ arif:
    plugin yang terpasang di local dan yang di webhost sama apa gak mas?
    mungkin karna bentrok dengan plugin yang terpasang, atau bisa juga karena ada function yang bermasalah pada theme buatan mas nya.
    kalo tidak keberatan bisa email saya saja langsung mas :)

    1. arif berkata:

      udah solved mas, ternyata yang salah ada di kompresinya, dulu format .zip Ultra compressed, sekarang pake .zip Store dah bisa…

      1. Asep Sudiyono berkata:

        oh,, untung dah solved, selamet deh saya jadinya :)

  4. Cikiciew berkata:

    wah ilmunya sunggu sangat bermaanfaat mass, saya juga mau coba bikin template sendiri..
    siapa tau template buiatan saya bisa di jual.. :D

    mari bersilahturahmi ke web saya juga mas….
    http://www.cikiciew.com/tips-trick/cara-gabung-windowsxpwindows7hiren’s-bootcd-dalam-satu-flash-disk Cara Gabung WindowsXP+Windows7+Hiren’s BootCD Dalam Satu Flash Disk

Tinggalkan Balasan

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