Pinegrow WordPress Part 4 | Pinegrow WordPress Blog Index Page

Pinegrow Tutorial

Time: 8 Mins

In the tutorial, we will create the Pinegrow WordPress Blog Index page to display our blog posts.

If you haven’t already, check out the previous post on creating the WordPress Navbar in Pinegrow.

Download the source files for the project here.

Pinegrow WordPress Blog Index – Create the loop


Let’s create our blog index page, which is used to display all our blog posts in WordPress.

Before we create the Pinegrow WordPress Blog Index page, we must first create a loop.

The WordPress loop is PHP code that displays the WordPress post and page content. It is perhaps the most important WordPress function and you are always going to need to use it when creating a WordPress theme.

Post and page content is usually enclosed in the HTML article tag in WordPress. It’s good to get into the practice of doing this.

For the blog index page, our loop is slightly different to the loop for our default pages and single posts as we will only be displaying an excerpt of the post.

Open index.html

Open the PHP preview window.

Select the title tag.

Add the title action under Posts. This will be the title of our post.

Select the paragraph tag

Add the excerpt action from the Posts section. This will be the excerpt text of our post.

Select the Article container.

Add the ID action from the posts section.

This will add the ID for the post.

Select the image.

Add the post thumbnail action from the posts section. This will be our post thumbnail.

Type array open bracket 300, 300, close bracket, in the size field.

Select Add has thumb check.

Select the first span tag which is a name.

Add the Author action from the Authors section. This will be used to display the post authors name.

Select the second span tag which is a date. This will display the date the post published.

Add the date action from the posts section.

Select the link tag. We will add a read more button to the excerpt which will click through to the full blog post.

Add the short link action from the posts section.

Enter “Read More” into the link text field.

Select the Article container again.

Add the loop action from the loops section.

Save the theme.

Now let’s add some Bootstrap 4 pagination for our posts.

Open the pagination element, and select the UL tag.

Add the Bootstrap post pagination from Navigation & Pagination.

Click OK.

Save and export the theme.

Back in our WordPress install, go to settings and then reading.

Set – blog pages show at most – to 5.

For each article in a feed, show summary.

We can also go to customize, appearance and set the homepage to show the latest posts or we could create a blog page and set the blog posts to appear there and add it to the menu.

We should create a blog page in WordPress for our blog index page and add it to the menu.

Next, go to go to customize.

Set the Posts page to the blog.

Refresh the Blog Index page in your browser.

Our loop is added and the WP post is displaying in our blog index page.

We should set our preview page URL to this page in our master page settings.

Save the theme.

In the next tutorial, we will create the single blog post page.


WordPress Codex

Static Homepage vs Blog Page

How to create a blog page in WordPress

Template Hierarchy 

Flash Sale:  5 Plugins Bundle for $47