Customize the Post Header of a Single Post in the Beaver Builder Theme

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.

customize-post-header-design-finalSo, let’s outline what the steps in this tutorial will achieve for you.


  1. 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.
  2. Post Author’s Avatar image output in our new section we’ll be adding to add a personal touch to the posts.
  3. 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).



  1. 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.



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.


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:

  1. 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.
  2. The Div with the class gradient-fade will sit over our background image (using CSS that will follow in this tutorial).
  3. $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.



  1. We’ve got everything where we need it on the Post. That’s the main thing.
  2. 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.


  1. get_avatar() is a native WordPress function that you can read more about here.
  2. 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.

[product_category category=”child-themes”]

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 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

[thrive_lead_lock id=’2858′]

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.

Comment below

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 Team.

Hey! I'm Grant Ambrose,

My WordPress website generates millions of dollars in sales each year and I put together this website to help you do the same

I believe that a lot of the time, we aren't doing things that will help our business NOT because we don't know how to do it, but rather we don't even know it is possible. My website aims to change this. My website is here to help show YOU what is possible - what YOU could set up in your business with WordPress to increase sales, automate tasks and (ultimately) turn your ideas into working WordPress solutions.

13 thoughts on “Customize the Post Header of a Single Post in the Beaver Builder Theme”

  1. Grant, this is a pretty good tutorial on bending BB single post layouts. I do read these posts and find the more advanced ways of using Beaver Builder very interesting. Thanks for the posts.

    I have a question about the Customize the Post Header of a Single Post tutorial though. How would you go about making the single page post width less wide without affecting the rest of the blog posts. I noticed you have done it on your site. I am not a fan overly wide columns of text as it is harder to read long spans of text.


    1. Hi John,

      I’m just completing a post on this today. It’ll show you how to do this AND also run you through how to easily customize a module – it’s two in one and both useful things to know 🙂

  2. Thanks for this post. I found it very helpful!
    I do have a question though… is there a way to make the image used for the header, the ‘featured image’?


      1. Hi Marcus, I’ll be adding to this post on how to use the featured image and will comment where when updated to let you know 🙂

  3. Hey Grant!

    Is there a way to easily pull the featured image to do this instead of using an ACF image? I’m also trying to get this to the single event in The Events Calendar….with no luck so far.

  4. Hi Grant,
    I notice an image on background in case of iPad/iPhone screen is shown in its full size. Is there a way how to display image even on mobile devices the way it fill the size of sceen width?

    And BTW, is there a way how to add post views counter with eye icon somewhere between author and date (or between data and comments counter) on meta.

    Thanks you


  5. Hi,

    Thanks that’s really great !

    I’ve a problem though : it does not display the post-meta info even though the same code between tags works within the content. I get the avatar then “By” and the author name is empty.

    Any hint ?


  6. I’m new at this so I constantly screw-up. My latest is on step 2 of your Single Post Header customization. Step 1, no problem. On step 2, I used Dreamweaver CS5 to copy your raw code into the Beaver Child Theme functions.PHP file. After I uploaded the new code and tried to load the site, I received the following error message “Parse error: syntax error, unexpected ‘add_action’ (T_STRING) in /home/content/a2pnexwpnas01_data02/88/3361488/html/wp-content/themes/bb-theme-child/functions.php on line 14.” Line 14 contains “add_action( ‘fl_after_header’, ‘bb_do_single_post_top_section’ );”

    Following below is the entire functions.PHP file. Can anyone help me solve this. Thanks.


    // Defines
    define( 'FL_CHILD_THEME_DIR', get_stylesheet_directory() );
    define( 'FL_CHILD_THEME_URL', get_stylesheet_directory_uri() );

    // Classes
    require_once 'classes/class-fl-child-theme.php';

    // Actions
    add_action( 'wp_enqueue_scripts', 'FLChildTheme::enqueue_scripts', 1000 );// Add our custom Post Header section on Single Posts ONLY
    add_action( 'fl_after_header', 'bb_do_single_post_top_section' );
    function bb_do_single_post_top_section() {
    // If the current page loading is a Single Post
    if(is_single() && get_post_type( $post ) == 'post'){
    echo '’;
    // get the value of the ACF background file we uploaded to the field.
    // If you named your field a different name to $bb_page_title_bg, replace this with your field name that you used
    $bb_page_title_bg = get_field(‘bb_single_post_background_image’);

    echo ”;

    // the below outputs the field. As the BB theme runs on Boostrap, we’re using some
    // bootstrap grid classes to keep the content of this Page Title in the same grid as the other content on the page

    <?php // if there is an image uploaded into our new custom ACF background field
    // set the URL of the variable $bb_page_title_bg_url to the URL value of of image field
    $bb_page_title_bg_url = $bb_page_title_bg[url];
    } else {
    // If there is no background image set on the current page or post
    // we set the default image to the URL below. Change this to whatever you want your
    // default image to be for the background
    $bb_page_title_bg_url = ''; //add the URL to the default image you want to use if there is not an image set
    // now we output the CSS required to add the background to the image
    echo "
    .bb-top-post-header{background:url(‘$bb_page_title_bg_url’) no-repeat center top;background-size:cover;background-attachment:fixed;}
    echo ”;

  7. I have no idea why, but I went through step 2 again, and it worked this time. Problem gone.


Leave a Comment

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

Grow your WordPress business by getting...
My best tips to your inbox!

I'll send you emails when I publish content I think will help you and your business. You can opt-out at any time and change the topics of emails you get.

This site is not a part of the Facebook website or Facebook Inc. Additionally, this site NOT endorsed by Facebook in any way. FACEBOOK is a trademark of FACEBOOK, Inc.

Scroll to Top