Displaying Posts from a Specific Category on the Home Page

Building a single page theme with WordPress and Bootstrap

Exercise 3

Resources

BooThemeV02 is used as the starter template for this exercise.

BooTheme V03 is the completed example.

To get all the theme examples  and related files, visit the wordpress resources page.

Previous Exercise </>Next Exercise

Displaying posts from a specific category in a section of the front page.

Some sections of your  front-page.php will display content stored in wordpress posts. Follow these steps to get specific posts to display in specific sections.

The image, title and description is of each speaker is stored in wordpress as a number of posts.

Create a new Category in WordPress

We use the post category feature to assign our posts to the same group. Select the CATEGORIES link in the sidebar to create a new category.

Note the category “slug” is a URL – friendly version of your category name, basically removing any spaces or other characters that make URLs look messy. Add a slug name that is as near as possible to your title, without spaces.

The categories  list view showing the ‘events’ and ‘speakers’ categories. Note you can also create categories when you are editing a post, handy. 

Create Post Items in WordPress

The content displayed in the speakers section in this example is stored in wordpress as “post” items. In your wordpress dashboard, select the POSTS link in the sidebar to create a new post for each speaker and enter your content. If you wish to display an image with your post, set a “featured image” for the post.

The Edit Post view for one of my speakers,  showing a the category and featured image panels. Ensure these are completed. 

The post list view showing a number of  post items. I have created a post item  for each speaker presented on my home page. Note each speaker has been assigned to the “speakers” category. 

Add php code to front-page.php

Get the slug name for your post category and use it together with php template code to display all the posts from that category. In this example I add code to the speakers section of my front-page.php :

  <?php $q = new WP_Query( 'category_name=CATEGORYSLUGNAME' ); ?>

 <?php require locate_template('template-parts/frontpage_speakers_posts.php'); ?>

In the first line of code, replace CATEGORYSLUGNAME with the your category slug identifier.

a section of the front-page.php file showing the “Speakers” section HTML. Note the ‘category_name=speakers’ attribute. This links  all my posts in the ‘speakers’ category to this page. The highlighted line includes all the code contained in the frontpage_speakers_posts.php file.

Create a frontpage_speakers_posts.php file

The <?php require locate_template(‘template-parts/posts_speakers.php’); ?> code directs wordpress to include the html and php code found in frontpage_speakers_posts.php  (located in template-parts).  Create a new file in template_parts named frontpage_speakers_posts.php and add the following code to the file :

<div class="row">

  <?php if ( $q->have_posts() ) : while ( $q->have_posts() ) : $q->the_post(); ?>

  <div class="col-sm-4">
    <div class="speakerthumbnail">

      <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) );?>">
      <h4><?php the_title(); ?></h4>
      <hr>
      <p><?php the_excerpt(); ?></p>

    </div>
  </div>

  <?php endwhile; endif; ?>
  <?php wp_reset_query(); ?>

</div>

the frontpage_speakers_posts.php template file.  

Add a permalink to the title of each post

If you want to be able to see all the info of each speaker in a separate page, you can add the post permalink to the title of the post. The permalink is a URL created specifically for the post and is stored along with the post content in the wordpress database. Every wordpress post has it’s own permalink. You can customise the way the permalink is displayed via your dashboard settings / permalinks panel. For this exercise, set your permalink to display the post category and the post name in the url : e.g. : http://localhost/speakers/dan-carlin/

Go to settings in your dashboard sidebar, and select permalinks from the pop out menu. Select the “custom structure” option and add the following identifiers to the field :

/%category%/%postname%/

permalink settings with a custom structure to display /category/postname/ as the url for each post. 

Go back to your frontpage_speakers_posts.php  file and edit the title.  Wrap the title in a standard hyperlink tag :

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

note the URL path is empty. Add the permalink here using the <?php the_permalink(); ?> wordpress command.

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

This will result in the title of each speaker post presenting as a hyperlink.

Note : Clicking on the link will trigger wordpress to use a separate template to display the post – either single.php (if you have it in your theme folder) or the default index.php. These pages will be styled in later exercises.

Speaker titles are now shown as links. Note the URL showing the custom  path.