WordPress—A Complete Guide/

...

/

Designing the Blog Page

Designing the Blog Page

Learn to create a custom blog listing page for our website.

We'll cover the following...

The blog page of our website found at /blogs will contain a list of most recent blog posts. The following diagram shows a rough sketch of what we want this page to look like:

Press + to interact
Blog listing design
Blog listing design

At the moment, the index.php file is empty as we moved all the code to front-page.php in the previous lesson. Let’s build index.php according to the design shown above.

Navigation link

Since we will be working with the blog page, let’s add the navigation link in the header to easily open the blog listing from the main landing page. In the header.php file, add the navigation link for the /blog slug as follows:

<li <?php if(is_home()) echo 'class="current-menu-item"'?>><a href="<?php echo site_url('/blog');?>">Blog</a></li>
Add navigation link to blog page

The detail of the functions used above can be found here. Now that we can easily jump between the Home and Blog page, we can move on to designing the page.

Header and footer

The blog page, like all other pages has a header and footer. To include the header and footer we will call the get_header() and get_footer() functions.

<?php
get_header();
get_footer();
?>
Building the blog page

These functions load the header and footer template from header.php and footer.php.

Banner area

Below the header, we will include a banner. We can copy the <div> responsible for displaying the banner from page.php. Make sure to drop out of PHP mode before adding the HTML code and drop back in at the end of the file before calling the get_footer() function.

<?php
get_header(); ?>
 
<!-- Banner Section -->
 <div class="image-and-banner">
    <img class="image" src="<?php echo get_theme_file_uri('/assets/images/banner.jpg'); ?>" alt="" />
    <div class="banner-section">
      <div class="banner">
        <h1 class="banner-primary"><?php the_title(); ?></h1>
        <h2 class="banner-description">Page Description Goes Here</h2>
      </div>
    </div>
  </div>
 
<?php
get_footer();
?>
Display banner area on the blog page

The the_title() function pulls up the title of the most recent blog post as the title of this page.

Page title and description

Since there is no need for the title/heading to be dynamic for the blog listing ...