facebook_pixel

Learn exactly how to makeBETTER WEBSITES RIDICULOUSLY FAST

Get exclusive tips that'll help you master WordPress, Beaver Builder and lots more.

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.

Master Beaver Builder in 30 days!

Enter your email below to join over 900 people just like you and get 1 mind-blowing Beaver Builder tip each day for the next 30 days.

Here is what the final outcome will look like after we customize the Post Header of a Single Post in the Beaver Builder Theme

customize-post-header-design-final-static

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.

THE FEATURES THAT WE’LL BE CREATING

  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.

advanced-custom-fields-acf-plugin-search-result

Once the plugin Advanced Custom Fields is activated, you will see a new admin menu item labelled Custom Fields, as shown below.

advanced-custom-fields-acf-menu-item

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.

customize-single-post-header-design-create-an-acf-field

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

customize-single-post-header-design-acf-field-settings

THINGS TO NOTE WITH THE ABOVE SCREENSHOT

  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.

customize-single-post-header-design-post-type-settings

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.

acf-advanced-custom-fields-save-field-group

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.

customize-single-post-header-design-new-acf-background-image-field-edit-post

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.

customize-post-header-design-uploaded-background-image

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:

  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.

customize-single-post-header-design-after-php

THINGS TO NOTE ON THE ABOVE SCREENSHOT

  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.

THINGS TO NOTE WITH THE ABOVE PHP

  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.

customize-single-post-header-design-after-php-gravatar

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.

customize-single-post-header-design-css-added

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.

  • thumb-bewell

    BeWell

    $69.00
    Live PreviewAdd to cart
  • thumb-electrician

    Electro CHARGE

    Rated 5.00 out of 5
    $69.00
    Live PreviewAdd to cart
  • thumb-fitness-direct-template

    FitnessDirect

    Rated 5.00 out of 5
    $69.00
    Live PreviewAdd to cart

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.

customize-post-header-design-final

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.

customize-the-post-header-yoast-activate-breadcrumbs

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.

customize-the-post-header-with-yoast-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 BeyondBeaver.com Team.

13 Comments

  1. John-M on August 28, 2016 at 5:39 am

    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.

    Thanks!

    • Grant Ambrose on August 31, 2016 at 1:41 am

      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. Chris Giovagnoni on November 21, 2016 at 10:19 am

    Beautiful! Stupendous! Marvelous! Worked like a charm and without a hitch. Thank you.

  3. Marcus Alluvus on November 23, 2016 at 6:27 pm

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

    Thanks

    • Marcus Alluvus on November 23, 2016 at 9:15 pm

      Oh and then not have the ‘featured image show up in the post itself again.

      • Grant Ambrose on November 27, 2016 at 10:09 am

        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 🙂

  4. andrewpeters on November 26, 2016 at 10:07 am

    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.

  5. Vit on February 4, 2017 at 1:07 pm

    Wow, this is just awesome. Thank you Grant!!!

  6. Vit on February 5, 2017 at 6:37 am

    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

    Vit

  7. hypnoscient on April 12, 2017 at 4:00 am

    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 ?

    Thanks

    • patrice on June 15, 2017 at 3:12 am

      Post data are not setted correctly, so get_the_author_meta() in FLTheme::post_top_meta(); does not return result

      To fix it, simply add at the top of your function
      global $post;
      setup_postdata($post);

      Et voilà 🙂

      https://www.patricelaurent.net

  8. f.ticer on May 2, 2017 at 1:25 pm

    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.

    <?php

    // 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
    if($bb_page_title_bg){
    // 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 ”;
    }
    }

  9. f.ticer on May 3, 2017 at 5:34 am

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

    f.ticer

Leave a Comment

You must be logged in to post a comment.

Master Beaver Builder 

Join over 900 people and get 1 mind-blowing Beaver Builder tip each day

x