How to Make Your Own Theme – PART 4

Step Four: Customizing the Index

Alrighty! We’ve finished up our header template and now it’s time to work on the index.

  1. Open up the “default” template (index.php) and take a look. You should see something like this:

    <?php get_header(); ?>

    <div id=”content”>

    <?php if (have_posts()) : ?>

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

    <div id=”post-<?php the_ID(); ?>”>   <h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h2>   <small><?php the_time(‘F jS, Y’) ?> <!– by <?php the_author() ?> –></small>

    <div>   <?php the_content(‘Read the rest of this entry &raquo;’); ?>   </div>

    <p>Posted in <?php the_category(‘, ‘) ?> | <?php edit_post_link(‘Edit’, ”, ‘ | ‘); ?>  <?php comments_popup_link(‘No Comments &#187;’, ‘1 Comment &#187;’, ‘% Comments &#187;’); ?></p>   </div>

    <?php endwhile; ?>

    <div>   <div><?php next_posts_link(‘&laquo; Previous Entries’) ?></div>   <div><?php previous_posts_link(‘Next Entries &raquo;’) ?></div>   </div>

    <?php else : ?>

    <h2>Not Found</h2>   <p>Sorry, but you are looking for something that isn’t here.</p>   <?php include (TEMPLATEPATH . “/searchform.php”); ?>

    <?php endif; ?>


    <?php get_sidebar(); ?>

    <?php get_footer(); ?>

    (Skip if you have a basic understanding of PHP)

    Brief Explanation:   Let’s take a moment to look at how this template works. At the top, we have <?php get_header(); ?>. What does this do? This tells WordPress to look for the header.php file and “include” it when it generates the default index page for your new WordPress theme.

    Then, the WordPress “Loop” begins with <?php if (have_posts()) : ?>. Inside this piece of code, which ends with <?php endif; ?>, WordPress “includes” the content published from within the WordPress Admin. For a simple blog theme, this would include your latest posts. Within the WordPress Loop we are able to use HTML as well as WordPress tags to decide what content to include and how we want it to be displayed.

    For example, let’s quickly look at the following piece of code:

    <small><?php the_time(‘F jS, Y’) ?> <!– by <?php the_author() ?> –></small>

    The <?php ?> elements draw information from WordPress and delivers it to you to format as you’d like. <?php the_author() ?>, when placed within The Loop, prints the name of the author of the current post, as defined within the WordPress Admin. Notice that it has HTML comment tags around it. This means that even though it’s there in the source code, the “default” template author has decided not to display it.

    Let’s practice a quick rearrangement:

    <span>Cheerfully writen on <?php the_time(‘M d, Y’) ?> by <?php the_author() ?></span>

    The template tags will be dynamically replaced with the information from WordPress and the output would look something like this:

    Cheerfully written on Feb 12 2013 by TJ Marsh

  2. Alright, moving forward! : ) – Take the existing index.php file and modify it, adding the elements from your own design and replacing your static elements with the WordPress template tags as appropriate. For example, take the following piece of code: <div id=”contentHeader”><h1>Content Title Goes Here</h1></div> – In order to have WordPress replace “Content Title Goes Here” with the title of our WordPress post, all we’d have to do is change that piece of code to look like this:<div id=”contentHeader”><h1><?php the_title(); ?></h1></div>Pretty nifty eh? In my example below, we’ve taken it a step further and made the title a link, using WordPress to dynamically grab the post URL, <?php the_permalink() ?>, and place it within our <a> tag. Take a look at the complete example below.

    <?php get_header(); ?>
    <div id=”notice”><p>Important Notice Goes Here</p></div>

    <div id=”contentContainer”>   <div id=”content”>

    <?php if (have_posts()) : ?>

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

    <div id=”contentHeader”><h1><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h1></div>
    < ?php the_content(‘Read More’); ?>
    < span>Continue Reading</span>
    < div id=”contentFooter”><p>Published <?php the_time(‘M d, Y’) ?> – <?php comments_popup_link(‘Comments? None yet’, ‘1 Comment so far’, ‘% Comments and counting’); ?> </p></div>   <?php endwhile; ?>

    <?php else : ?>

    <h2>Not Found</h2>   <p>Sorry, but you are looking for something that isn’t here.</p>   <?php include (TEMPLATEPATH . “/searchform.php”); ?>

    <?php endif; ?>

    </div> <!– Content Ends –>       </div> <!– Content Container Ends –>

    <?php get_sidebar(); ?>

    <?php get_footer(); ?>

Looking for quality WordPress Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , | Posted under WordPress | RSS 2.0

Author Spotlight

TJ Marsh

My name is Tj Marsh. I spend about 16 hours a day on the internet. Running my company and helping out here at Arvixe. I live in the good ole Arizona where it gets ridiculously hot. I love WordPress and a lot of other open source software along with coding.

Leave a Reply

Your email address will not be published. Required fields are marked *

× 6 = 12

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>