Have you ever wondered how to spice up your blog a little with a new post template?

Creating a layout that will shake things up and get your views up is not as hard as you might think!

Here is what we are going to do:

  1. Create a child theme
  2. Add a new post template
  3. Install ACF & Create a fieldset
  4. Style our new template

This may seem a little daunting but trust me it is actually quite easy.

1.  Create a Child Theme

This should really be the first step in any WP Dev project so I will outline the best process that I use to create a child theme for any parent.

To begin go to https://childtheme-generator.com/create-child-theme and fill out the fields, use the information on the right-hand side of the screen to help you get the correct info for your theme.

2. Add a new post template

After you are done and have downloaded the theme then you will need to extract it so we can add the new post template file. Once extracted go ahead and create a new file titled “newblog-template.php” as shown below.

Now you are going to need to open the file in the editor of your choice and copy in the code below.

<?php
/*
* Template Name: New Blog Template
* Template Post Type: post, page, product
*/

get_header(); ?>

<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php
// Start the Loop.
while ( have_posts() ) :
the_post();
?>
<div class="post-container">
<?php the_content(); ?>
</div>

<?php
endwhile;
?>
</div><!-- #content -->
</div><!-- #primary -->

<?php get_footer(); ?>

Go ahead and save the file, then select all the files you extracted and the new file you just created and re-zip them. Now we need to login to the WordPress Admin and upload our new child theme (if you need help with doing this then give it a google).

3. Install the Advanced Custom Fields plugin

Go ahead and install the ACF plugin from the WordPress plugin repository.

Now we need to create our first fieldset, so hover over the Custom Fields menu entry and select add new. Then fill out the fields as shown below.

 

4. Style our new template

So now we are finally ready for the fun part, which is to style our new template!

Go ahead and create a new blog post and choose the New Blog Template in the page attributes meta box. You should now see the meta fields that you created show up under the post title.

No go to Appearance -> Editor and click the newblog-template.php file from the right-hand menu. Now select everything that is there and copy in the code below.

<?php
/*
* Template Name: New Blog Template
* Template Post Type: post, page, product
*/

get_header(); ?>

<?php
// Start the Loop.
while ( have_posts() ) :
the_post();
?>
<!-- Page Header -->
<header class="masthead" style="background-image: url('<?php echo the_field('page_header_image'); ?>')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-heading">
<h1><?php echo the_title(); ?></h1>
<h2 class="subheading"><?php echo the_field('post_tagline'); ?></h2>
<span class="meta">Posted by
<?php the_author(); ?>
on <?php the_date(); ?></span>
</div>
</div>
</div>
</div>
</header>

<!-- Post Content -->
<article>
<div class="container" style="min-height: 100vh;">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">

<div class="post-container">
<?php the_content(); ?>
</div>

<?php
endwhile;
?>
</div>
</div>
</div>
</article>

<hr>

<?php get_footer(); ?>

Save that and then select the style.css file and paste in the code below.

a {
color: #212529;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}

a:focus, a:hover {
color: #0085A1;
}

blockquote {
font-style: italic;
color: #868e96;
}

.section-heading {
font-size: 36px;
font-weight: 700;
margin-top: 60px;
}

.caption {
font-size: 14px;
font-style: italic;
display: block;
margin: 0;
padding: 10px;
text-align: center;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}

::-moz-selection {
color: #fff;
background: #0085A1;
text-shadow: none;
}

::selection {
color: #fff;
background: #0085A1;
text-shadow: none;
}

img::-moz-selection {
color: #fff;
background: transparent;
}

img::selection {
color: #fff;
background: transparent;
}

img::-moz-selection {
color: #fff;
background: transparent;
}

header.masthead {
margin-bottom: 50px;
background: no-repeat center center;
background-color: #868e96;
background-attachment: scroll;
position: relative;
background-size: cover;
}

header.masthead .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #212529;
opacity: 0.5;
}

header.masthead .page-heading,
header.masthead .post-heading,
header.masthead .site-heading {
padding: 200px 0 150px;
color: white;
}

@media only screen and (min-width: 768px) {
header.masthead .page-heading,
header.masthead .post-heading,
header.masthead .site-heading {
padding: 200px 0;
}
}

header.masthead .page-heading,
header.masthead .site-heading {
text-align: center;
}

header.masthead .page-heading h1,
header.masthead .site-heading h1 {
font-size: 50px;
margin-top: 0;
}

header.masthead .page-heading .subheading,
header.masthead .site-heading .subheading {
font-size: 24px;
font-weight: 300;
line-height: 1.1;
display: block;
margin: 10px 0 0;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@media only screen and (min-width: 768px) {
header.masthead .page-heading h1,
header.masthead .site-heading h1 {
font-size: 80px;
}
}

header.masthead .post-heading h1 {
font-size: 35px;
}

header.masthead .post-heading .meta,
header.masthead .post-heading .subheading {
line-height: 1.1;
display: block;
}

header.masthead .post-heading .subheading {
font-size: 24px;
font-weight: 600;
margin: 10px 0 30px;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

header.masthead .post-heading .meta {
font-size: 20px;
font-weight: 300;
font-style: italic;
font-family: 'Lora', 'Times New Roman', serif;
}

header.masthead .post-heading .meta a {
color: #fff;
}

@media only screen and (min-width: 768px) {
header.masthead .post-heading h1 {
font-size: 55px;
}
header.masthead .post-heading .subheading {
font-size: 30px;
}
}

.post-preview > a {
color: #212529;
}

.post-preview > a:focus, .post-preview > a:hover {
text-decoration: none;
color: #0085A1;
}

.post-preview > a > .post-title {
font-size: 30px;
margin-top: 30px;
margin-bottom: 10px;
}

.post-preview > a > .post-subtitle {
font-weight: 300;
margin: 0 0 10px;
}

.post-preview > .post-meta {
font-size: 18px;
font-style: italic;
margin-top: 0;
color: #868e96;
}

.post-preview > .post-meta > a {
text-decoration: none;
color: #212529;
}

.post-preview > .post-meta > a:focus, .post-preview > .post-meta > a:hover {
text-decoration: underline;
color: #0085A1;
}

@media only screen and (min-width: 768px) {
.post-preview > a > .post-title {
font-size: 36px;
}
}

At this point, if you do not have bootstrap installed on your site you will need to add the following to your functions.php file.

function child_enqueue_bootstrap() {
wp_enqueue_style( 'bootstrap-style','https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' );
wp_enqueue_script( 'bootstrap-script','https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js' );
}
add_action( 'wp_enqueue_scripts', 'child_enqueue_bootstrap' );

Please note this can cause style problems in some themes that are not Bootstrap friendly so proceed with caution!

 

5. Final testing

So now we are ready to test this new template out!

Go ahead and create your new post with your new template and fill out your new fields as well as adding some content. If you have done everything right it should look like this (with your own content and picture of course)!

 

Conclusion

Creating new post templates is not really as scary or complicated as it seems, you just have to know what you want and follow the steps above to get it!

This will work with any html template, just use the PHP snippets that I used the template page code and you can always message me with any questions!

Cheers,

Robert