Creating a Bootstrap Index.php

In our previous tutorials, we took a Bootstrap theme and created a WordPress template. We then built out the header and added a navigation menu using Navwalker.

We are now going to build the index page to display our posts.

Let’s take a look at our index.php. It begins with a container div, and then a row, and then a div that is 8 columns wide on large screens, and 10 columns wide on medium or smaller.

HTML

After that, we have a series of blocks contained in divs with the class class="post-preview". Each of those divs is what it looks like: a post preview. Delete all the blocks but one. That block will now contain the WordPress loop.

The WordPress Loop

The Loop is PHP code used by WordPress to display posts (and pages). This is the heart of WordPress. The Loop opens with a query that determines which posts or pages to grab and ends with an “endwhile” statement. Everything in between is up to us, (or the theme developer). We specify the output of title, post content, metadata, custom fields… and each element is output for each post or page until the query is done.

The while query is this: <?php while(have_posts()) : the_post(); ?> and ends with <?php endwhile; ?>. We’ll set up everything the Loop does inside of those. Before we run the Loop, we will use an “if” query to determine whether or not there are posts; if there are no posts there’s no need to run the Loop.

Copy-and-paste the post-preview block to a separate file, for reference, and then replace it with this (which includes the enclosing div):

HTML

Next, we will deal with the post title. In our html template, that code looks like this:

HTML

First, we’re going to introduce an HTML5 article element, and give it a class of “post”. After that, we create the div for our post preview, and give it a class of “post-preview”. Next, we have the <h2> element, and we give it a class of “post-title”. Finally, we have the post name. For that, we use the following <?php echo the_title(); ?>. If you are not familiar with the PHP echo() function, you can read about it here. It outputs a string, and in this case, the string is the output of the function the_title(). The echo() function is used a lot in WordPress.

We see in our html template that there is a separator between each post preview. Let’s add that by placing an <hr> element between the closing </div> tag and the closing </article> tag

This is what we are placing within the loop:

HTML

Assuming we have already created some sample content, if we refresh the page, we should see a series of post titles. separated from one another by a line. There are no links, no post content, no postmeta… just the titles, formatted as they are formatted in out html template.

Now let’s add the link. We are going to replace the hardcoded “post.html” with a link to the actual post, which we do using the echo() function and the post. Our link is now this: <a href="<?php echo the_permalink(); ?>">...</a>

Note that in our template, there is an excerpt from the post contained between <h3 class-"post-subtitle"></h3>, and that excerpt is also part of the link. So after the post title, add the post subtitle <h3 class-"post-subtitle"></h3> and to retrieve the excerpt, we will once again use the echo() function: <?php echo get_the_excerpt(); ?>, and then we will close the link with </a>.

This is what is now contained in the loop:

HTML

We’ll add the post meta below the link. From our html template, copy and paste the following into the Loop below the </a> tag:

HTML

Next, we will replace the various elements. “Start Bootstrap” is the post author’s name. We will replace that with <?php the_author(); ?> The date will be replaced with <?php the_date(); ?>. The link will be <?php echo get_author_posts_url(get_the_author_meta('ID')); ?>:

HTML

We’ve now created a very basic index.php file. Next, we’ll create a file for a single post.