It’s now time to work within The Loop. I like to space out my code when I’m trying to learn something new, so I know what not to touch. We now know how to set up the Loop, so we’re going to make our content show up by putting appropriate code between the beginning and end of the Loop. The ellipsis in this snippet of code shows where you’ll be working:
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> . . . <?php endwhile; ?> <?php endif; ?>
This is where you can get creative. Let’s start with a title, because we all know that post titles are important. To keep things simple I am going to be using
<h1><?php the_title(); ?></h1>
<?php the_title(); ?> will display the title of the post. This will display in print, not as a link. The PHP function that prints the permalink URL is
<?php the_permalink() ?>. However, this will only provide the URL, so we need to get our head into it and put together a link. See how it’s done:
<h1> <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a> </h1>
By the same principle, we could put
title="permalink to <?php the_title(); ?>" if we want; we could also create a whole new link separate from the title and write
<a href="<?php the_permalink() ?>" rel="bookmark">permalink!</a> if we wanted to.
As I said, you can get creative here as long as you know the PHP functions. The WordPress Codex has a Function Reference page with a lot of the functions you will need.
That was just the title, so let’s get creative with the date. I’m just going to put this under the title with
<h1> <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a> </h1> <small><?php the_time('jS F Y') ?></small>
jS F Y will display the date a format like “1st April 2011″. You can change this by visiting php.net/date and using the variables you wish. You can also include the time the post was published; you’re not simply restricted to the year. You can have it as simple or elaborate as you want.
Under that we are going to include the content of the post. The quick way to do this is by using
<?php the_content(); ?>. It’s that simple! You can wrap it in a div if you like, if you plan on styling it with a different background or something else later.
The other way to do this isn’t much different:
<?php the_content('Read the rest of this entry'); ?>
I suggest using this especially if you’re going to have some rather long posts or display a large number of posts on your homepage. When you write a post, there is a Quicktag button you can use, that inserts
<!--more--> into the HTML of the post. If you do this, readers will have to click a “Read the rest of this entry” link, or visit the permalink URL, to read any text past that point. This code will ensure that the readers have that link to click on. The “more” function is also useful especially if you’re going to have a lot of images and want to place them under the fold so that your website won’t have to load all the images on the homepage. Of course, you can edit the part in italics.
The next step is to put in the post metadata, which is the extra information including the category and comment link. This is all you need on this page. Later on we’ll be working with how the post looks when looked at in full (what it looks like when you click the permalink).
<p class="postmetadata">Posted in <?php the_category(', ') ?> <br /> <?php comments_popup_link('No Comments', '1 Comment', '% Comments');?> </p> <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
It should be obvious what the functions stand for. You are displaying the categories, the link to the comments, and a link to edit the entry. You will see this if you are logged in to your Dashboard. Regular visitors won’t see this.
You can change the separator for the categories by replacing the comma in
the_category to something else. The link to the comments will jump straight down to the comment form. If your settings are such that the comments open in a popup window, they will do so.
If you want to edit the number of posts that appear on the homepage, you will need to go to the Settings in your Dashboard. Make sure that all the code you’ve worked on in this part of the tutorial is inside the Loop.
Head on to the next part to finish working on index.php.