Develop a WordPress Theme, 2021 -part 4, The Page Template & Template Parts.

Part 3.

This is part 4 of a series, please complete the previous parts before continuing

The WordPress loop

In the code below the post data is returned to the browser using two WordPress functions, have_posts() is a Boolean function that equates to true if a post is available. the_post() returns the actual post data. A while loop loops through this data. the_content() function displays the post content.

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

<?php the_content();?>

<?php endwhile; else: endif; ?>

Template parts

WordPress themes can get very complex to manage. To improve modularity template parts are used. A template part is a block of content that can be included in the theme using the function, get_template_part(). Template parts are usually stored in an includes folder in the themes main folder.

To add template parts to your theme create an includes folder in your theme folder, then create a file named section-content. Copy the above WordPress loop code into it.

Call the template part in your frontpage file.

Copy the code below into your front-page.php file. The get_template_part() function has two parameters the first is the path to the file, the second is the name of the template file.

<?php get_header();?>

<div class="container">
<?php the_title()?>
<?php get_template_part('includes/section', 'content')?>
</div>

<?php get_footer();?>

Go to your test site homepage and you should see the content.

The ‘page’ template

The front-page.php template only works on the home page. To see any other pages the page.php template will need the same code as the home page to be added. Do this now.

In the backend of your test site create a page named About Us and add some content, also add a Contact us page.

Page templates

In addition to template parts you can use page templates for an entire page. These are allocated in the backend to individual pages. For example a contact page may display a map and have a different layout to a standard page.

To create a template, create a file named template-contactus.php and copy the code below into it. The comment at the top tells WordPress that this is a template. Save it and go to the contact us page in the backend.

<?php
/*
Template Name: Contact us
*/
?>

<?php get_header();?>

<div class="container">
<?php the_title()?>
<?php get_template_part('includes/section', 'content')?>
</div>

<?php get_footer();?>

In the Gutenberg editor you should see a dropdown under Page attributes, this allows you to select templates, select the Contact us template and click on Publish. Next, it will be modified to have two columns..

Give the template two columns

In the contacus.php template modify the code so that Bootstrap creates two columns. First create a div with a class of row and then nest two coulumns that are 6 coulumns wide in the bootstrap grid system, using the class col-lg-6.

.....
<div class="container">
<?php the_title()?>

 <div class="row">
  <div class="col-lg-6">
    <p> This is the left column </p>
  </div>
  <div class="col-lg-6">
   <?php get_template_part('includes/section', 'content')?>
  </div>
 </div>

</div>
.....

The page should now have two columns

That concludes part 4 of this tutorial. next we look at navigation in WordPress themes.

Leave a Reply

Your email address will not be published. Required fields are marked *