WP-Designer Theme Whoa?

Buat File layout di photoshop------>>>>>>>lanjutkan dengan

tekhnik ini…:P
Sorry dalam bahasa inggris dulu…tapi..codingnya pake bahasa
Indonesia kok………………….
Source : http://themetation.com
Structuring

This is a very important part in designing a web layout. We need to structure our layout before
open Photoshop. The first thing is the purpose of the layout. In our case, this will be a blog
layout for WordPress. So, below is what we have in a blog:

1. Header
2. Posting area
3. Sidebar
4. Single page
5. Comment
6. Feedback
7. Searching field
8. Page menu
9. RSS
10. Archives, Links and About Page

Something we need to keep in mind. We can’t put all things into one basket. So, we CANNOT:

1. Display too many things in one single page.

2. Use too many colors and font type.

In this sample, I also try to make is as simple as possible because the purpose of this series of
tutorial is to give an example on how to create a wordpress theme. I am going to have a featured
post section on the main page. Below is the Final image that we will create.

Final Result
Photoshop

Step 1

Create a new document with 1024px X 768px as we are going to create a layout which suit for
1024px resolution. Fill it the background layer with #eae8c6. Now, CTRL + R to bring out the
ruler. Draw some guide line for the divine proportion we need. Before this, make sure it is snap.
Go to View > snap (selected).

Step 2

Grab the rectangle tool and draw a header for it. The height, you have to estimate how much
you want. Balance is the main thing you need to concern. Then, apply the blending option as
shown below. A black to white gradient with soft light blend mode. Create another rectangle,
apply gradient overlay with setting as shown below. Put it 1px below the green bar. It will
make it more details. Then, draw a 1 pixel line and put it right above the gap between the two
bars you created before. Give it a darker color.

Step 3

I use Myriad Pro. So, you guys can edit it by yourself later. Apply drop shadow with the
setting shown below. Then, also apply Gradient Overlay with 12% opacity, black to white.
For the white outline stroke. Simply hold the CTRL tab and click on the text layer to get the
selection. Go to Select > Modify > Contract > 1px. After that, create a new layer. Go to Edit
> Stroke > 1px, white, inside.

Step 4
Draw a rectangle, remember, the maximum width you can use is 600px. Ok, make its white
color. Apply 1px inside white stroke. And, Gradient Overlay with the setting as shown below.

Step 5

The read more button is actually using the same technique where we used for the logo. This time,
we apply Inner Glow with 8px size and 75% Opacity in Soft Light Blend Mode. Gradient
Overlay with 70% opacity also in Soft Light Blend Mode. Finally, A 1px outside stroke with
color #47670b. Then, for the 1px inside white stroke. It is same with what we did in step 3.

Step 6
Place in some dummy text and photo. You will have something like this. You can use a text
generator for this.

Step 7

Put in some Dummy Text again. Try to use none anti-alias font for testing. Don’t forget what a
wordpress theme needed. Post title, tags, post date, comments number. This time, I add in author
photo part to be shown in every post.

Step 8

Place a RSS icon. I forgot where I downloaded it already…sorry about that… Then, For the
search area, create a rounded rectangle with a maximum width of 330px. Fill it with black color
and set it blend mode to soft light. Create another rounded rectangle inside. This will be our
input field. Fill it with white color. Apply 1px inside stroke with color – #d0ceae. Then, apply
inner Glow, with setting shown below. After that, place the searching icon.

Step 9

Draw a rounded rectangle and use the pen tool to draw a dialog box as shown below. You can
refer to my previous tutorial in LoonDesign on how to create a custom shape in photoshop. Then,
apply drop shadow on it. Use the rectangle tool to create the categories and links content box.
The maximum width will be 160px. We need a 10px space in between them.

Step 10
We are almost there. Now, we will use the same technique we used to create the header part.

Conclusion

You may found that I do not mention about the page navigation part. I think it is too simple for
you. Try it out yourself. If really can’t, I am also providing the source file for you here. Overall,
there is several things we need to consider when creating a wordpress theme. In this example, we
are creating for blogging purpose. So, the major section will be, categories, tagging, author
photo, comments and also the RSS feed. I prefer to make things more organizes. So, you can
found that all the layers in my psd file are well renamed and each section is well separated. This
is for future modification purpose and also for my dear reader to modify it easily.

Single Page

As we are creating theme for wordpress, there must be a single page to display a post and
comment section. Here is the final output.

Sebelum kita potong, kita perlu memastikan komponen apa yang kita dapat menggantinya dengan css
dan bagian mana kita perlu keluar slice. Juga, pertimbangkan gambar latar belakang yang kita hanya
dapat menggunakan gambar lebar 1px dan mengaturnya untuk mengulang di latar belakang. Ini akan
menghemat bandwidth lebih banyak dan kapasitas sementara juga menambah waktu loading. Pergi ke
View snap>. Kita perlu memastikan alat pengiris snap dapat otomatis ke tepi dari objek yang kita
butuhkan. Untuk memilih alat slice, cukup tekan pada 'k' dari keyboard.
Karena langkah-langkah mengiris tidak jelas, jadi saya membuat video ini untuk Anda. Saya berharap
video singkat ini bisa menjelaskan lebih baik. Berikut adalah beberapa tombol shorcut jika anda
menggunakan PC:

* K »Slice Tool
* Space Bar + Mouse Drag »Pindah layar
* CTRL + ALT + SHIFT + S »Simpan untuk web

Ketika Anda akan memilih irisan untuk menyimpan untuk web.

* Space Bar + Mouse Drag »Pindah layar

* SHIFT + Waktu Klik Pilih »beberapa iris

Di sini, Anda mungkin memperhatikan bahwa saya akan menyimpan gambar layout ke PNG-24 yang jelas
tetapi dengan sedikit peningkatan ukuran file.
Berulang image

Kami menggunakan latar belakang header sebagai gambar berulang. Dalam hal ini, kita harus sangat
berhati-hati untuk mengiris keluar perbatasan dua warna yang berbeda. Lihat layar shot di bawah ini.

Gambar Slice

Untuk memotong gambar penuh, kita perlu untuk memperbesar selalu. Terkadang kita perlu zoom
maksimum (1600) untuk mendapatkan hasil terbaik. Sebagai contoh:
CSS / HTML Coding

Kita perlu mengetahui bagian utama untuk layout sebelum kita mulai. Bagian yang harus
dipertimbangkan adalah:

1. Wrapper (untuk memegang seluruh tata letak kecuali footer)

2. Header (untuk bagian header termasuk navigasi halaman)
3. Konten (untuk memegang area posting dan juga sidebar)
4. Waktu-pelana (untuk area posting, komentar bagian dan menanggapi bagian)
5. Col kanan (sidebar, RSS, tentang aku dan kolom pencarian)
6. Footer (footer)

Persiapan

Saya menggunakan Dreamweaver sebagai editor. Sebelum kita mulai. Buat file index.html stlye.css dan
sebuah. Tempatkan kode di bawah sebelum judul di index.html tersebut.

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Langkah 1 - Menyiapkan struktur Utama

Berikut adalah wadah utama untuk tata letak. Aku meletakkan footer keluar dari pembungkus untuk
lebar penuh untuk resolusi yang berbeda.

<!--wrapper-->
<div id="wrapper">
<!--content-->
<div id="content">
<!--left-col--><div id="left-col"></div><!--left-col-end-->
<!--right-col--><div id="right-col"></div><!--right-col-end-->
</div><!--content-end-->
</div><!--wrapper-end-->
<!--footer--><div id="footer"></div><!--footer-end-->

Langkah 2 - Tambahkan More Details Ke Dalam Bagian Tertentu

Berikut adalah wadah utama untuk tata letak. Aku meletakkan footer keluar dari pembungkus
untuk lebar penuh untuk resolusi yang berbeda.

<!--wrapper-->
<div id="wrapper">
<!--header-->
<div id="header">
<!--logo-->
<div id="logo"><h1><!--Logo link--></h1></div>
<!--logo-end-->
<!--page-navigation-->
<div id="menu">
<ul>
<li class="page_item"><a href="#">Gallery</a></li>
<li class="page_item"><a href="#">Contact</a></li>
<li class="page_item"><a href="#">About</a></li><!--we need to
float this to the right, so, we need to make it in reverse way-->
</ul>
</div><!--page-navigation-->
</div><!--header-end-->

<!--content-->
<div id="content">

<!--left-col-->
<div id="left-col">

<!--featured-post--><div id="featured-post"><!--featured post

will goes here--></div><!--featured-post-end-->
<!--post--><div class="post"><!--blog posts will go here--
></div><!--post-end-->

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

<!--right-col-->
<div id="right-col">

<!--rss subscriber--> <div id="feed"></div><!--rss

subscriber-end-->

<!--search--><div id="searchform"></div><!--search-end-->

<!--about--><div id="about"></div><!--about-end-->

<!--sidebar-->
<div id="sidebar">
<!--sidebar1--><div id="sidebar1"></div><!--sidebar1-
end-->
 <!--sidebar2--><div id="sidebar2"></div><!--sidebar2-
end-->

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

</div><!--right-col-end-->
</div><!--content-end-->
</div><!--wrapper-end-->

<!--footer--><div id="footer"></div><!--footer-end-->

Langkah 3 - CSS Untuk Kontainer Utama

Berikut adalah wadah utama untuk tata letak. Aku meletakkan footer keluar dari pembungkus
untuk lebar penuh untuk resolusi yang berbeda.

#wrapper {
width: 960px;
margin: 0 auto;
}

#header {
width: 960px;
height: 100px;
float: left;
}

#content {
width: 960px;
float: left;
}

#content #left-col {
width: 600px;
float: left;
position: relative;
padding-right: 30px;
}

#content #right-col {
width: 330px;
margin-top: 20px;
float: left;
position: relative;
}

#content #right-col #sidebar {

width: 330px;
float: left;
position: relative;
}

#footer {
width: 100%;
float: left;
 background: url(images/footer-bg.png) repeat-x top left;
height: 23px;
padding-top: 40px;
color: #fff;
}

Langkah 4 - CSS Untuk Daftar Halaman

Kita tahu bahwa menu akan menempel ke sisi kanan. Dalam hal ini, menu akan dalam urutan. Jadi, kita
perlu untuk mengapung dengan benar.

#header #menu {
float: left;
width: 500px;
margin-top: 38px;
}

#header #menu ul {
width: 500px;
list-style: none;
float: right;
text-align: right;
}

#header #menu ul li.page_item { /* page_item is wordpress default class for

page list */
float: right;
}

#header #menu ul li.page_item a {

padding: 4px 8px;
display: block;
margin: 0 7px 0 0;
float: left;
text-decoration: none;
font: 900 14px Arial, Helvetica, sans-serif;
color: #a9bf78;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
}

#header #menu ul li.page_item a:hover {

color: #fff;
}

#header #menu ul li.current_page_item a { /* current_page_item is wordpress

default class for active page list */
color: #fff;
background-color: #2c4106;
}

Langkah 5 - Struktur Sidebar

WordPress memiliki struktur sidebar default. Ini adalah desain untuk cocok untuk semua widget Anda
akan digunakan di masa depan. Widget yang Anda terapkan akan dimulai pada tingkat kedua dari daftar.
<!--sidebar-->
<div id="sidebar"><h3>Sidebar</h3>
<!--sidebar1-->
<div id="sidebar1">
<ul>
<li><h2>Category</h2>
<ul><!--the widget will start at the second level of the
list-->
<li></li>
</ul>
</li>
<li><h2>Links</h2>
<ul>
<li></li>
</ul>
</li>
</ul>
</div><!--sidebar1-end-->
</div><!--sidebar-end-->

Langkah 6 - CSS Untuk Struktur Sidebar

WordPress memiliki struktur sidebar default. Ini adalah desain untuk cocok untuk semua widget
Anda akan digunakan di masa depan. Widget yang Anda terapkan akan dimulai pada tingkat
kedua dari daftar.

#sidebar ul {
list-style: none;
}

#sidebar1 {
float: left;
width: 160px;
padding-right: 10px;
}

#sidebar2 {
float: left;
width: 160px;
}

#sidebar ul {

#sidebar ul li {
float: left;
width: 158px;
background-color: #d7d39a;
border: 1px solid #bbb875;
margin-bottom: 10px;
}
#sidebar ul li h2 { /* this is the widget title */
padding: 3px 4px 6px;
font: 400 18px Arial, Helvetica, sans-serif;
color: #4c6b0d;
}

#sidebar ul li ul {

#sidebar ul li ul li { /* begin for the widget list */

float: left;
width: 158px;
border: 0;
margin-bottom: 0;
}

#sidebar ul li ul li a {
border-top: 1px solid #bbb875;
float: left;
width: 150px;
text-decoration: none;
color: #5d5b35;
padding: 2px 4px;
}

#sidebar ul li ul li a:hover {
color: #fff;
background-color: #bbb875;
}

Langkah 7 - Komentari Bagian Untuk Page Single

Berikut adalah bagian komentar.

<!--comments-->
<div id="comments">
<h3 id="comment-title">Comments</h3>
<ol>
<li>
<div class="comment-data"><!--the left comment box for the content-->
<p><!--comment goes here--></p>
</div>

<div class="comment-info"><!--the right hand side for the commentor

gravatar and info-->
<!--author avatar-->
<br /><strong><a href="#"><!--author name--></a></strong><br
/><!--date-->
</div>
</li>

<li class="alt"><!--the alternative style for the comment box-->

<div class="comment-data">
<p><!--comment goes here--></p>
</div>
 <div class="comment-info"><!--the right hand side for the commentor
gravatar and info-->
<!--author avatar-->
<br /><strong><a href="#"><!--author name--></a></strong><br
/><!--date-->
</div>
</li>

</ol>
</div><!--comments-end-->

Langkah 8 - CSS Untuk Bagian Komentari

Saya tidak akan menunjukkan struktur halaman di sini karena itu sebenarnya mirip dengan halaman
indeks. tapi saya memperlihatkan kepada Anda bagian komentar.

#comments {
margin-top: 15px;
float: left;
width: 600px;
}

h3#comment-title {
background: url(images/comments.png) no-repeat top left;
width: 600px;
float: left;
text-indent: -9999em;
padding-top: 5px;
}

#comments ol, #comments ol li {

float: left;
width: 600px;
list-style: none;
padding: 0;
}

#comments ol li .comment-data {
float: left;
width: 478px;
margin-right: 10px;
background-color: #d7d39a;
padding: 5px 10px;
min-height: 120px;
_height: 120px; /* an IE6 hack */
overflow: auto;
border: 1px solid #c1bd85;

#comments ol li.alt .comment-data {

float: left;
width: 478px;
margin-right: 10px;
background-color: #eae8c6;
 padding: 5px 10px;
min-height: 120px;
border: 1px solid #c1bd85;
_height: 120px; /* an IE6 hack */
overflow: visible;
margin-top: -1px;
margin-bottom: -2px;
}

#comments ol li .comment-info {
width: 90px;
float: left;
text-align: right;
font-size: 10px;
line-height: 12px;
}

#comments ol li .comment-info a img {

border: 0;
margin-bottom: 5px;
}

#comments ol li .comment-info a {
text-decoration: none;
}

Part II
Sekarang, saatnya untuk melakukan pelaksanaannya. Aku memecah menjadi beberapa sub bagian.
Dalam pelaksanaannya, Anda perlu tahu beberapa tag template wordpress. Anda dapat merujuk ke link
ini ketika Anda melakukannya. Mari kita mulai lalu.

Sebelum itu, Anda perlu mendownload dan menginstal localhost di pc Anda. Saya menggunakan xampp
untuk ini. Setelah itu, download wordpress dari situs resmi wordpress. Kemudian, kita akan
menggunakan tema default untuk memulai pelaksanaan wordpress. Berikut ini adalah bagian utama
yang perlu kita ambil peduli dengan. Saya juga membuat beberapa file tambahan untuk tema kita akan
membangun.

Bagian yang akan kita bahas pada bab ini:

1. header.php
2. sidebar.php
3. about.php - file kustom untuk bagian tentang di sidebar.
4. footer.php
5. index.php
6. fitur-post.php - file kustom untuk posting fitur.
7. page.php
8. single.php
9. comments.php
10. archives.php, links.php
11. search.php, searchform.php
12. function.php
 13. image.php

Struktur Dasar WordPress

Berikut adalah struktur dasar dari wordpress.

Sebuah Break Down Dari Template_tags Kami Digunakan

Sepanjang jalan, Anda mungkin tidak tahu apa yang template_tags artinya bagi Anda. Jangan
khawatir, di sini adalah daftar dari mereka dan aku akan mencoba untuk menjelaskan kepada
Anda.

<?php echo get_option('home'); ?> /* get the home URL */

<?php bloginfo('description'); ?> /* display the blog description */
<?php bloginfo('name'); ?> /* display the blog name */
<?php bloginfo('template_directory') ?> /* get the home URL for template's
directory */

<?php wp_list_pages('sort_order=desc&title_li='); ?> /* display the page list

in descending order withour title */
<?php wp_list_bookmarks(); ?> /* display the list of blogrolls */

===============within a loop===============
<?php the_content(); ?> /* display the contents of the current post */
<?php the_content(''); ?> /* the text "read more" will not show up */
<?php the_tags('', ' . ', ''); ?> /* dispaly the tags of the post */
<?php the_time('F jS, Y') ?> /* display the time of the current post */
<?php the_ID(); ?> /* display the numeric ID of the current post */
<?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?> /*
display a link to them comment*/
<?php the_author() ?> /* display the author's name of the post */
<?php the_author_ID()?> /* display the unique numeric user ID for the author
of a post */
<?php echo get_avatar( $comment, 80 ); ?> /* display the commentor avatar in
a size of 80px X 80px */
<?php comment_text() ?> /* display the comment content */
<?php the_permalink() ?> /* display the URL for the permalink of the post
currently being processed */

============Paganavigation===============
<?php previous_post_link('%link', 'Previous Post') ?> /* display a link to
the previous post with an anchor text as "Previous Post" */
<?php next_post_link('%link', 'Next Post') ?> /* display a link to the next
post with an anchor text as "Next Post" */
<?php posts_nav_link('','','« Previous Entries') ?> /* display a link to the
previous page with an anchor text as "Previous Page" */
<?php posts_nav_link('','Next Entries »','') ?> /* display a link to the next
page with an anchor text as "Next Page" */
<?php previous_image_link() ?> /* display a link to the previous image within
the gallery */
<?php next_image_link() ?> /* display a link to the previous image within the
gallery */

============file linking=================
<?php get_header(); ?> /* load header.php */
<?php get_sidebar(); ?> /* load sidebar.php */
<?php get_footer(); ?> /* load footer.php */
<?php comments_template(); ?> /* load comments.php */
<?php include (TEMPLATEPATH . '/searchform.php'); ?> /* load searchform.php
*/
<?php include('about.php'); ?> /* load about.php */
<?php include('featured-post.php'); ?> /* load featured-post.php */

============widgetize sidebar============
<?php if ( !function_exists('dynamic_sidebar') ||
!dynamic_sidebar('sidebar2') ) : ?>
/* if it is a widgetize sidebar, defince this as sidebar 2*/
<?php endif; ?>

============define the page template name in admin panel==================

<?php
/*
Template Name: Links
*/
?>

============normal post loop==================

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
/* a normal posts loop, the contents go here */
<?php endwhile; else: ?>
<?php endif; ?>/* end loop */

============query post loop==================

<?php query_posts($query_string);
while (have_posts()) : the_post(); ?> /* get all posts excluding posts under
category with ID=3 */
/* the contents go here */
<?php endwhile; ?>/* end loop */

============comment loop==================
<?php foreach ($comments as $comment) : ?> /* start the comments loop */
<?php endforeach; ?>/* end comments loop */

============use of custom fields==================

<?php while (have_posts()) : the_post(); /* start the loop */
$myphoto = get_post_meta($post->ID, "myphoto", TRUE); /* define the custom
field key for the post being processed in the loop with the ID */
$mydesc = get_post_meta($post->ID, "mydesc", TRUE); /* define the custom
field key for the post being processed in the loop with the ID */
?>

<?php echo $mydesc; ?> /* display the custom field value */

<?php endwhile; ?> /* end loop */

Pelaksanaan
header.php

Mudah bagian untuk kalian.

<body>
<div id="wrapper">
<div id="header">
<div id="logo"><h1><a href="<?php echo get_option('home'); ?>"
title="<?php bloginfo('description'); ?>"><?php bloginfo('name');
?></a></h1></div>
<div id="menu">
<ul>
<?php wp_list_pages('sort_order=desc&title_li='); ?>
</ul>
</div>

</div>

sidebar.php

Untuk sidebar, wordpress memiliki struktur sendiri untuk itu. Setiap bagian akan mulai dengan
daftar. Biasanya adalah tingkat <li> daftar kedua unordered. Kita perlu mendefinisikan sidebar di
sini. Sehingga kita dapat menerapkan widget di atasnya.

<!--right-col-->
<div id="right-col">

<div id="feed">
<a href="<?php bloginfo('url'); ?>/feed" class="rss">RSS</a>Subscribe
to my feed now.
</div>

<!--search-->
<?php include (TEMPLATEPATH . '/searchform.php'); ?> /* load a file
which named as searchform.php */
<?php include('about.php'); ?> /* load a file which named as about.php
*/
 <div id="sidebar"><h3>Sidebar</h3>

<div id="sidebar1">
<ul>
<?php if ( !function_exists('dynamic_sidebar') ||
!dynamic_sidebar('sidebar1') ) : ?>
/* if it support widgetize sidebar, declare the widget sidebar as
sidebar 1 */
<?php wp_list_categories('title_li=<h2>Categories</h2>');
?>
/*A template tag to list down the categories with a title
named Categories */
<?php endif; // end of sidebar1 ?>
</ul>
</div>

<div id="sidebar2">
<ul>
<?php if ( !function_exists('dynamic_sidebar') ||
!dynamic_sidebar('sidebar2') ) : ?>
/* if it support widgetize sidebar, declare the widget sidebar as
sidebar 2 */
<?php wp_list_bookmarks(); ?>/*A template tag to list down
the blogroll */
<?php endif; // end of sidebar1 ?>
</ul>

</div>
</div>

</div>

about.php

Saya buat file ini untuk membuat pekerjaan lebih mudah. Di sini, kita akan memiliki loop untuk meminta
posting yang dinamakan sebagai "tentang". Kami menggunakan query_posts untuk memanggil halaman
- tentang. Setelah itu, kita mendefinisikan 2 kolom kustom untuk itu. Untuk informasi Anda, kami juga
perlu menambahkan 'kunci "dan" nilai "dari bidang adat ketika kita membuat halaman. Sebagai contoh,
kuncinya adalah myphoto dan apa yang perlu Anda lakukan adalah mengetikkan nilai untuk itu di admin
panel.

<!--about-->
<div id="about">
<?php query_posts('pagename=about'); ?> /* request page which name equal
to "about" */
<?php while (have_posts()) : the_post(); /* if have posts */
$myphoto = get_post_meta($post->ID, "myphoto", TRUE);
/* define the custom field with key = myphoto */
$mydesc = get_post_meta($post->ID, "mydesc", TRUE); ?>
/* define the custom field with key = mydesc */

<h3>About Me</h3>
/* <?php echo $mydesc; ?> to call the value for the mydesc and so on
*/
 <a href="<?php bloginfo('url'); ?>/about"><img src="<?php echo
$myphoto; ?>" alt="<?php bloginfo('blogname'); ?>" title="<?php
bloginfo('blogname'); ?>" /></a><span><?php echo $mydesc; ?> ... <a
href="<?php bloginfo('url'); ?>/about">more</a></span>
</div><!--about-end-->

<?php endwhile; ?> /* end loop */

footer.php

Ini adalah bagian yang paling mudah untuk diimplementasikan.

<div id="footer">
<div class="footer-text">
<span>Copyright © 2008. <a href="<?php bloginfo('url'); ?>"><?php
bloginfo('name'); ?></a>. Powered by <a
href="http://wordpress.org">WordPress</a>.</span>
<em>WordPress Theme by <a href="http://themetation.com" target="_blank"
title="Themetationn">Themetation</a>.</em>
</div>
</div>
<?php wp_footer(); ?>
</body>

index.php

Halaman utama atau halaman blog juga disebut sebagai halaman posting. saya menggunakan
query_posts sini untuk mengecualikan tulisan di bawah kategori dengan ID = 3 yang juga merupakan
kategori untuk posting yang ditampilkan. Kita hanya perlu memasukkan kode yang sesuai. Saya pikir ini
tidak akan menjadi masalah bagi Anda. Perubahan hanya saya buat untuk template wordpress asli
the_content (). Aku menjadikannya sebagai the_content (") yang berarti akan ada ruang kosong untuk
'read more' link. Ini karena saya sudah membuat 1 di bagian bawah setiap pos dan saya memberikan link
yang berarti link ke posting target dengan pointer ke garis membaca istirahat lebih.

<div id="left-col">
<?php include('featured-post.php'); ?> /* load the file named as featured-
post.php */

<!--post-->
<?php query_posts($query_string.'&cat=-3');
while (have_posts()) : the_post(); ?>
/* start the loop but exclude posts from category ID = 3 */

<div class="post" id="post-<?php the_ID(); ?>">

<div class="post-info">
<img src="<?php bloginfo('template_directory') ?>/images/authors/<?php
the_author_ID()?>.jpg" alt="<?php the_author() ?>" title="<?php the_author()
?>" />
<em><?php the_time('F jS, Y') ?></em>
<span class="post-tag"><?php the_tags('', ' . ', ''); ?></span>
</div>
<div class="entry">
 <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent
Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> /*
the post title */
<?php the_content(''); ?> /* the post content,I use an empty '' so
that it will not showing anything when we use the read more tag */
</div>
<p class="metadata"><?php comments_popup_link('No Comments', '1
Comment', '% Comments'); ?> . <a href="<?php the_permalink() ?>#more-<?php
the_ID(); ?>">read more</a></p>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php posts_nav_link('','','« Previous
Entries') ?></div>
<div class="alignright"><?php posts_nav_link('','Next Entries
»','') ?></div>
</div>

/* end loop */
</div>

fitur-post.php

Untuk menampilkan posting di bawah kategori posting fitur. Sekali lagi, saya menggunakan loop
query_posts untuk mendapatkan 1 post dari kategori pasca fitur (3). Dan juga mendefinisikan 2 kolom
kustom untuk mereka. Mungkin Anda akan mengatakan bahwa itu terlalu banyak. Karena setiap kali
Anda menulis posting fitur, Anda memerlukan gambar dan deskripsi. Tapi, jika hal ini dapat membantu
situs Anda terlihat lebih terorganisir dan profesional. Mengapa tidak?
<?php query_posts('category_name=featured post&&showposts=1'); ?> /* request
post only under category name is featured post and only show maximum of 1
post */
<?php while (have_posts()) : the_post();
$fimg = get_post_meta($post->ID, "thumb", TRUE); /* define the custom field
with key = thumb */
$fdesc = get_post_meta($post->ID, "desc", TRUE); ?> /* define the custom
field with key = desc */

<div id="featured-post">
<h3>Featured Post</h3>
<div class="featured">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link
to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> /* post
title */

<span id="f-date"><?php the_time('F jS, Y') ?> . by <?php the_author() ?> .

<a href="#"><?php comments_popup_link('No Comments', '1 Comment', '%
Comments'); ?></a></span>

<p><img src="<?php echo $fimg; ?>" width="140px" height="100px" alt="<?php

the_title(); ?>" /><?php echo $fdesc; ?></p>

<small><?php the_tags('', ' . ', ''); ?></small>

</div>
<a href="<?php the_permalink() ?>" id="readmore">read more</a>
</div>
<?php endwhile; ?> /* end loop */

Pelaksanaan
page.php
Sebuah template halaman yang kita gunakan untuk membuat halaman. Tidak jauh
berbeda dengan index.php.

<?php get_header(); ?> /* get the header */

<div id="content">
<div id="left-col">
<?php if (have_posts()) : while (have_posts()) : the_post();
?> /* if have post */
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2> /* page title*/
<div class="entry">
<?php the_content('<p class="serif">Read the
rest of this page &raquo;</p>'); ?> /* page content */
<?php wp_link_pages(array('before' =>
'<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' =>
'number')); ?>
</div>
</div>
<?php endwhile; endif; ?> /* end loop */
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?> /* appear
when admin is login */
</div>
<?php get_sidebar(); ?> /* get the sidebar */
</div>
</div>
<?php get_footer(); ?> /* get the footer */

single.php

Single.php digunakan untuk menampilkan single post dengan komentar dan menanggapi bagian. Saya
hanya akan menampilkan bagian penting untuk itu.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> /* if have

posts */
<div class="post" id="post-<?php the_ID(); ?>">
<div class="post-info">
<img src="<?php bloginfo('template_directory') ?>/images/authors/<?php
the_author_ID()?>.jpg" alt="<?php the_author() ?>" alt="<?php the_author()
?>" title="<?php the_author() ?>" />
<em><?php the_time('F jS, Y') ?></em>
<span class="post-tag"><?php the_tags('', ' . ', ''); ?></span>
</div>

<div class="entry">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?> /* load post content in full version */
</div>

<?php comments_template(); ?> /* load the comment section */

comments.php

Komentar bagian untuk menampilkan semua komentar di posting tunggal. Biasanya, kami hanya
mengedit mulai dari garis 18.
<div id="comments">
<?php if ($comments) : ?> /* if comments exist */
<h3 id="comment-title">Comments</h3>
<ol>
<?php foreach ($comments as $comment) : ?> /* comments loop start */
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID()
?>">
<div class="comment-data">
<?php comment_text() ?> /* comments content*/
<?php if ($comment->comment_approved == '0') : ?> /* if
comment is under moderation, this line will be shown */
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<?php edit_comment_link('edit','&nbsp;&nbsp;',''); ?> /* the edit
link for the admin*/
</div>

<div class="comment-info">
<?php echo get_avatar( $comment, 80 ); ?> /* to get the avatar of
the commentor */
<br /><strong><?php comment_author_link() ?></strong><br /><?php
comment_date('F jS, Y') ?>
</div>
</li>
<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
/* different style for the class named as "alt" */
?>
<?php endforeach; /* end for each comment */ ?> /* comments loop end*/
</ol>
<?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post->comment_status) : ?>
<!-- If comments are open, but there are no comments. -->
<?php else : // comments are closed ?>
<!-- If comments are closed. -->
<p class="nocomments">Comments are closed.</p>
<?php endif; ?>
<?php endif; ?>

Tepat setelah ini, ada bentuk komentar yang kita tidak berbuat banyak tentang hal itu.
archives.php, links.php

arsip dan link yang kedua template hanya halaman untuk menampilkan konten. Saya hanya akan
menampilkan template arsip di bawah ini.

<?php
/*
Template Name: Archives (to display the page template name which you can
select from the admin panel when creating a page.
*/
?>
<div class="post">
<h2>Archives by Month:</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?> /* to list the archives in
monthy */
</ul>
<h2>Archives by Subject:</h2>
<ul>
<?php wp_list_categories('title_li='); ?> /* to list the categories
without title */
</ul>
</div>

search.php, searchform.php

Search.php adalah untuk menampilkan hasil pencarian sementara searchform.php hanya berisi
searchform yang kita gunakan. bawah ini searchform tersebut.

<div id="searchform">
<form method="" action="<?php bloginfo('url'); ?>/">
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="&nbsp;" />
</form></div>

function.php

Kami menggunakannya untuk menentukan fungsi yang kita butuhkan dalam tema kami. Dalam
kasus kami, saya hanya menggunakannya untuk definisi sidebar.
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'sidebar1'));
register_sidebar(array('name'=>'sidebar2'));
?>
image.php

Ini adalah file baru sejak 2,5 wordpress. Ini adalah template halaman khusus untuk menampilkan
galeri foto yang kita buat. Sebenarnya, ada tidak jauh berbeda dengan template single.php
normal. Cek di bawah.
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> /* if have
posts */

<div class="post" id="post-<?php the_ID(); ?>">

<h2><a href="<?php echo get_permalink($post->post_parent); ?>"
rev="attachment"><?php echo get_the_title($post->post_parent); ?></a> &raquo;
<em><?php the_title(); ?></em></h2>

<p class="attachment"><a href="<?php echo wp_get_attachment_url($post-

>ID); ?>"><?php echo wp_get_attachment_image( $post->ID, 'medium' );
?></a></p> /* the medium size image */
<div class="caption"><?php if ( !empty($post->post_excerpt) )
the_excerpt(); // this is the "caption" ?></div> /* the photo caption */
 <?php the_content('<p class="serif">Read the rest of this entry
&raquo;</p>'); ?>

<div class="navigation"> /* image navigation for the gallery */

<div class="alignleft"><?php previous_image_link() ?></div>
<div class="alignright"><?php next_image_link() ?></div>
</div>
Kesimpulan dan menyebarkan berita!

Nah, setelah panjang tutorial. Tentu saja kami berakhir di sini. Saya berharap bahwa Anda dapat belajar
sesuatu dari rangkaian tutorial. Saya akan senang jika Anda dapat membantu saya untuk menyebarkan
tutorial untuk orang lain. Tapi, ingat untuk menghubungkan kembali ke pos aslinya. Terima kasih. Ok,
sekarang Anda dapat kepala ke tema gratis yang baru - superfresh di posting berikutnya untuk demo dan
download. Cheers!