Learn exactly how to makeBETTER WEBSITES RIDICULOUSLY FAST

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

Design an incredible Blog using Hooks

In our previous post Set up a blog with Beaver Builder the right way without using modules we explained why you should NOT build your main Blog page on your website using the Beaver Builder Posts module as it can limit your ability to integrate with plugins and other necessary things that you’ll eventually need and won’t be able to implement.

In that post we explained that you should use the native WordPress Blog page that you set under WordPress Dashboard > Settings > Reading > Posts Page for your main Blog.

If you haven’t already read that blog post Set up a blog with Beaver Builder the right way without using modules, we highly recommend you do this before you continue on with this tutorial, as this tutorial will build on some of the ideas of this previous post. More specifically, we will show you how to add Beaver Builder Templates above and below your list of blog posts on your Blog page so that you can achieve a customized blog page while also maintaining the benefits offered by using the default WordPress blog.

Using this technique, you’ll be able to do away with the Beaver Builder Posts module and design an incredible Blog using Hooks.

IMPORTANT! This tutorial will focus on customizing the Blog with the Beaver Builder Theme. Different Themes have different action hooks and CSS so we cannot 100% guarantee this will work out-of-the-box with all themes but it should work with MOST themes.

Here’s the final result we’ll be creating in this post.

Follow this tutorial to learn how to design an incredible Blog using Hooks

By following this tutorial you’ll be able to design an incredible Blog using Hooks and not have to limit yourself to the Beaver Builder Posts module and its available settings.

Let’s begin.

The problem: Using the default WordPress Posts page initially limits your ability to edit your Blog using Beaver Builder

Being able to customize your Blog page is essential. It allows you to meet the demands of your client and yourself as you can do certain things such as add call to actions and newsletter subscribe forms to the blog where needed, as well as many other elements that you may like to include on your blog page.

This post will help you master the WordPress Blog page so that you can customize it to your needs.

If you’ve read Set up a blog with Beaver Builder the right way without using modules and followed the instructions in the post, you’ll have set up a blog with the Beaver Builder Theme that looks something similar to the below.

beaver-blog-grid-standard-layout

This is what a standard WordPress Blog page looks like when using the Beaver Builder Theme with the Blog Sidebar activated on the right.

If you’ve taken this blog design one step further and followed the steps in our other post Create a grid layout for your WordPress Blog in one simple step you may even have your blog laid out in a grid, as per below.

Turn a boring blog layout into an incredible one by learning how to Design an incredible Blog using Hooks

Using some simple CSS that we outline in this post Create a grid layout for your WordPress Blog in one simple step you can easily turn your standard WordPress Blog Layout into a grid without having to use the Beaver Builder Posts module.

But what if you want to add elements above and below the list of blog posts?

This would be easy if you were to do the following:

  1. Create a Page in WordPress and edit it with Beaver Builder
  2. Create your rows in the page and design them using Beaver Builder
  3. Add in a Beaver Builder Posts module and set the settings to achieve a Blog layout you like
  4. Save the Page and you’re done

But, as we’ve discussed in the post Set up a blog with Beaver Builder the right way without using modules, setting up your Blog using this method is the WRONG way.

The correct way to set up your main Blog page is to do the following:

  1. Create a page in WordPress and call it Blog.
  2. Go to your WordPress Dashboard > Settings > Reading and set your Posts Page to you your new page with the name Blog.

But, when you set up your Blog using the correct method above you LOSE the ability to edit the page using Beaver Builder.

And that’s the problem.

You cannot edit the Blog page anymore with Beaver Builder, something you really want to be able to do so you can customize the page extremely fast and use the modules the Beaver Builder plugin offers.

This tutorial will show you how to overcome this problem by teaching you how to customize your Blog using action hooks.

Step 1: Activate the Beaver Builder Templates menu item in your WordPress Dashboard

To go your WordPress Dashboard > Settings > Page Builder > Templates and CHECK the checkbox to Enable Admin Templates.

femiblogger-enable-templates-admin

Check the box Enable Templates Admin so that you can access your Beaver Builder Templates from your WordPress Dashboard.

Then, click the blue button Save Template Settings and you’re done.

Now, you should see a new menu item on the left that is titled Templates, as per below.

FemiBlogger-newtemplates

Step 2: Create the Beaver Builder template that you’d like to appear above and/or below the list of blog posts on your main blog page

In this example, we’re going to firstly add a Beaver Builder Template above the list of posts on your main Blog page.

WHAT IS A BEAVER BUILDER TEMPLATE? A Beaver Builder Template is a layout that you build using Beaver Builder and it can contain one or many rows. For example, when you build your homepage using Beaver Builder, you can save this as as what is referred to in Beaver Builder as a Template. You can then insert this template on other pages OR use the Beaver Builder shortcode (opens a new window) to add the Template using PHP functions like we’ll show you in this tutorial.

To create this new Template that you’ll add above your list of posts on your main Blog page, go to WordPress Dashboard > Templates > Add New and give the Template a name.

We suggest you name your template Blog – before to help you follow along with this tutorial.

add-a-new-beaver-builder-template

Next, design your Template by clicking the Launch Page Builder button like you normally would.

In the below animation you can see the design of the Template that we’re going to be adding before the Blog posts on our website.

TIP: We’re using the professionally designed Sections available in the third-party UABB (Ultimate Addons for Beaver Builder) plugin that we highly recommend trying out if you’re using Beaver Builder. They have a range of pre-made designs that their team have professionally designed to save you time when building websites.

set-up-a-blog-with-beaver-builder-the-right-way-hooks

Let’s also create a Beaver Builder Template that we’ll add AFTER our blog posts on our main Blog page

Now, to best showcase the power of what this tutorial is going to show you, we’re also going to create a template that we’ll add after all the blog posts and before the footer on your main Blog page, as per below.

Again, we recommend you name this new template Blog – after so that you can follow along with the tutorial.

add-a-new-beaver-builder-template-after-blog-posts

Click the blue Launch Page Builder button and design the Template that’ll appear after your posts and before the footer on your main Blog page.

Here’s the Template we’ll be inserting at the bottom of our blog page. Again, we’ve used a Section from the UABB (Ultimate Addons for Beaver Builder) plugin.

add-a-new-beaver-builder-template-after-blog-posts-design

The template we’ll be inserting at the bottom of our Beaver Builder Blog page.

Step 3: Add the Beaver Builder Templates to the Blog page using the appropriate action hooks available in the theme

Thus far you’ve got the Beaver Builder Templates designed and you’ve also setup your Blog page. Now you just need to combine the two and output the Templates into the Blog page.

To do this, you’ll use what are called Action Hooks in WordPress.

TIP! If you’re not familiar with what a hook is or how you can leverage them to build websites, you should read our other post How to use the hooks in the Beaver Builder Theme for WordPress as it explores action hooks thoroughly.

Firstly, navigate to your theme’s files in your cPanel or FTP client and edit your theme’s functions.php file.

Add the below PHP code into your themes functions.php file.

THINGS TO NOTE WITH THE ABOVE PHP

  1. The fl_after_header action hook is only available with the Beaver Builder Theme so you will need to replace this if you are using another theme with the appropriate action hook for that theme. You’re looking for an action hook that is AFTER the header.
  2. We wrap the output of our template in if( is_home() || is_cat() || is_tag() ){} so that this template ONLY shows on our blog pages (main blog page, blog categories and blog tags). If we don’t add this line then the template outputs on all our pages, including the home pages and every other page of our website. These are Conditional Tags in WordPress.
  3. You will need to replace slug=”blog-before” if you have not named your Beaver Builder Template the same as what we’ve done in this tutorial. You can find the slug for any Template if you forget by going to your WordPress Dashboard > Templates and clicking Quick Edit edit on the template. Below is an example how to find a Template’s slug by clicking on Quick Edit.
    set-up-a-blog-with-beaver-builder-hooks-template-slug-quick-edit

Once you add the below PHP correctly into your functions.php file, you can now navigate to your default WordPress Blog posts page on the front end of your website and you should now see your Beaver Builder Template appear before the list of blog posts.

This is what our main Blog page looks like now after adding that PHP code. Notice how our Beaver Builder Template appears BEFORE our list of blog posts.

add-template-before-blog-posts-main

Next, we need to add the Template AFTER the blog posts. We’ll do this by again editing our themes functions.php file and adding the below PHP code.

THINGS TO NOTE WITH THE ABOVE PHP

  1. The code is exactly the same as the PHP we used to add the Beaver Builder Template BEFORE the blog posts EXCEPT we change two things.
    1. We change the hook to use fl_after_content so that we add the Template AFTER the list of blog posts.
    2. We change the slug= to be the slug of the Template we’re wanting to add using this action hook fl_after_content.

And this is the final result with both Beaver Builder Templates added to the page, one before and one after the list of Blog posts in the Main Blog page.

final-result-adding-templates-after-and-before-blog-posts

Wrapping up this tutorial on how to design an incredible Blog using hooks

As you can see, there’s really no need to sell yourself short by using the Beaver Builder Posts module. Sure, you can get a blog up quickly using it, be you’re going to run into a road block sooner than later and have to redo your whole blog again.

By setting up your Blog like we discuss in this post Set up a blog with Beaver Builder the right way without using modules and then using the method taught in this post, you’re able to produce a customized design for your main Blog while still allowing yourself the ability to customize the blog using plugins.

Comments

Please comment below if you have any questions on this. We’re always here to help our fellow Beyonders!