Page builders are great tools for creating websites quickly and easily. Having a drag & drop interface means you can work as fast as a designer, without having to code or program.

However, WordPress page builders have a small problem: their layouts only extend to the current page.

What this means is that you cannot add drag and drop content in places like the header or footer. Or, if you want to add some builder content right after the content of every blog post, you’re out of luck.

These areas of your website are not part of the actual content of a page or post– they’re unreachable by the page builder.

Or are they?

Hooking page builder content into your website

WordPress was built with extensibility in mind, and the Hooks API is the result of that.

What are WordPress hooks? To put it simply, they are small spots scattered across your website, where you can insert your custom content.

WordPress itself has a few hooks, but here’s the thing: many WordPress themes work entirely by using hooks. Their entire layout is generated by creating a base layout, and then hooking all sorts of content into it.

Still not clear? Then just take a look at the Genesis framework. It has a basic layout with a header, a main content section, and a footer. And each of these sections is littered with hooks, which Genesis uses to add elements like:

  • The logo of the website
  • The main menu
  • The social profile links
  • Widget areas

And so on. The best part is that you can also add your own content in any of these areas, so customizing your theme is very easy.

How can I use hooks?

The only drawback to hooks is that they are meant for developers. They are universally used by themes and plugins to make every part of WordPress more extensible. If you want to make use of them, you’d normally have to create your own mini-plugin, or customize your theme.

However, things are different with page builders.

You can use a page builder like Forge to take advantage of WordPress hooks– without coding at all. All you will need for that is install Forge, and then use the Templates extension.

Creating reusable page builder templates

In Forge, templates are small pieces of content that can be used for many different things. You could create a small block of content using drag and drop, and then reuse it:

  • Use it as another element in the builder UI
  • Embed it into a normal post with a shortcode
  • Place it on your sidebar as a widget
  • Place it on a WordPress hook

The last one is what makes templates truly shine, because it allows you to essentially customize your WordPress theme without actually touching it.

forge-edit-template

The first step is to create your template.

After you create a template, you can choose to attach it to an existing WordPress hook. This can be done on the Templates page (located on Forge > Templates), by clicking on the Embed Template button.

As soon as you do this, a new panel will appear with a detailed interface for selecting your WordPress hooks. Here, you will need to set two things: the name of the hook, and the conditions for displaying your template.

template-hooks

Where is the hook listing?

To put it simply, there’s no such thing as a list of all the available WordPress hooks. The WordPress core does come with a number of action hooks that you can use– but the more useful ones will be theme-specific.

Each theme can define its own set of hooks, just like Genesis does, and you will have to look into the documentation of your theme to see what your options are.

For your convenience, there’s a small reference sheet in this window, which shows you the hooks of some popular platforms. Here you can see at a glance which ones you can use– for example, you can see the hooks available on the free Furnace theme.

Once you know which hook you need to use, simply type it into the left box.

Selectively displaying your template

The second step for embedding your template is selecting when you want it to be displayed.

Let me explain: chances are you might want to add a block of content on the footer of your website, but only on the homepage. In this case, you need to use a hook in the footer area, and also tell Forge that you only want it to be hooked when the user is looking at the homepage.

To select these display options, you can check any of the boxes on the right. Any combination is valid, and Forge will display your template when they do apply. If you want your template to be displayed every time, simply tick the Show Always option.

Once you do this, you’re done!

By selecting the genesis_before_loop hook, and the Show Always condition, we can embed our template as the header of any page.

By selecting the genesis_before_loop hook, and the Show Always condition, we can embed our template as the header of any page.

Taking advantage of WordPress hooks

Using page builder templates like this is a very practical way of customizing your WordPress site. You don’t need to delve into the code, and at the same time you can take advantage of the drag and drop interface.

There are many advantages to building a website this way, and it opens up a whole new world of possibilities. If you want to know how you can use hooks to improve your website, I recommend checking out our article on reusable content.

Have you used WordPress hooks to embed content into your sites? Show us!

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on TumblrBuffer this pageEmail this to someone