Coding a WordPress Theme from Scratch – Part 4

This is the fourth part in a tutorial series on how to create a wordpress theme from scratch. If you landed on this page randomly, I suggest you start at the beginning of this tutorial series. You can also go to the previous part of the tutorial series.

Today we will work on the wordpress loop. The wordpress loop is how wordpress gets your posts from the database, and pastes them onto your site. In order for you to successfully see the posts that will show up in the loop, go to your dashboard (http://www.yourwebsite.com/wordpress/wp-admin) and create at least ten dummy posts.

Now we will continue editing index.php, so open this up in your texteditor.

In the third part of this tutorial series, we added the blog’s name and description into the header of the site in a div. We are now going to add a second div, the content div. Below the header div, add the following code:

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

This creates an invisibly box called content below the header div.

Inside this div, add the following code:

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

This is, essentially, the wordpress loop. I’ll break down what each part of the code does.

<?php if(have_posts()) : ?> begins the if statement, checking to see if there are any posts. If there are posts, continue to the next section of the code, if there is no post, then skip to the end of that section. The <?php endif; ?> at the end of the code ends the if statement.
<?php while(have_posts()) : the_post(); ?> is the while loop. It basically means that “while” there is a post, post it. <?php endwhile; ?> ends the while loop.

To get the title of the post to appear, add <?php the_title(); ?> after the while loop. It acts in a similar way to <?php bloginfo('name'); ?> in that it calls for the posts title. You can also make it a link that links to the full blog post by adding <?php the_permalink(); ?> between link tags. The permalink is a function that calls for the URL address of your blog post. Overall, this would look like:

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

If you save and upload and viewed this now, you will get all the titles side by side, as shown below.

By adding <h2> to the blog posts title, we can make the titles spread out onto separate lines, and make them more customizable later on.

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

This spreads out the titles, making them more interesting to look at.

Now to add the content. Below the code you’ve just been working on, add the following code.

<?php the_content(); ?>

This calls for the content in the post, then posts it. If you save and upload your file at this moment, your blog will look as follows.

So far, in your content div, you should have the following codes.

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>

By creating invisible boxes around divs, we can group similar information together while making it easier to edit the way they appear. When having multiple posts on a page, it’s best to wrap each individual post in seperate “post” tags. Before you go and add <div id="post">, stop! You can not use an id in more than one div on your webpage. Instead, we will use <div class="post">. Put this before the <h2> tag calling for the post. Don’t forget to add </div> before <?php endwhile; ?> to close the post div. The main difference for these two tags is how they are introduced in the CSS stylesheet, however they can both be edited in the same way.

Since we are making it easier to edit codes, we should also separate the post’s content from the post’s title. Add <div class="entry"> directly before <?php the_content?>, and make sure you include </div> directly after the <?php the_content(); ?>.

Overall, the code looks like:

<div id="content">
     <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
          <div class="post">
               <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
               <div class="entry">
                    <?php the_content(); ?>
               </div>
          </div>
     <?php endwhile; ?>
     <?php endif; ?>
</div>

This will have no change on the way your webpage looks.

Save and upload index.php, and check out your site. If you don’t have what’s in the screenshot below, try redo the codes.

If you have any questions, feel free to leave a comment below.