It seems that more designers and developers are using WordPress as a full-powered Content Management System rather than just stand-alone blogging software. The secret to WordPress’ success lies in its solid architecture and robust set of customizable tags. WordPress is at the center of this site and everything revolves around the ability to update and make changes easily. Although there are a lot of ’static’ areas to my current layout, I am working on a new version that fully incorporates the WordPress ‘Loop’ and will offer even more flexibility for future growth. I want to share some of the ways I have learned to use WordPress on this site and others in the hopes of shedding some light on its potential. I plan on writing up several tutorials over the next few weeks that will help demystify what happens behind the scenes of WordPress. I hope to release one tutorial covering a different set of topics once every week, so if you like this, please come back for more.

Before I start, I need to give credit where credit is due. A lot of what I know now is directly attributed to the WordPress Codex and Support Forums. These two resources are a seemingly endless wealth of knowledge and without them I’d still be completely in the dark. If you want to learn WordPress, and I mean really get into the software, then you must become familiar with the Codex and get involved in the Forums. Many people have spent a lot of time working on the exact same problems you’re having right now. Trust me, the answer is out there. Also this write up assumes a basic understanding of XHTML and PHP, but if you are new to either or both, you should be able to follow along without too much problem.

For my first tutorial, I will dive into the Default Template 1.5 that comes boxed with every new WordPress installation. More specifically, I will pick apart index.php and try to break it into manageable chunks that will be easy to understand. I think this is relevant because as a rule of thumb, I usually start all of my projects by making adjustments and building off of the WordPress Default 1.5 template. It’s well written, structurally sound and relatively easy to understand. Not to mention it’s easy to customize once you get the hang of it. So if you’re ready, lets go ahead and get started.

And it goes a little something like this

What better place to start than from the top? Whether working locally on your own machine or server-side with an existing live site, the file that calls WordPress into action is index.php.

At the top of index .php, you’ll find an Include tag <?php get_header(); ?> that grabs the contents of header.php in your template directory and displays them on the screen. The header.php file starts out like every good XHTML file should; with a DOCTYPE declaration that provides the document structure to the web browser. In this case, the document is declared as XHTML Transitional and is served to the browser as such. After the DOCTYPE comes a series of meta tags and link tags. The meta tag specifies the character encoding of the document and the link tags reference the stylesheet, RSS Feed, and the Pingback function. So far so good.

Next you’ll find code that is specific to the Default template which provides style instructions for images such as the header and footer throughout the page. If you plan on modifying the template and adding a header image of your own, keeping this section of the code is not necessary. If you plan on leaving the header the way it is, it’s best not to delete anything here. Once you get past the style declaration, the real bulk of the page begins. The body tag starts the page that we see on screen, shortly followed by <div id="page"> </div>. This serves as a ‘wrap’ for the entire document and is concluded further on down the road in footer.php. But let’s not get ahead of ourselves. At this point, it’s just best to know that this is the container that holds our site structure together.

After the ‘wrap’, you’ll see another section starting with <div id="header"> </div>. In the template, this is where your header image and ‘home’ link are located. As I said above, if you plan on keeping the header the way it is, this bit of code wrapped around the h1 tags is necessary for the section to work properly. The reference to <?php echo get_settings('home'); ?> calls the settings found in the admin section and places your blog name inside of the anchor link within the header. The reference to <?php bloginfo('description'); ?> pulls your default description from the ‘Options’ page and places it in that spot. Now that you have a better understand of what the code is doing, let’s look at ways in which to customize it to meet your needs.

Navigating the Pages

For some reason, I’ve run into a lot of folks who think that the WordPress template files are set in stone and that you shouldn’t add or subtract from them because you run the risk of breaking something. It’s true, there are sections of code that need to remain intact for the page to work properly, but think of these PHP template files as regular XHTML files and you will find that you’ll be able to start doing more and more without ruining any of the structure.

Ok, moving on. We are all set with the header and everything looks good. However, if we want to add something like horizontal navigation so that our users can find their way around the Pages we have created, then we will have to make changes to the code just below the <div id="headerimg"> </div>. So how do we do that? Let’s take a look at a more recent WordPress theme.

One of the most useful bits of navigational code can be seen in the K2 theme, an improved version of the very popular WordPress theme, Kubrik. This code takes the pages that you make in the admin section and turns them into a fully customizable, horizontal unordered navigation list. It reads as follows:

1
2
3
4
5
6
7
8

<ul class="menu">
<li class="<?if (((is_home()) && !(is_paged())) or (is_archive()) or (is_single()) or
(is_paged()) or (is_search())) { ?>current_page_item < ?php } else { ?<page_item< ?php } ?>">
<a href="<?php echo get_settings('home'); ?>">Blog</a></li>
 
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
<?php wp_register('<li style="position: absolute; right: 0px;">',''); ?>
</ul>

Wow. I know what you’re thinking. That looks like a jumbled mess. But it really isn’t, it’s actually pretty easy to understand if you break it down a little. Without getting too complex, the code is an unordered list that looks to see if certain values are met within the page. If those values are true, such as if you are on the home page and not on any other pages, it sets the class of the first li to current_page_item because you are indeed on the home page. Every other list item is then classified as page_item. If you look at my navigation bar above, you’ll see that the ‘home’ navigational anchor is underlined to let you know where you are within the site. I am able to assign the current_page_item class a value in my CSS file that makes it stand out from the other list items; a useful usability tool for people trying to navigate your site.

There may also be times when I need to manually enter the value of the header, perhaps on a very customized template page. No problem. I simply take out the PHP and replace it with semantic XHTML markup that the PHP would have generated.

1
2
3
4
5
6
7
8
9

<ul>
<li class="current_page_item"><a href="http://www.45royale.com">home</a></li>
<li class="page_item"><a href="/profile/" title="profile">profile</a></li>
 
<li class="page_item"><<a href="/archives/" title="archives">archives</a></li>
<li class="page_item"><a href="/portfolio/" title="portfolio">portfolio</a></li>
<li class="page_item"><a href="/contact/" title="contact">contact</a></li>
 
</ul>

Both of these examples can be placed inside of a container like <div id="navigation"> </div> and are fully customized via your stylesheet. The header.php file ends with an <hr />, breaking up the header and the next file that is called in. Now let’s move on to something a little more complex.

The nuts and bolts of your site

After the header has finished loading by means of the include tag <get_header (); ?> on Line 1, the next thing that loads is the content. There are several things that happen here, and I will try to explain them the best way possible. Here is what we have:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<div id="content" class="narrowcolumn">;
<?php if (have_posts()) : ?>
 
<?php while (have_posts()) : the_post(); ?>
 
<div class="post" id="post-< ?php the_ID(); ?&gt">
<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 class="entry">
<?php the_content('Read the rest of this entry'); ?>
</div>
 
<p class="postmetadata"&gtPosted in <?php the_category(', ') ?> |
 
<?php edit_post_link('Edit', '', ' | '); ?>
<?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></p>
</div> < -- END OF POST -->
 
<?php endwhile; ?>
 
<div class="navigation">
<div class="alignleft"><?php next_posts_link('Previous Entries') ?></div>
 
<div class="alignright"><?php previous_posts_link('Next Entries') ?></div>
</div>
 
<?php else : ?>
 
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
 
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
 
<?php endif; ?>
 
</div>
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Again, this may look like your screen had one too many drinks and vomitted a little in its mouth, but trust me, it’s all decipherable. I will go line by line and explain this code in more detail.

Line 2

1

<div id="content" class="narrowcolumn"></div>

This is the main div that holds the contents of your post.

Line 3

1

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

This is the beginning of The Loop. This line says if you have posts to display, go on to the next line.

Line 4

1

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

This Template tag tells WordPress to continue to display posts as long as there are posts to display. The crucial part of this line of code is the while declaration which is a PHP function that keeps looping until a condition is no longer true. We’ll finalize this further down in the code.

Line 5

1

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

This line of code is the div that contains the words of the post. This differs from <div id="content" class="narrowcolumn"></div> in that the ‘content’ div holds the ‘post’ div, and the ‘post’ div holds your written entry.

Line 6

1
2

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to
<?php the_title(); ?>"><?php the_title(); ?></a></h2>

Here WordPress displays the Permalink (the permanent place that this entry resides) and displays the title of the post wrapped within an h2 tag.

Line 7

1

<small><?php the_time('F jS, Y') ?><!-- by <?php the_author() ?> --></small>

The month (F), date (jS) and year (Y) that the post is written. The <!-- by is simply an XHTML comment that shows the author of the post when you View Source from the browser. You can keep it or get rid of it, it has no bearing on the functionality.

1
2
3
4
5

<code>
<div class="entry">
<?php the_content('Read the rest of this entry'); ?>
</div>
</code>

1
2
3
4
5

<code>
<p class="postmetadata"&gtPosted in <?php the_category(', ') ?> |
<?php edit_post_link('Edit', '', ' | '); ?>
<?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></p>
</code>

1

<-- END OF POST -->

1

<?php endwhile; ?>

1
2
3
4

<div class="navigation">
<div class="alignleft"><?php next_posts_link('Previous Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Next Entries') ?></div>
</div>

1

<?php else : ?>

1
2
3
4

<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
 
<?php include (TEMPLATEPATH . "/searchform.php"); ?>

1

<php endif; ?></php>

1

<?php get_sidebar(); ?>

1

<?php get_footer(); ?>