Introduction
Welcome back. Now that you've had a week to play around with your Wordpress header file, your probably itching to get designing, and move along with your layouting. Believe it or not, the jump from html to Wordpress templates is not a hard one to make at all - in fact, it's more like walking up stairs then jumping.
That ever dangerous Index.php
Everything that happens in Wordpress goes down in the index.php, the center of your blogging universe. This one file is usually the deciding factor in your visitors either saying "I should check this out" or, "WTF" - and leaving.
The index is what's going to grab the readers attention. If it's impossible to navigate, read, and is a mess organization wise, your blog or site is a bust. While ultimately, content usually proves king over design, design plays a major role in visitors attitudes towards a site.
Breaking down that mess
Let's take a look at that wonderful index.php, in this case, it's Wordpress 2.0's default theme, Kubrick. This is the theme everyone installing wordpress starts with, and the theme most beginners stick with, simply because customizing Wordpress is such a hard concept to grasp.
First things first. If you've never found it to this file yet, nows the time to do it. Head over to the Presentation tab, then Theme Editor. Make sure you're on the Wordpress Default theme, as it will make it much easier to understand and follow along with my examples.
Php get my help
The very first thing you notice is a small line of php code, looking like below:
Look familiar? That's our friendly header.php being called into the template. You'll notice there are a few more of these php get functions throughout the file, including one for the footer and one for the sidebar. You'll also notice that these appear frequently - in every theme file to be exact. These functions make it much easier to include things in each different theme file. Instead of copying all the header, footer, and sidebar code into every theme file, these functions do it all for you. This becomes a real time saver, because to change the header of the blog, you simply modify that one file (header.php), and wham, the changes are seen on all pages.
Wasn't that last weeks article?
Alright, alright, back on task. If you continue down the index.php, you'll notice a whole jumble of code between the function for getting the header, and the function for getting the sidebar and footer.
The first line you'll stumble upon sets up the overall look of the page:
HTML:
-
<div id="content" class="narrowcolumn">
By quickly scrolling down to the bottom of the Index template, you'll notice that div we just opened for id "content" gets closed right before that sidebar function. This will become important, but we'll get to that later.
The next block of code you see is essentialy the whole thing between the first opening and closing div we saw. It looks like this:
PHP:
-
<?php if (have_posts()) : ?>
-
-
<?php while (have_posts()) : the_post(); ?>
-
-
<div class="post" 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 class="entry">
-
<?php the_content('Read the rest of this entry »'); ?>
-
</div>
-
-
<p class="postmetadata">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
-
</div>
-
-
<?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; ?>
Wow, what a mess
Believe me, if I was new to code, I would quit right there after seeing all that. I'd have no place to start.
So, let's make things a little easier for you.
Take a look at the first few lines of this php block. These functions are very easy to understand, simply by looking at them. Together, they're saying, if there's a post available, then show it. Now, it's up to you to give it the parameters so it nows how and what to display, otherwise those functions go unused.
PHP:
-
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
The parameter setup all goes down in the next few lines, beginning with another opening div, this time for class "post".
HTML:
-
<div class="post" 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>
-
-
-
<?php the_content('Read the rest of this entry »'); ?>
-
</div>
-
-
<p class="postmetadata">Posted in
<?php the_category(', ') ?> |
<?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
-
</div>
-
-
<?php endwhile; ?>
This is where Wordpress, stylesheets, and php combine to provide you with your posts. First, the post id is called upon. Usually, this is not shown, which is this case in this theme. Between the opening and closing h2 tags are php functions calling for the post title name, as well as the permanent link to them. In the opening and closing small tags, you get a function that will output the time of the post, as well as the authors name, as specified in the Wordpress Dashboard.
Next, we have the div that does all the displaying for each and everyone of your posts.
HTML:
-
-
<?php the_content('Read the rest of this entry »'); ?>
-
</div>
What this is doing, is grabbing the article content, in this case, the whole article content, and, if specified as a cutoff text limit in the Wordpress Dashboard, or if you decided to insert the More tag into your post, a link to the rest of the post (Read the rest of this entry...).
Below that is the final class in this file, which is "postmetadata". This is where extra stuff like text links to categories the article was posted in, comments and the number of comments go. It's fairly easy to see what php functions to which.
