Cara Membuat Wordpress Theme dan Step-Stepnya

Cara Membuat Wordpress Theme, Pengen Share cara bikin wordpress themes sendiri, saya update lagi tentang cara bikin wordpress themes yang simple dan fast. Nah untuk Cara Membuat Wordpress Theme pertama-tama yang di perlukan software xampp dan notepad++ atau anda juga bisa menggunakan Dreamweaver tapi saya merekomendasikan notepad++ karena lebih ringan.

Untuk Membuat Wordpress Theme sangat diperlukan kedua software tersebut dan untuk tutorial cara menginstalnya silahkan anda cari di google atau jika ada masalah silahkan tanyakan langsung ke saya.

Pertama silahkan anda download terlebih dahulu file thema wordpress standart yang hanya terdiri dari style.css dan index.php karena itu adalah 2 file induk dari pembuatan wordpress themes.

Download Wordpress themes file default.

Jika sudah sekarang silahkan buka di browser anda http://localhost/namafolderanda dan silahkan instal theme default yang sudah saya buatkan seperti biasa anda menginstal theme wordpress.

Jika sudah silahkan buka file tersebut di Notepad++ melalui :

My Computer > Local Disk C: > xampp > htdocs > folderanda > wp-content > themes > olengkblogs

buka ke dua file tersebut (index.php dan style.css).

Pertama-tama mari kita mulai dari file index.php

itu adalah bagian title dari template wordpress anda yang penting nantinya untuk SEO blog anda.

Pada step berikutnya kita akan memecah file index.php tersebut menjadi beberapa bagian seperti "header.php", "single.php", "sidebar.php" dan "footer.php" yang dimana nantinya akan memudahkan kita untuk memanage template tersebut dengan tampilannya.

Step-step membuat file header.php :

Nah sekarang kita kembali ke file index.php tadi
Potong/cut code dari paling atas hingga code <div id="isibadan">
Lalu masuk ke notepad++
Buat file baru dengan nama header.php lalu pastekan kode tadi (ingat save di folder theme tadi "olengkblogs")
Pada file index.php tambahkan kode berikut di bagian paling atas <?php get_header(); ?>
Berikut ini Isi file header.php

<?php
//*tutorial bikin wordpress themes by : olengkblogs
?>
<!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"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php if ( is_home() ) { ?> <?php bloginfo('description'); ?>  / 
<? bloginfo('name'); ?> <?php } ?>
<?php if ( is_search() ) { ?> Search Results |  <? bloginfo('name'); ?>
<?php } ?>
<?php if ( is_single() ) { ?> <?php wp_title(''); ?>  /  <? bloginfo('name'); ?>
<?php } ?>
<?php if ( is_page() ) { ?> <?php wp_title(''); ?>  /  <? bloginfo('name'); ?>
<?php } ?>
<?php if ( is_category() ) { ?> <?php single_cat_title(); ?>  /  <? bloginfo('name'); ?>
<?php } ?>
<?php if ( is_month() ) { ?> <?php the_time('F'); ?>  /  <? bloginfo('name'); ?>
<?php } ?>
<?php if (function_exists('is_tag')) { if ( is_tag() ) { ?> <? bloginfo('name'); ?>  / Tag Archive |  <?php single_tag_title("", true); } } ?>
</title>
<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="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<boby>
<div id="badan">
<div id="header">
<div class="logos">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1> </div>
<div class="description">
<h2><?php bloginfo('description'); ?></h2>

<div class="menu"> <?php wp_list_pages('title_li=')?>
</div>
</div>

<div id="isibadan">

Maka File index.php anda menjadi seperti ini :

<?php get_header(); ?>
<div id="kontent">
<div id="postingan">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="posts" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?></a></h2>
<div class="entry">
<?php the_content('Baca Selengkapnya'); ?>
<p class="metadata"> Published: <?php the_time( 'F jS, Y. ' ); ?>
<br />Filed under: <?php the_category( ', ' ); ?>.
<?php comments_popup_link( '0 Comments', '1 Comments', '% Comments' ); ?>.
By <?php the_author_posts_link(); ?>. <?php edit_post_link('Edit post', '', ''); ?> </p>
</div>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="navleft">
<?php next_posts_link( '« Older Entries' ); ?>
</div>
<div class="navright">
<?php previous_posts_link( 'Newer Entries »' ); ?>
</div>
</div>
<?php else: ?>
<div class="postingan">
<p>Sorry, no posts matched with your criteria. Please do search again with different terms.</p> </div>
<?php endif; ?>
</div>
</div>
<div id="sidebar">
</div>
</div>
<div id="footer"> <div class="isifooter">
<p>Testing belajar bikin wordpress themes</p>
</div> </div>
</div>
<?php wp_footer(); ?>
</body>
</html>

Step-step Membuat file Footer.php

Masih di file index.php silahkan buka kembali
Potong/cut code dari <div id="footer"> atas hingga code </html>
Lalu masuk ke notepad++
Buat file baru dengan nama footer.php lalu pastekan kode tadi (ingat save di folder theme tadi "olengkblogs")
Pada file index.php tambahkan kode berikut di bagian paling atas <?php get_footer(); ?>
Berikut ini Isi file footer.php

<div id="footer">
<div class="isifooter">
<p>Testing belajar bikin wordpress themes</p>
</div>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

Maka file index.php anda menjadi sperti ini :

Perhatikan kode yang saya CETAL TEBAL BERWARNA MERAH

nb : Sekarang setiap membuat file php yang lainnya pastikan memasang kode <php get_header(); > pada bagian paling atas dan kode <?php get_footer(); ?> pada bagian paling bawah (terkecuali file : sidebar.php, functions.php dan search.php )

Sekarang anda sudah memiliki file index.php, header.php, footer.php, style.css. Sekarang kita buat file sidebar.php, single.php dan 404.php.

Step-step Membuat file sidebar.php

Masih di file index.php silahkan buka kembali
Potong/cut code dari <div id="sidebar"> atas hingga code </div>
Lalu masuk ke notepad++
Buat file baru dengan nama sidebar.php lalu pastekan kode tadi (ingat save di folder theme tadi "olengkblogs")
Pada file index.php tambahkan kode berikut di bagian paling atas <?php get_sidebar(); ?>
Berikut ini Isi file sidebar.php

Maka File index.php anda menjadi spt ini :

<?php get_header(); ?>
<div id="kontent">
<div id="postingan">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="posts" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
</h2>
<div class="entry">
<?php the_content('Baca Selengkapnya'); ?>
<p class="metadata"> Published: <?php the_time( 'F jS, Y. ' ); ?><br />
Filed under: <?php the_category( ', ' ); ?>.
<?php comments_popup_link( '0 Comments', '1 Comments', '% Comments' ); ?>.
By <?php the_author_posts_link(); ?>.
<?php edit_post_link('Edit post', '', ''); ?> </p>
</div>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="navleft">
<?php next_posts_link( '« Older Entries' ); ?>
</div>
<div class="navright">
<?php previous_posts_link( 'Newer Entries »' ); ?>
</div>
</div>
<?php else: ?>
<div class="postingan">
<p>Sorry, no posts matched with your criteria. Please do search again with different terms.</p> </div>
<?php endif; ?>
</div>
</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

Kembali saya ingatkan UNTUK PERHATIKAN KODE MERAH CETAK TEBAL itu adalah file penting yang sudah anda rubah....

Step-step Membuat file single.php

Untuk membuat file single.php anda cukup meng copy seluruh file index.php
Jika sudah hapus tulisan ini ['Baca Selengkapnya'] dengan tanda kutipnya
Lalu temukan kode ini <div class="posts" id="post-<?php the_ID(); ?>">
Tepat di bawahnya anda akan menemukan <h2>...</h2>
Jika ketemu ganti dengan <h1>...</h1> akan terlihat lebih SEO Friendly

Maka File single.php menjadi seperti berikut ini :

<?php get_header(); ?>
<div id="kontent">
<div id="postingan">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="posts" id="post-<?php the_ID(); ?>">
<h1><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
</h1>
<div class="entry">
<?php the_content(); ?>
<p class="metadata"> Published: <?php the_time( 'F jS, Y. ' ); ?><br />
Filed under: <?php the_category( ', ' ); ?>.
<?php comments_popup_link( '0 Comments', '1 Comments', '% Comments' ); ?>.
By <?php the_author_posts_link(); ?>.
<?php edit_post_link('Edit post', '', ''); ?> </p>
</div>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="navleft">
<?php next_posts_link( '« Older Entries' ); ?>
</div>
<div class="navright">
<?php previous_posts_link( 'Newer Entries »' ); ?>
</div>
</div>
<?php else: ?>
<div class="postingan">
<p>Sorry, no posts matched with your criteria. Please do search again with different terms.</p> </div>
<?php endif; ?>
</div>
</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

Step-step Membuat file eror 404.php

Buat file baru di notepad++ anda dengan nama 404.php
Lalu copykan seluruh file single.php di atas
Kemudian hapus kode mulai dari <?php if ( have_posts() ) sampai <?php endif; ?>
Isi dari <h2>..</h2> bisa anda ganti sesuai kehendak anda

Berikut isi dari file 404.php anda seharusnya :

<?php get_header(); ?>
<div id="kontent">
<div id="postingan">
<h2>ERROR 404</h2>
<p>Not Found</p>
</div>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

Sekarang file Theme wordpress anda sudah jadi 75% Untuk file tambahan seperti comments.php , funtions.php, style.css akan saya lanjutkan di bagian ke dua Tentang Tutorial Membuat wordpress themes PART II

Anda baru saja membaca artikel yang berkategori Tutorial / Wordpress dengan judul Cara Membuat Wordpress Theme dan Step-Stepnya. Anda bisa bookmark halaman ini dengan URL http://olengkblogs.blogspot.com/2012/06/cara-membuat-wordpress-theme-dan-step.html. Terima kasih!