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>
<!--- end logos -->
<div class="menu">
<?php wp_list_pages('title_li=')?>
</div><!--- end menu -->
</div><!-- end header -->
<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><!-- end kontent -->
<div id="sidebar">
</div><!-- end sidebar -->
</div><!-- end isibadan -->
<div id="footer">
<div class="isifooter">
<p>Testing belajar bikin wordpress themes</p>
</div>
</div><!-- end footer -->
</div><!-- end badan -->
<?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><!-- end footer -->
</div><!-- end badan -->
<?php wp_footer(); ?>
</body>
</html>
Maka file index.php anda menjadi sperti 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><!-- end kontent -->
<div id="sidebar">
</div><!-- end sidebar -->
</div><!-- end isibadan -->
<?php get_footer(); ?>
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><!-- end sidebar -->
- 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
<div id="sidebar">
</div><!-- end sidebar -->
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><!-- end kontent -->
<?php get_sidebar(); ?>
</div><!-- end isibadan -->
<?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><!-- end kontent -->
<?php get_sidebar(); ?>
</div><!-- end isibadan -->
<?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><!-- end postingan -->
</div><!-- end kontent -->
<?php get_sidebar(); ?>
</div><!-- end isibadan -->
<?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
