facebook_pixel

Learn exactly how to makeBETTER WEBSITES RIDICULOUSLY FAST

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

How to use the hooks in the Beaver Builder Theme for WordPress

This is important

I just want to preface this tutorial with saying that learning about Hooks and Filters is essential if you’re ever going to do anything exciting with WordPress and Beaver builder, and I can’t stress enough how important it is to take the time to really learn what they are and how you can use them to your advantage. As a WordPress developer who has been down the journey of learning WordPress, I will swear by the fact that learning to use hooks and filters will be the best thing you can ever do on your journey to understanding WordPress.

Understanding WordPress hooks in WordPress is actually the best thing you can do todayClick To Tweet

In this tutorial you will learn

In this tutorial you will learn exactly:

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.

  • What a hook is, including what they do and why you use them
  • How to find the hook you need to use for the thing you’re trying to do
  • Where you can find the complete list of Beaver Builder hooks that are used in the Beaver Builder Theme (hint, you can find the links to them here).

What will learning hooks allow me to do?

Once you know how hooks work and where you can find them, you’ll be able to:

  • Customise things in the Beaver Builder theme you cannot do easily using CSS, or through the customiser by going to Appearance > Customise. This includes things like
    • Adding custom content to the top bar
    • Adding content before the footer on each page (including Beaver Builder Saved Rows)
  • The possibilities are endless

Let’s get started!

What are hooks

Hooks are not something specific to the Beaver Builder Plugin, or the Beaver Builder Theme for that matter. They are actually contained within the WordPress core code and are the reason plugins and theme’s can all play nicely most of the time.

Not to be lazy, but here’s what the WordPress codex describes hooks as:

Hooks are provided by WordPress to allow your plugin to ‘hook into’ the rest of WordPress; that is, to call functions in your plugin at specific times, and thereby set your plugin in motion. There are two kinds of hooks:

Now, there are two types of hooks in WordPress – action hooks, and filter hooks. In this tutorial we will focus only on action hooks as they are probably going to be more useful to you right now.

How WordPress loads a website using your theme

When WordPress loads your website (let’s use your homepage here as the example for the tutorial) it outputs your homepage code in the following order:

  1. Header: generally speaking, this includes the title tag and met tag of your page which is used for SEO purposes, plus some javascript and other scripts. Importantly for you as an up-and-coming web developer / designer / WordPress experimenter, it also contains the code that outputs your website’s header that contains your logo and navigation.
  2. Content: This includes the content of the page of your website. Your content area, and sidebar.
  3. Footer:  This can include all sorts of things. It usually contains some more javascript scripts and a couple of other things. Most importantly for you, it also outputs your footer widget code and the footer and your website.

Now, if you use your FTP client (or download the Beaver Builder Theme) and open it up, you will see something similar to the below – a list of the files in the beaver builder theme:

hooks-ftp-bb-theme

Notice something? Like the above 3 points there is:

  1. header.php: this is the file that loads the header of our website. Here what the header on BeaverChildThemes.com is responsible for outputting on my website:
    hooks-bct-header-example
  2. content.php, content-single.php and content-no-results.php: these all output the content of the page (only one at a time and which one is chosen can depend on a couple of things I will discuss further on). Here is what the content-single.php file is responsible for outputting on this page:
    hooks-bct-content
  3. footer.php: this outputs the footer of your website. Here is what the footer.php file outputs on this page: hooks-bct-footer-only-example

So, when someone access your website, WordPress automatically knows to look for these files when rendering the page, and goes through them in this order.

So, how does this relate to hooks?

Now, notice on this website you’re on, BeaverChildThemes.com, that at the bottom of every page there are these two rows which appear after the content and before the footer. These were added using hooks!

hooks-bct-hooked-down-the-bottom

How to find the hook you need

Step 1: Find the file that contains the hook you need

The easiest way to work this out is to ask yourself “where exactly on the page am I trying to put my new content. In my case, I wanted to put these two rows at the bottom of each page on BeaverChildThemes.com and we’ve already learnt that the bottom of the page is referred to as the footer. So, knowing that I wanted to add my content into the footer, I went into the Beaver Builder Theme and viewed the code in the footer.php file.

hooks-bct-footerphp

As you can see, in this file there are a couple of action hooks we can use. I am sure the guys over at Beaver Builder will add more as the theme matures, but here is what is in the current version of the Beaver Builder theme. NOTE: we are looking for lines of code that start with do_action, e.g.

  • do_action(‘fl_content_close’);
  • do_action(‘fl_after_content’);
  • do_action(‘fl_footer_wrap_open’);
  • do_action(‘fl_before_footer_widgets’);
  • do_action(‘fl_after_footer_widgets’);
  • do_action(‘fl_before_footer’);
  • do_action(‘fl_after_footer’);
  • do_action(‘fl_footer_wrap_close’);
  • do_action(‘fl_page_close’);
  • do_action(‘fl_body_close’);

When your website loads, it goes through these hooks from top to bottom, so if you want something to appear higher on your page, choose a hook that comes first in the file.

Now, what you want to do is decide on what hook you’ll be using for your code. The more you practise and use hooks and the Beaver Builder Theme, the more you’ll understand what hook you need for the job at hand. The best part about hooks is that they won’t break your website in a permanent way. If you choose a hook that outputs your content in the wrong place on your page, you can just change the hook you are using to output your code to one that appears lower down the page, until you get your content outputting in your page where you want it to.

If we work with the BeaverChildThemes.com example of adding these two rows to the footer, I knew I wanted to add these two strips before any footer code, so I chose one of the hooks that appeared first in the footer.php file, being:

Now that you’ve got your hook, you need to use it to output your content.

Outputting your content using the hook

Step 1: Copy the hook to your child theme’s functions.php file

To do this, copy the hook you are going to use and put it into your child themes’s functions.php

Step 2: Write your function

Now, using the code above that you’ve just added to your child theme’s functions.php file, alter it to the following:

  1. Change the do_action to add_action
  2. Add the name of your function after the hook name, separated by a comma. This should be unique and meaningful. I have used my_function_name here but you should use something like add_contact_strip_bottom (if you were adding a contact strip at the bottom of every page).

Now, we need to open up our function so we can place the code that will output our content in there, like so:

If, like me, you are also outputting a beaver builder saved row (Beaver Builder Shortcode (documentation here), you should change the slug to the slug of your own template. You can find this by going to Templates in the WordPress dashboard and hovering over your template you are wanting to output. Then, click on Quick Edit and you will see the slug there. Copy it and replace the your slug with the one in my above example.

hooks-bct-template-slug

Step 3: Save your functions.php file in your child theme

Save the functions.php file you’ve just edited and add upload it back onto your server via FTP and now the code you added in your function (i.e. in my example, the saved Footer Widgets row will be output after the content and before the footer, which we used the hook fl_after_content to do so).

And that’s all there is! Practise makes perfect. Practise does make everything easier!

My most commonly used hooks

  • do_action(‘fl_after_header’);I use this:
    • To add newsletter signup forms. An example of this is on my travel blog http://borderbrats.com/ where you can see that on each page there is a form up the top under the header. Under the header = after the header = the fl_after_header hook 🙂
    • To add the rows for transparent headers on websites such as http://parentsfirstaidcourses.com.au/ . P.s. You can read how to create a transparent header in this blog post.
  • do_action(‘fl_after_content’);I use this:
    • TIP! As discussed in this tutorial – to add the bottom strips on BeaverChildThemes.com I actually nearly always use this in my client projects. I do not use the Appearance > Widgets for the footer widgets. I actually build my Footer Widgets row as a Beaver Builder Global Saved Row and the use this hook to output the row on each page so it looks like a footer.

Tips and hints

  1. Once you get around how hooks work, you’ll find that they are very easy to use. The hardest thing is remembering their names. For a reference, I go to the official Beaver Builder documentation here https://www.wpbeaverbuilder.com/knowledge-base/theme-action-reference/ , find the name of the hook I want, and go straight into my functions.php file in my child theme and write the function.
  2. You can conditionally output your content on hooks which means even more customization! For example, if I only wanted to output the footer widgets on the BeaverChildThemes.com home page and only on the single posts, I would use something like the below:

You can read more about WordPress conditional tags here.

What you should do next

  1. Now that you know about hooks, you can follow this tutorial which teaches you how to create a footer with Beaver Builder that you can easily edit using Beaver Builder (really magical stuff)

5 Comments

  1. doublemint2x on May 26, 2016 at 5:19 am

    What a fantastic tutorial!! Thank you for the invested time here. This is super helpful to me as an aspiring wordpress developer.

    • Beaver Child Themes Admin on May 26, 2016 at 5:28 am

      thanks mate! any time. if you have any questions, i’ll be here to help.

  2. doublemint2x on June 1, 2016 at 6:20 am

    I have heard other developers like to use the genesis framework with Beaver Builder. Why would that be and what would the benefits be vs just using the Beaver Builder theme as ya’ll seem to use? Any thoughts? Thanks!

    • Beaver Child Themes Admin on June 1, 2016 at 8:33 am

      A topic that could be discussed for days, I can offer some helpful insight into this and will be discussing it more on an upcoming blog post soon. I used genesis for 3 years before I switched over to strictly Beaver Builder and the Beaver Builder theme. The main reasons I swapped over is that I liked the customizer of the theme and it worked the best with the BB plugin. I also love the activeness of the guys, and they’re obviously very smart with what they’re doing so it is only a matter of time before anything Genesis does great is done with the BB theme, also. So I moved over because of the team behind BB and my faith in them. Also, most small business projects I do work really well on the BB theme. In terms of why people stick to using Genesis with the BB theme, there are a few reasons, especially for the two types of users. User 1 – people who don’t know how to code. User 2 – developers. Genesis has more hooks and some great filters that allow you to change the layout of pages, change the query etc. This is what I miss most about Genesis – I would be able to code an entire site in the functions.php file using hooks and filters, and styling in style.css. In regards to User 1 types of people who are still mastering coding, Genesis has some plugins you can install that help prevent you having to write code. Things like the design pallette plugin, simple hooks, simple menus, etc. At the end of the day, Genesis plugins are very stable, kept up to date and if you google pretty much anything, someone has had the problem you’re facing and the solution / hook you need. Final note – if you’re only doing small business websites that are quite simple, I would stick with BB and watch it be nurtured and improved.

      • doublemint2x on June 2, 2016 at 5:13 am

        Thank you for your insights. I have been internally debating over the two for months. I definitely fall under the User 1 category. I can see the genesis framework allowing complete control and flexibility if you know how to code; I don’t. I have access to all the StudioPress themes, but am still leaning toward strictly using the BB theme with plugin. It appears it will allow me, a non-coder, more flexibility with less plugins. Thanks again for your thoughts.

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