Part 6: The Loop

We’ll be editing index.php, and a lot of what we apply in here will be used when building other pages.

What does an index typically have?

It’s important to consider this, as it will form a readable plan that we can follow. A typical index would have;

• Post Title
• Post Metadata
• Excerpt of content or similar
• Thumbnail Image
• A link through to the post, image or header
• Pagination

And we’ll have built all of this by the end of this post. To do a lot of this we’re going to use a loop to display posts.

Introducing, The Loop

By itself, the loop is very simple, it’s essentially a set of instructions. Below is an example of what is probably the most basic loop possible. It can be extended into quite a beast depending on what your theme needs.

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

<?php endwhile; ?>

Put this code between the <section> tags in your index.php. This forms the frame for the content, and will not display it of it’s own accord, and that’s where WordPress functions come in.

WordPress Functions

WordPress has an utter abundance of built-in functions with predefined behavior that take care of the work. For example, the_title

Titles

A function that really needs no explanation, put it in the loop.

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

Save your index.php, and refresh the homepage, and you’ll see something like this:

So our headings are there, but lack formatting and styles, additionally they aren’t linking through to the post. Making this happen is a piece of cake, and relies on another WordPress function: <?php the_permalink(); ?>.

If we just place it anywhere, it’ll spit out the post url, which isn’t much use, but keeping this in mind, we can just place it where a url would typically link in html, in an anchor tag, and close the anchor after the_title. Be sure not to forget the h3s! Check this out:

<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

Now out homepage will look as follows

That’s our heading dealt with, onto the rest.

All content, or an excerpt?

For this theme, I want to have a snippet of content on the home page and a link to continue reading the content. There’s two ways to do this with functions. We’re going to take a quick gaze over these before making a decision.

the_excerpt

It will display text from the excerpt field in the post editor, or if you don’t put anything there, the first 55 words. It’s also finished with an ugly [...] if no excerpt is specified so it pays to be mindful of this. The only link through to content is the title. Here’s how it looks.

the_content

It will display all of the post’s content, unless you provide a more tag, like so: <!––more––>, telling WordPress where you want the content to end, and it’ll carry on with a link of “(more…)” – A little unsightly, but the_content accepts parameters to get around this. If we use, say, the_content('oh my you have to keep reading!') then we get this

I’m opting to use the_excerpt from here on out.

Implementing the_excerpt

Implementing the_content is much the same as putting the post title into action, wrapped in PHP tags and inside the loop, here’s how my loop looks as of now.

<?php while ( have_posts() ) : the_post(); ?>
	<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
	<?php the_excerpt() ?>
<?php endwhile; ?>

And that’s it, it’s really that easy. Save your index.php and refresh to make sure it’s all working.

Adding Post Metadata

When referring to post metadata, we think of the author, date published, and category. Continuing the theme of this post, we have several functions that can bring this all together for us.

the_author_posts_link

When you use the_author_posts_link, it pulls out the author name and makes it a link to their author page.

the_category

This spits out all of the categories that a post belongs to, and makes those into links to said categories.

the_time

This will, of course, display the time exact time the post was published, but we’re just after the date, and we’ll instruct it how shortly.

The Business end of Metadata

I want the metadata to sit between the title and the content, so I’ll need to put what I need on that line, and I’m going to do it as follows, div inclusive.

<div class="post-meta">
By <?php the_author_posts_link(); ?>,
 In <?php the_category(', '); //separated by a commma and space ?>, 
 on <?php the_time('F j, Y'); //DD Month, YYYY format dates ?>
</div>

This will make display an Author link, the categories the post is in (separated by a comma), as well as the time, presented in Month DD, YYYY format, here’s what it looks like.

The font is quite large considering the job it has, so I’m reducing it as follows.

.post-meta { font-size: .75em;}

Much easier on the eyes.

Thumbnails

Adding post thumbnails is rather straight forward, however, we first need to enable this in our theme, and to do so requires making a new file, functions.php. This is where a lot of work can be taken care of, and we’ll be coming back to this file in the future.

Add the following into it, it’s another example of straight forward code.

<?php add_theme_support( 'post-thumbnails' ); 

Without this, we’re not even able to set a featured image in the dashboard! And with that enabled, it’s time to use another function to display the thumbnail, and it’s extremely straight forward: the_post_thumbnail. At default, it will simply retrieve the specified thumbnail image, but it will constrain it to 150*150px. You can adjust this by providing arguments, but for now, this will suit us just fine.

So it’s time to test it out, and I’m going to use this opportunity to wrap the different elements in divs with classes, so we can easily style it up with ease

<div class="preview">
	<div class="thumbnail">
	    <?php the_post_thumbnail(); ?>
	</div>
	<div class="excerpt">
		<?php the_excerpt(); ?>
	</div>
</div>

Here’s the accompanying css, as without it, the image is just stacked on top of the excerpt

.thumbnail {
float:right;
}

Looking good so far, but it still needs a tidy. That said, there’s more we need to accomplish before considering form over function.

Pagination

We have over 10 posts, and though we can show more than 10 on the homepage, it starts to impact load times and makes for a very, very long page. Naturally, there’s two WordPress functions to handle pagination.

<?php next_posts_link('Next Page ...') ?>
<?php previous_posts_link('... Previous Page') ?>

They’ll work without having any arguments provided, but I’ve just chosen to use something very simple. Plus, we can easily come back and change it at another time. They’ll just inherit some default styles, but it would be very easy to apply your own at this time. We’ll revisit this later.

Place them under the closing loop tag, below </section>, I’m also going to wrap mine with a div for ease of styling later on.

<div class="pagination">
	<?php next_posts_link('Next Page ...') ?>
	<?php previous_posts_link('... Previous Page') ?>
</div>

Save, refresh, and make sure it’s working.

Preparing to Style

In the interests of future preparation, we need to add another WordPress function: post_class.This provides a unique set of post classes to a div or other tag, allowing for very specific CSS styling, here’s an example of implementation, and how your loop’s content should look

<div <?php post_class(); ?>>
    	<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
	    	<div class="post-meta">
			By <?php the_author_posts_link(); ?>,
			 In <?php the_category(', '); //separated by a commma and space ?>, 
			 on <?php the_time('F j, Y'); //DD Month, YYYY format dates ?>
			</div>
		<div class="preview">
		    <div class="thumbnail">
		    	<?php the_post_thumbnail(); ?>
		    </div>
			<div class="excerpt">
				<?php the_excerpt(); ?>
		</div>
	</div>
</div>

Here’s an example of the classes provided to this div

Tidying Up

As it stands, the page is quite bland, with the content area lacking definition and poor padding between the posts, so lets handle this straight away. A simple background, subtle border, a little content padding, and changing the color from black to a softer color

section {
	background: #fafafa;
	border-radius: 5px;
	padding-top: .5em;
	border: 1px solid #ededed;
}
.post {
	padding:0 1em 2em 1em;
	border-bottom: 1px solid #ededed;
	color:#57534a;
}
.post:last-child {
	border:0;
}

The header looks tacky with an underline, and the purple conflicts with the blue. The post titles also look poorly for similar reasons, here’s my solution.

#title a{
	color:white;
	text-decoration: none;
}
#title a:visited{
	color:white;
}
h3 a {
	color:#57534a;
	text-decoration:none;
}
h3 a:visited {
	color:#57534a;
	text-decoration:none;
}
h3 a:hover{
	color: #06e;
}

Here’s how it turns out,

Summary

That’s all for this tutorial, we’ve built a loop using a vast range of functions, styled it, had a very easy intro to functions.php, and some more. Take some time to go through this again if you need, because there’s a lot to take in, and of course if you get stuck, ask your questions!

The post Part 6: The Loop appeared first on YinPress.