How To Create WordPress Themes From Scratch Part 3a

July 17th, 2008 by under Tips

Now, its time to do the implementation. I break it into several sub sections. In implementation, you need to know some wordpress template tags. You can refer to this link when you are doing it. Let’s start then.

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

111 Comments | RSS 2.0 | Trackback Add comment
From old to new:
  1. Julio Fragoso July 19th, 2008
  2. Dishiwala July 30th, 2008
  3. kailoon July 31st, 2008
  4. Alfonso August 13th, 2008
  5. kailoon August 13th, 2008
  6. gecedelisi August 29th, 2008
  7. Joe October 1st, 2008
  8. Paul October 1st, 2008
  9. Adgar October 4th, 2008
  10. NetOperator Wibby October 13th, 2008
  11. John October 28th, 2008
  12. belko December 18th, 2008
  13. Indonesian People December 30th, 2008
  14. kailoon December 31st, 2008
  15. Jonathan January 23rd, 2009
  16. Amer April 1st, 2009
  17. Brandon C. April 16th, 2009
  18. beijingwangzhanjianshe April 16th, 2009
  19. Amit April 21st, 2009
  20. sambo April 29th, 2009
  21. sambo April 29th, 2009
  22. sambo April 29th, 2009
  23. kailoon April 30th, 2009
  24. kailoon May 18th, 2009
  25. Dbob May 19th, 2009
  26. Victoria June 14th, 2009
  27. Creative Freaks June 23rd, 2009
  28. Albyz August 4th, 2009
  29. AuraRinoa August 20th, 2009
  30. sandy September 9th, 2009
  31. Alex September 15th, 2009
  32. Ezequiel September 17th, 2009
  33. FourPx Rathnaraj September 17th, 2009
  34. Kevin October 19th, 2009
  35. SEO in Texas October 27th, 2009
  36. Jason October 30th, 2009
  37. kailoon October 31st, 2009
  38. Tata Sky+ Review November 9th, 2009
  39. Hridoy December 28th, 2009
  40. tripti January 7th, 2010
  41. Marvin January 18th, 2010
  42. neo February 7th, 2010
  43. neo February 7th, 2010
  44. Abhinav March 17th, 2010
  45. Chandrakant March 25th, 2010
  46. បាត់ដំបង April 2nd, 2010
  47. Luis Clark May 19th, 2010
  48. Web Oracle June 15th, 2010
  49. prepaid handy June 26th, 2010
  50. futurman June 28th, 2010
  51. duyduong July 23rd, 2010
  52. koty81 July 25th, 2010
  53. Faheem August 11th, 2010
  54. Rai Adi Sanjaya August 21st, 2010
  55. Itai September 23rd, 2010
  56. Abhinab Roy October 7th, 2010
  57. Jen October 26th, 2010
  58. AgusDemak November 27th, 2010
  59. Jasmine December 24th, 2010
  60. zocX January 13th, 2011
  61. zocX January 14th, 2011
  62. Arvind Sundaram February 12th, 2011
  63. Kade March 10th, 2011
  64. Saemie Chouchane March 24th, 2011
  65. ronel April 6th, 2011
  66. Albert April 14th, 2011
  67. Matched betting May 19th, 2011
  68. Moble Rates May 25th, 2011
  69. sarankumar July 4th, 2011
  70. Arvin July 11th, 2011
  71. طراحی وب سایت August 1st, 2011
  72. f4l September 4th, 2011
  73. jerry September 5th, 2011
  74. umesh Y K September 20th, 2011
  75. Online Cricket Score September 22nd, 2011
  76. utuxsecrets September 24th, 2011
  77. Robert October 7th, 2011
  78. PhD Pharma Whey October 21st, 2011
  79. rravat111 March 31st, 2012
  80. husain ahmed April 24th, 2012
  81. Brett April 30th, 2012
  82. njedite June 25th, 2012
  83. imam June 25th, 2012
  84. bappi July 4th, 2012