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:
- 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:
- Content: This includes the content of the page of your website. Your content area, and sidebar.
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:
Notice something? Like the above 3 points there is:
- 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:
- 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:
- footer.php: this outputs the footer of your website. Here is what the footer.php file outputs on this page:
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!
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.
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.
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:
- Change the do_action to add_action
- 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.
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
- 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.
- 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
- 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)