Tutorial Membuat Template Wordpress Blog

20
Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline TUTORIAL MEMBUAT TEMPLATE WORDPRESS BLOG Kategori: Webmaster Tingkat Advance Penulis: Hairul Azami Dipersilahkan untuk diperbanyak, “dibajak” :-) , dikopi dan disebarluaskan Karena “Ilmu itu untuk diamalkan” jadi … “Letakkanlah Ilmu itu di Depan JIDAT Kamu, agar orang lain dapat mempelajari dan MELIHAT ilmu kamu"

Transcript of Tutorial Membuat Template Wordpress Blog

Page 1: Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline

TUTORIAL MEMBUAT TEMPLATE WORDPRESS BLOG

Kategori: Webmaster Tingkat Advance

Penulis: Hairul Azami

Dipersilahkan untuk diperbanyak, “dibajak” :-) , dikopi dan disebarluaskan

Karena “Ilmu itu untuk diamalkan” jadi … “Letakkanlah Ilmu itu di Depan JIDAT Kamu,

agar orang lain dapat mempelajari dan MELIHAT ilmu kamu"

Page 2: Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline

Bagian – 1

INTRODUCTIONS

Setelah dalam kurun waktu yang cukup lama, project ini sempat tersendat sendat pembuatanna karena satu dan lain hal.., yakni Wordpress Glassy Three - Blog Theme, dalam konteks design and code editing.

Wah puas rasana gue dah bisa ngeberesin template dan tutor na, seperti biasa jangan liat panjang lebar na uraian tutor, tapi netter semua cuma butuh beberapa support things yang bakal ngasi lu inspirasi dan semangat selalu... hakahakakaakakawww...

Hmmmmm.....mulai dari mana yak?

Woke...!! kalo kmaren gue ngasi tutor cara bikin layout na Wordpress Glassy Three aja di Adobe Photoshop, sekarang kita akan belajar cara mengaplikasikanna ke dalam Wordpress Blog Theme.

Woittt!!!! siapin dulu dah :

1. Kopi segala rasa...hehee.. 2. Rokok StarMild ... Lidah buaya Edition, eh salah Special Buaya Darat Edition..

hihiiikkiiikkk... 3. Lagu kebangsaaan Punk Raya, hehe..Session - The OffSpring [Album: 1993 -

Ignition].. 4. Kali ini cewe gue lagi mudik, jadi gue rada leluasa ga ada yang

ngerecokin..hihiii..mahap ya deee...ga maksud kwok...

Kondisi: kali ini layout yang dah dibikin dalam keadaan sudah di slice, jadi tinggal di edit di Dreamweaver na (dalam File HTML+IMAGES).

Struktur File Template Wordpress Blog

Struktur File Template Wordpress Blog berada di dalam folder wp-content/themes:

images lokasi file gambar template

404.php file handler untuk query yang nilaina ZERO (NULL), digunakan juga untuk Handler Cannot Find Page pada root themes

comments.php file template untuk proses komentar pengunjung

Page 3: Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline

footer.php file template untuk footer, disesuaikan dengan kebutuhan designer

favicon.ico icon indentitas halaman web template

gpl.txt GNU GENERAL PUBLIC LICENSE , sebuah lisensi dari sono nya, yang mesti lu sertakan dalam folder template na

index.php file template utama wordpress template, konten dan proses utama kegiatan blogging ada di halaman ini, mulai post entry dan comments total.

screenshot.png preview theme Image berukuran 300X250 px, untuk ditampilkan di halaman Admin WP, sebagai preview halaman na.

searchform.php file yang bertugas mentransfer daa inputan proses searching konten blog.

sidebar.php biasana diletakkan di sebelah kiri atau kanan pada halaman WP Blog, untuk menampilkan entry data Category, Meta Blog, dapat di modifikasi dengan memanggil The Last Entry Post, dan paling sering di gunakan untuk meletakkan generate code dari Amazing Google Adsense, Links, dan Banner.

style.css sebagain identifikasi apakah sebuah themes itu valid atau tidak, jika style ini dihilangkan maka themes tidak akan berfungsi, karena secara keseluruhan WP Blog menggunakan konsep design web modern, yakni dengan banyak menerapkan Style DIV ID pada tag tag na.

header.php untuk bagian header blog, tergantung kebutuhan lu, kalo gue pada tutor ini ga gue pisahin antara header dan kontent body utama blog layout na.

Fungsi Standar Template Wordpress Blog

Sedangkan fungsi standar yang di load dalam WP Blog Page na terletak di file wp-includes/template-functions-xxxxxx.php:

bloginfo('name'); // fungsi: menampilkan nama Blog

Page 4: Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline

wp_title(); // fungsi: menampilkan judul blog

bloginfo('version'); // fungsi: menampilkan versi Wordpress Blog

bloginfo('stylesheet_url'); // fungsi: memanggil root style css (default location) /rootThemes/style.css

bloginfo('rss2_url'); // rel alternative link untuk RSS 2.0

bloginfo('atom_url'); // rel alternative link untuk rss+xml Atom 0.3

bloginfo('template_url'); // fungsi: menampilkan lokasi url template Blog

bloginfo('pingback_url'); // link Ping Back URL Blog

wp_get_archives('type=monthly&format=link'); // fungsi: struktut variable Halaman Archive Blog

bloginfo('template_directory'); // fungsi: memanggil lokasi direktori template yang akan dibuat

the_permalink(); // fungsi: menampilkan Query Permanen Link untuk Post Entry

comments_popup_link(__('No Comment'), __('1 Comment'), __('% Comments'), 'commentslink', __('Comments off')); // fungsi: menampilkan link untuk komentar, biasana diletakkan di bagian awal / akhir posting

Struktur Variable na:

Page 5: Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline

comments_popup_link(__('Var_Komentar Kosong'), __('Var_Komentar = 1'), __('Var_Query Jumlah Komentar > 1'), 'Var_Style', __('Var_Intrupsi Komentar Ditutup')); edit_post_link(__('Edit'), '', ''); // fungsi: menampilkan Link Edit Posting jika Admin sedang login dan berada di halaman Blog (di luar halaman Admin).

Struktur Variable na:

edit_post_link(__('Var_Link Text'), 'Var_Option Start Link', 'Var_Option Ending Link');

comments_template(); // fungsi: memanggil template halaman comments.php

get_header(); // fungsi: memanggil halaman header.php

get_sidebar(); // fungsi: memanggil halaman sidebar.php

get_footer(); // fungsi: memanggil halaman footer.php

wp_specialchars($s, 1); // struktur Var: wp_specialchars($query, 1); // fungsi default special karakter untuk validasi inputan WP Form template

Hmmmmmmm............ sedangkan untuk kamus Style na (CSS) ga gue jelasin, karena konsep nya sama kaya bikin style-style CSS biasa...yaaa kaya jenis font, posisi DIV Tag, besar huruf, warna dan sebagainya.

Naaaaah ..... Untuk kamus default fungsi struktur halaman WP Blog na cukup sampe disana, kalo lu mau lebih lanjut lagi, buka2 aja file2 fungsi di folder wp-includes atau wp-admin na

Page 6: Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline

Bagian – 2

Code Editing: Template Wordpress Blog

Pertama siapkan dulu Folder WP Theme na, misalkan dre-wg3-green didalamna kita akan meletakkan file - file struktur halaman Template na,

Membuat index.php (load => Header, Content, SideBar)

Gue dah siapin halaman index.php yang udah di slice dan di edit di Dreamweaver , kalo awalna berektensi index.html (dari ImageReady), Save As dulu ke index.php

Diatas merupakan pemetaan posisi fungsi standar halaman blog yang akan diload oleh index.php. Hmmm gampang aja broo.. lu cuma cukup menyesuaikan script tag untuk me-load fungsi - fungsi yang telah disediakan WP untuk template na, seperti yang diuraikan pada hal. 1 tutor ini. Langsung aja bro lu ketik-ketik dah ni script na.

Page 7: Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline

HEADER

Script Header ini bisa lu pisahin ke halaman header.php, dan panggil pada hal index na dengan script tag :

<? get_header(); ?>

? Meta <HEADER> TAG Script Tag:

<head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- Code Creator by dr.emi - Hairul Azami --> <style type="text/css" media="screen"> @import url( <?php bloginfo('stylesheet_url'); ?> ); </style>

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" /> <link rel="shortcut icon" type="image/ico" href="<?php bloginfo('template_url'); ?>/favicon.ico" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_get_archives('type=monthly&format=link'); ?> <style type="text/css"> <!-- body,td,th { font-family: Tahoma; font-size: 11px; color: #000000; } body { background-color: #FFFFFF; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } --> </style> </head>

Page 8: Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline

? Page Navigasi Script Tag:

<ul id="navlist"><li class="page_item"><a href="<?php bloginfo('url'); ?>">Home</a></li><?php wp_list_pages('title_li='); ?></ul>

? Blog Name Script Tag:

<a href="<?php bloginfo('url'); ?>"> <img src="<?php bloginfo('template_directory'); ?>/images/index_11.gif" width="79" height="69" border="0" alt=""></a>

? Form Searching Script Tag:

<div class="search2"> <?php include (TEMPLATEPATH . '/searchform.php'); ?> </div>

CONTENT

Tag Content memiliki struktur yang beruntun dan tidak dapat dipisahkan satu dengan lainnya, jadi Script Tag na kaya gini:

Script Tag: <div id="content"> <?php if (have_posts()) : ?>

<? /* UNTUK IDENTIFIKASI HALAMAN BLOG */ ?>

<?php $post = $posts[0]; ?> <?php if (is_category()) { ?> <div class="page-title"> <h2 class="page-title-border"><?php _e('Archive for'); ?> <?php echo single_cat_title(); ?></h2> </div> <?php } elseif (is_day()) { ?>

Page 9: Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline

<div class="page-title"> <h2 class="page-title-border"><?php _e('Archive for'); ?> <?php the_time('F j, Y'); ?></h2> </div> <?php } elseif (is_month()) { ?> <div class="page-title"> <h2 class="page-title-border"><?php _e('Archive for'); ?> <?php the_time('F, Y'); ?></h2> </div> <?php } elseif (is_year()) { ?> <div class="page-title"> <h2 class="page-title-border"><?php _e('Archive for'); ?> <?php the_time('Y'); ?></h2> </div> <?php } elseif (is_author()) { ?> <div class="page-title"> <h2 class="page-title-border"><?php _e('Author Archive'); ?></h2> </div> <?php } elseif (is_search()) { ?> <div class="page-title"> <h2 class="page-title-border"><?php _e('Search Results'); ?></h2> </div> <?php } ?>

<? /* AKHIR IDENTIFIKASI HALAMAN BLOG */ ?>

<? while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>"> <h2 class="posttitle"> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permanent link to'); ?> <?php the_title(); ?>"><?php the_title(); ?></a> </h2> <p class="postmeta"> <span class="post-date"><?php the_time('j M, Y') ?></span>&nbsp; <span class="post-comment"><?php comments_popup_link(__('No Comment'), __('1 Comment'), __('% Comments'), 'commentslink', __('Comments off')); ?></span> <span class="edit-post"> <?php edit_post_link(__('Edit'), '', ''); ?> </span> </p> <div class="postentry"> <?php if (is_search()) { ?> <?php the_excerpt() ?> <?php } else { ?>

Page 10: Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline

<?php the_content(__('Read the rest of this entry &raquo;')); ?> <?php } ?> </div> <!-- <?php trackback_rdf(); ?> --> </div>

<?php comments_template(); ?>

<?php endwhile; else: ?> <div class="warning"> <p><?php _e('Sorry, no posts matched your criteria, please try and search again.'); ?></p> </div> <?php endif; ?> <br>

<div class="pages"> <div class="pages-border"></div> <span class="page-previous"><?php next_posts_link('&laquo; Older Entries'); ?></span> <span class="page-next"><?php previous_posts_link('Newer Entries &raquo;'); ?></span> </div>

</div> </div>

SIDEBAR :

Tag Side bar ini hanya untuk pemanggilan saja, sedangkan uraian struktur na ada pada halaman tutor berikutna Script Tag: <? get_sidebar(); ?>

Page 11: Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline

FOOTER :

Tag Footer ini hanya untuk pemanggilan saja, sedangkan uraian struktur na ada pada halaman tutor berikutna Script Tag: <? get_footer(); ?>

Page 12: Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline

Bagian – 3

Code Editing: Template Wordpress Blog

Membuat sidebar.php (load => strktur hal. SideBar)

Buat halaman php baru , save ke dalam file sidebar.php.

Struktur Defult script na, bisa di modifikasi sesuai selera makan lu, heheheh...serius amat seeehhh... nyantai broo...!!! kakakakwww.....

Script Tag:

<!-- begin left sidebar --> <div id="sidebar"> <div class="links"> <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Left Navigation')

Page 13: Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline

) : else : ?> <h2>Categories</h2> <?php wp_list_cats(); ?> <?php //include (TEMPLATEPATH . '/searchform.php'); ?> <br /> <br /> <h2><?php _e('Meta'); ?></h2> <?php wp_register(); ?> <li><?php wp_loginout(); ?></li> <li><a href="feed:<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li> <li><a href="feed:<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li> <li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li> <li><a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS">Valid CSS</a></li> <li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li> <li><a href="http://wordpress.org/" title="Powered by WordPress">WordPress</a></li> <?php wp_meta(); ?>

<?php if (function_exists('wp_theme_switcher')) { ?> <li><h2><?php _e('Themes'); ?></h2> <?php wp_theme_switcher(); ?> </li> <?php } ?>

<?php endif; ?>

</ul>

</div> <!-- /links --> <div id="sidebar"> </div> </div> <!-- /left sidebar -->

<!-- begin right sidebar -->

Page 14: Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline

<div id="sidebar"> <div class="links"> <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Right Sidebar') ) : else : ?>

<!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it. <li><h2><?php _e('Author'); ?></h2> <p>A little something about you, the author. Nothing lengthy, just an overview.</p> </li> --> <h2><?php _e('Last Entries'); ?></h2> <ul> <?php get_archives('postbypost', '10', 'custom', '<li>', '</li>'); ?> </ul>

<?php $link_cats = $wpdb->get_results("SELECT cat_id, cat_name FROM $wpdb->linkcategories"); foreach ($link_cats as $link_cat) { ?> <h2><?php echo $link_cat->cat_name; ?></h2>

<?php wp_get_links($link_cat->cat_id); ?> <?php } ?>

<h2><?php _e('Archives'); ?></h2> <?php wp_get_archives('type=monthly'); ?>

<?php endif; ?> </div> <!-- /links --> <div id="sidebar">

</div>

<!-- GENERATED CODE UNTUK GOOGLE ADSENSE TIASA TI PALIH DIEU....

-->

</div> <!-- end left sidebar -->

Page 15: Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline

Bagian – 4

Code Editing: Template Wordpress Blog

Membuat footer.php (load => strktur hal. Footer)

Buat halaman php baru , save ke dalam file footer.php.

Bagian in iterserah lu mau diisi apa aja, yang jelas jangan lupa cantumin link wordpress.org, author, dan copright Template na

Script Tag:

<div id="footer"> <div> <p>&copy; <?php the_time('Y') ?> by <a style="color: #FFDFE0; font-weight:bold;" href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> <br />Powered by <a style="color:#FFDFE0; font-weight:bold;" href="http://wordpress.org">WordPress</a> | Designed by <a style="color:#FFDFE0; font-weight:bold;" href="http://www.dremi.info/" title="Wordpress Glassy Three - Red 1.01 by dr.emi">dr.emi</a> </p> </div> <?php do_action('wp_footer', ''); ?> </div> </div> </div>

Membuat searchform.php (load => strktur. search form)

Woke form ini singkat aja, fungsina , cuma untuk searching query inputan ajah, biasana dietakkan di header/sidebar.

Script Tag:

<form method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <p> <input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />&nbsp; </p> </form>

Page 16: Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline

Bagian – 5

Code Editing: Template Wordpress Blog

Membuat comments.php (load => strktur hal. comments)

Buat halaman php baru , save ke dalam file comments.php.

Bagian ini bisa lu edit juga, tampilan komen entry na

Script Tag:

<br /> <br /> <?php // Do not delete these lines if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die ('Please do not load this page directly. Thanks!');

if (!empty($post->post_password)) { // if there's a password if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn't match the cookie ?> <p class="nocomments"><?php _e("This post is password protected. Enter the password to view comments."); ?><p> <?php return; } }

/* This variable is for alternating comment background */ $oddcomment = 'alt'; ?>

<!-- lu bebas ngedit bagian ini. -->

<?php if ($comments) : ?> <h3 class="reply"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to '<?php the_title(); ?>'</h3> <p class="comment_meta">Subscribe to comments with <?php comments_rss_link(__('<abbr title="Really Simple Syndication">RSS</abbr>')); ?>

Page 17: Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline

<?php if ( pings_open() ) : ?> or <a href="<?php trackback_url() ?>" rel="trackback"><?php _e('TrackBack');?></a> to '<?php the_title(); ?>'. <?php endif; ?> </p> <ol class="commentlist">

<?php foreach ($comments as $comment) : ?>

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>"> <div class="comment_author"> <?php comment_author_link() ?> said, </div> <?php if ($comment->comment_approved == '0') : ?> <em>Your comment is awaiting moderation.</em> <?php endif; ?> <br />

<p class="metadate">on <?php comment_date('F jS, Y') ?> at <?php comment_time() ?></p>

<?php comment_text() ?>

</li>

<?php /* Changes every other comment to a different class */ if ('alt' == $oddcomment) $oddcomment = ''; else $oddcomment = 'alt'; ?>

<?php endforeach; /* end for each comment */ ?>

</ol>

<?php else : // this is displayed if there are no comments so far ?>

<?php if ('open' == $post-> comment_status) : ?> <!-- jika komentar diperbolehkan, tapi belum ada komentar (0). --> <?php else : // comments are closed ?> <!--jika komentar telah ditutup. --> <p class="nocomments">Comments are closed.</p> <?php endif; ?> <?php endif; ?>

Page 18: Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline

<br /> <br />

<?php if ('open' == $post-> comment_status) : ?>

<h3 class="reply">Leave a Reply</h3>

<?php if ( get_option('comment_registration') && !$user_ID ) : ?> <p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">logged in</a> to post a comment.</p> <?php else : ?>

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

<?php if ( $user_ID ) : ?>

<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="<?php _e('Log out of this account') ?>">Logout &raquo;</a></p>

<?php else : ?> <div class="postinput"> <p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" /> <label for="author"><small>Name <?php if ($req) _e('(required)'); ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" /> <label for="email"><small>Mail (will not be published) <?php if ($req) _e('(required)'); ?></small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" /> <label for="url"><small>Website</small></label></p>

<?php endif; ?>

<!--<p><small><strong>XHTML:</strong> Penggunaan tags ini bila diperlukan saja: <?php echo allowed_tags(); ?></small></p>-->

<p><textarea name="comment" id="comment" cols="50" rows="10" tabindex="4"></textarea></p>

Page 19: Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline

<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" title="Please review your comment before submitting" /> <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /> </p> <?php do_action('comment_form', $post->ID); ?> </div> </form>

<?php endif; // jika reg diharapkan dan kondisi tidak login ?>

<?php endif; // bagian ini jangan dipahus, kalo ga langit di atas kepala lu akan runtuh, hehheee... ?>

Membuat 404.php (load => strktur. file 404 page handler)

Woke bagian ini sederhana kok, fungsina , cuma untuk handler ZERO query aja, juga untuk Cannot Find Page Handler.

Script Tag:

<?php //get_header(); //aktifin kalo lu pake file include header.php /* sori disini gue ga pake include header , alnya kmaren dicoba, ga proporsional spasi table na ma konten utama, HERAN GUE .... HEHE... */ ?>

<div class="warning"> <p> <?php _e('404 - Not Found'); ?> </p>

<p><?php _e('Sorry, no posts matched your criteria.'); // pesan2 error ini diharapkan jangan diganti untuk memenuhi standarisasi dari wordpress.org ?></p> </div>

Page 20: Tutorial Membuat Template Wordpress Blog

Wordpress Glassy Three - Blog Theme Webmaster Tingkat Advance Author : dr.emi

Tutorial versi PDF Semoga bermanfaat, Amin Dikeluarkan dan disusun oleh www.dremi.info Hairul Azami – [email protected] Untuk media pembelajaran Offline

Wow , sampe sini dah beres strktur file dan script tag template WP baru lu.. tinggal lu packing, dan kopiin ke folder:

RootWP/wp-content/themes/nama-folder-template/

Wah selesai juga tutor na.. hehe.. gue berharap banget tmen2 bisa merespon di forum tanya jawab dr.emi

Wassalam, hairul azami

Secangkir kopi hangat disaat merenung:...... (dibuat pas lagi kecewa ma kerjaan yg sekarang dikantor, judulna : 'Percuma Kerja Rajin, Bisa Segala Rupa, Kalo Ga di Hargaii...Huh Saat saat yang membosankan.., Tapi gue coba bertahan dulu dah...') ..