A very common question in the Beaver Builder community is how to customize the Post Header of a Single Post in the Beaver Builder Theme so that Blog Posts are more aesthetically interesting.
In this tutorial we’re going to run you through the exact steps you need to follow to achieve the below Post Header design with the Beaver Builder Theme.
Here is what the final outcome will look like after we customize the Post Header of a Single Post in the Beaver Builder Theme
And below is an animation showing the fade to black as you scroll down the page.
So, let’s outline what the steps in this tutorial will achieve for you.
THE FEATURES THAT WE’LL BE CREATING
- A full-width Post Header that appears at the top of Single Posts and stretches the full-width of the post – a very modern effect.
- Post Author’s Avatar image output in our new section we’ll be adding to add a personal touch to the posts.
- Fade to black on scroll so that when you scroll down the page, the image fades to black (a very neat effect!).
Step 1: Create the Custom Field for the background image and show it only on Posts
Install the plugin Advanced Custom Fields from the WordPress plugin repository or by searching for it under WordPress Dashboard > Plugins > Add New.
Once the plugin Advanced Custom Fields is activated, you will see a new admin menu item labelled Custom Fields, as shown below.
Click on this new menu item Custom Fields and then click the Add New button.
Next, create a new group of Custom Fields with a name similar to Single Post Fields as we have below.
Then click on the +Add Field button and add an image field.
Configure as per below, naming the field bb_single_post_background_image if you can (it’ll make this tutorial A LOT easier to follow if you’re not familiar with Custom Fields in WordPress).
THINGS TO NOTE WITH THE ABOVE SCREENSHOT
- Field Type should be set to Image and you need to set Return Value to Image Object.
Now, scroll down the page and ensure that you are showing this field in the WordPress backend ONLY where the post type is Post (i.e. only do this for Blog Posts).
This is shown below.
You shouldn’t have to change any of the other default settings so click the blue Publish button up the top right of the page.
Now when we edit a Post you will see the new Image Field for our background image that we’ll use for the Post Header section we’ll be adding. This will appear underneath where you usually add the content of your Post into the editor.
LETS CREATE A DUMMY POST FOR TESTING THE CODE
While we’re here, let’s create a Post (or you can edit an existing Post in your Blog) and add this background image so that we can test our code as we go.
Below I have added a new Post with an image in our new Background Image field we created using Advanced Custom Fields.
Step 2: Add the PHP code to output our new top Post Header section
Now that we’ve registered the field for the Background Image, let’s output the content of our new Single Post Header section.
THE ABOVE PHP CODE EXPLAINED
There are comments all throughout the above PHP code that you can go through to understand how it all works but if you don’t fully understand it – don’t worry. Have your best go at trying to digest it as the more you know the more you can do (isn’t that life?). However, note the following:
- bb_single_post_background_image is the name of our background image field that we set in Advanced Custom Fields in Step 1 of this tutorial. If you used a different name you will need to update this to the name of your own field.
- The Div with the class gradient-fade will sit over our background image (using CSS that will follow in this tutorial).
- $bb_page_title_bg_url = ”; – This is where you enter the URL of the image you wish to use if a Background Image is NOT set. Add the URL in between the ” marks. The best way to do this is to update an image to your WordPress media library, grab the URL and then paste it in here.
After following the steps so far in this tutorial your Single Posts should look something like the below.
THINGS TO NOTE ON THE ABOVE SCREENSHOT
- We’ve got everything where we need it on the Post. That’s the main thing.
- We just have to style what we have here and remove the duplicated Post Title and Post Meta.
Step 3: Add the current Post Author’s Avatar Image to the top post meta
Now, add the below PHP code into your theme’s functions.php file to output the Avatar image of the current Post Author.
THINGS TO NOTE WITH THE ABOVE PHP
- get_avatar() is a native WordPress function that you can read more about here.
- The Beaver Builder Theme runs with the Bootstrap CSS so we can use Bootstrap CSS classes, one of which is the CSS class img-circle that you can add to images to make the image a circle. No extra CSS is required when you use the Bootstrap CSS classes – that’s why they’re great! You can read all about the available Bootstrap image classes here
Now your Single Post design should look something like the below.
Step 3: Add some CSS styling to make everything appear as we want it to
Now, let’s make everything look pretty by adding the below CSS into your theme’s style.css file (or wherever else you add your CSS into your WordPress Theme).
And now we have the below.
Step 4: Remove the default output of the top post meta section
As you can see in the above screenshot, we’ve got two instances of our top post meta (the section with our image, Post Title and date published, etc) and we need to remove the default occurrence of it that the Beaver Builder Theme outputs.
To do this, use your FTP client or cPanel to navigate to /wp-content/themes/bb-theme (the Parent Beaver Builder Theme folder) and copy the content-single.php file from this folder into your child theme folder.
For example, if you are using our Electro CHARGE Child Theme you would navigate to /wp-content/themes/bb-theme and copy the content-single.php file from here to /wp-content/themes/electrocharge.
Once you have copied the content-single.php folder from the Parent Beaver Builder Theme into your Child Theme’s folder, edit the new content-single.php file in your Child Theme and remove the below lines of PHP code from your child theme’s content-single.php file.
Save this content-single.php with these above lines removed, preview your website and admire the completed product.
Go one step further! Add breadcrumbs to your new Post Header section
Breadcrumbs are very important for usability and they don’t come standard in the Beaver Builder Theme’s Blog.
AN ADMITTANCE! We all get busy and even our beyondbeaver.com website (currently) doesn’t have them. But we’re going to be adding them this week because we KNOW how important they can be.
Enter your email below to unlock this hidden content and see exactly how you can easily add Breadcrumbs to your new Post Header section
To add Breadcrumbs to your Post Header section you’ve just created, install the Yoast SEO plugin (you’re probably already using this as your SEO plugins which is great!).
Next, go to WordPress Dashboard > SEO > Advanced and Enable Breadcrumbs, as per the below animation.
NOTE: You can play around with the settings on this page if you’d like but we keep them as the default as they work really well.
The Yoast SEO plugin provides a PHP function to output the Yoast SEO Breadcrumbs in your website (you can see more on this function by clicking here) so we need to add this PHP function to our code.
To do this, edit your theme’s functions.php file and add the below PHP code wherever you’d like to output the Breadcrumbs.
In the below PHP code we added Yoast SEO before the Post Title.
And this is the final outcome of everything in this tutorial PLUS this extra step where we added the Yoast SEO Breadcrumbs.
Wrapping it up
As you can see, this is an extremely easy way to add some life to the boring Single Post design that comes default with the Beaver Builder Theme.
Content is king as they say, but you need to have a great looking design to pull people in enough to start reading your awesome content.
Have a go at this tutorial if you’ve skipped down to this point of the Post and don’t forget to subscribe to our Mailing List if you haven’t already, as we’ll be doing more of these designs very soon.
If you have a specific Single Post design you’d like us to write a tutorial on, please comment below and we’ll have a look at creating it for you 🙂
Until next time,
The BeyondBeaver.com Team.