The Loop calls for your blog’s entries. It’s the most important set of PHP codes. By now, you should already know what to do before this lesson, of my tutorial series, begin. Go ahead and do that first, then let’s review what we’ve learned so far.
So far, you’ve learned:
- The rules, structure, and hierarchy of a WordPress theme
- What each of your page is made up of
- How to install your theme
- How to call for your blog’s title and make it a link
- How to call for the description and separate the header from everything else
Let’s start with lesson #5:
By now, you should have opened Xampp Control, the “tutorial” theme’s folder, browser at http://localhost/wordpress, and the index.php file in notepad.
This is what you should have in the index.php file:
Remember, to learn these codes or mumbo jumpo, type everything, DO NOT copy and paste.
Step 1:
Add a DIV (invisible box) under the header area. Give it “container” for ID, like this:
<div id=”container”>
</div>
What is this DIV for? It’s for separating your content from everything else that comes after it, stuff like the sidebar and footer.
Step 2: Add the following codes between the Container DIV tags. Try to type this out exactly like you see it. If you get any errors, retype it.
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
From this point on, it’ll be easier for you to recognize what each set of codes does instead of what they are and how they work. What you just typed is The Loop in WordPress. Before I explain what those codes are in words. You should have this:
Notice that I indented every line within the content box and I tend to skip a line a lot. That is for organization. It’s not enough to type the codes. You need to organize them so, later on, you know where everything is and which set of codes are related. For the indents, use tabs instead of spacebars.
What just happened?
- if(have_posts()) – checks to see if you have any post.
- while(have_posts()) – if you do have it, while you have any post, execute the_post().
- the_post() – call for the posts to be displayed.
- endwhile; – sticking to rule #1, this is to close while()
- endif; – close if()
- Note: not every set of codes need two parts in order to open and close itself. Some can self close, which explains have_posts() and the_post();. Because the_post(); sits outside of if() and while(), it needs its own semicolon to end/close itself.
Step 3: In previous lessons, you learned how to call for your blog’s title by using bloginfo(’name’). Now, you learn how to call for the post titles in between The Loop.
Type <?php the_title(); ?> after the_post(); ?> and before <?php endwhile; ?>
Save the index.php file, refresh your browser. You should see Hello World beneath your blog’s description. By default, your blog has only one post. For me, my test blog has multiple posts so I have multiple post titles. And because the post titles I used are the same and aren’t organized at this part of the tutorial, it looks like one long line of Hello World.
Step 4: Turning your post titles into post title links. Remember how you turned the blog title into a link? Same thing here, add <a href=”#”> and </a> around <?php the_title(); ?>
Save index.php and refresh browser. Now your titles are title links, but they point to nowhere. To make each title point to the right post. You need to replace the pound sign # with the_permalink().
<a href=”<?php the_permalink(); ?>“><?php the_title(); ?></a>
the_permalink() is the PHP function that calls for the address or location of each post. Save and refresh the browser. If you have only one Hello World title, hover over that link, look at the status bar, at the bottom of your browser; it’s no longer http://localhost/wordpress/#.
If you have more than one title link, you’ll see that each title links to a different post or web page. But, our post title links are still on the same line. To separate them, add the <h2> and </h2> tags around your link codes.
<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>
Remember H1 that we used for the blog title? That’s your web page’s heading. H2 is used for sub-headings. Now that your title links are sub-headings, each gets its own line. Save index.php and refresh the browser to see the change.
This is the end of this lesson. You should now have:
Note: If you haven’t already, make several dummy posts to test your theme. Go to http://localhost/wordpress/wp-login.php. Login, click on the Write tab, make sure you’re looking at Write Post, make a post, then do it several more times. You can title them all Hello World like I did or give them unique titles.
Follow this WordPress Theme Tutorial Series from the beginning.