Themetation

Before that, you need to download and install a localhost in your pc. I am using xampp for this. After that, download wordpress from wordpress official website. Then, we will use the default theme to start the wordpress implementation. Below is the main sections that we need to take care with. I also create a few extra files for the theme we are going to build.

Sections that we will cover in this chapter:

1. header.php
2. sidebar.php
3. about.php – a custom file for the about section in the sidebar.
4. footer.php
5. index.php
6. featured-post.php – a custom file for the featured posts.
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

Basic Structure of WordPress

Below is the basic structure of wordpress.

A Break Down Of the Template_tags We Used

Along the way, you might don’t know what the template_tags mean to you. Don’t worry, here is a list of them and I’ll try to explain to you.

<?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 */

Implementation

header.php

Easy part for you guys.

<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

For the sidebar, wordpress have their own structure for it. Each section will start with a list. Normally is an second level unordered list <li>. We need to define the sidebar here. So that we can apply widget on it.

<!--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

I created this file to make the work easier. Here, we will have a loop to request for the post which named as “about”. We use query_posts to call the page – about. After that, we define 2 custom fields for it. For your information, we also need to add the ‘key” and “value” of this custom fields when we are creating the page. For example, the key is myphoto and what you need to do is type in the value for it in 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

This is the most easiest part to implement.

<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

The main page or blog page also called as posts page. i use the query_posts here to exclude the posts under category with ID = 3 which is also the category for the featured post. We only need to insert the codes accordingly. I think this won’t be a problem for you. The only changes I made for the original wordpress template is the_content(). I made it as the_content(”) which means there will be an empty space for the ‘read more ‘ link. This is because I already create 1 at the bottom of every post and I give it a link which means link to the targeted post with a pointer to the read more break line.

<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>

featured-post.php

To display the post under featured post category. Again, I use the query_posts loop to get 1 post from the category of featured post (3). And also defined 2 custom fields for them. Maybe you will say that it is too much. Because every time you write a featured post, you need an image and description. But, if this thing can help your site look more organized and professional. Why not?

<?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 */

Continue

Share it!

('��)