by Adam Preiser updated July 28, 2019

How To Use Hooks In Your WordPress Theme To Generate Leads & Sales


Share on facebook
Share on twitter
Share on linkedin

Your theme most likely supports hooks, this video shows you how to use them to generate leads and sales.

Here is more info on the tools discussed in the video:

Astra Theme

Astra is a free WordPress theme that is focused on speed. Optionally you can purchase the Pro version for $59 which adds some additional settings and options.

Key Astra Theme Features:

  • Not The Fastes Theme, But It's No Slouch
  • Lots Of Free Demo Sites
  • Flexable Mega Menu Feature
  • Custom Layouts Options
  • WooCommerce Support
  • LearnDash Support

Astra Theme is a fair choice for any WordPress web design project. I suppose the biggest question is if you even need to purchase a theme these days as page builders are doing all of the same things you would need a theme for. For example, Elementor has the free Hello theme that lets your page builder do all the work.

There are still some good reasons to purchase a pro theme, but for most people, they most likely will be fine with a free theme.

For me though, I think Astra Theme has not kept up with current trends and I no longer recommend it.

There are much better modern themes available that offer inbuilt header and footer builders vs being restricted to 3 layouts, plus more flexible page and post layouts.

Check Out Astra Theme

Beaver Builder

Beaver Builder is a WordPress page builder that is loved by website developers and DIYers alike. It's reputations of being developer friendly, having clean code, and reliable updates have led to it being used on over one million websites.

Key Beaver Builder Features:

  • Fast Front End Page Builder
  • Full Template & Block Library
  • Modern Design Features, Gradients, Drop Shaddows
  • Most Reliable Page Builder Available
  • Ideal Page Builder For Agencies
  • Whitelable Option On Higher Package

Beaver Builder is a fantastic page builder that I personally use. When you pair it with Beaver Themer, there is no limit as to what you can build for yourself and for your clients. This is the exact combo that I use, and simply couldn't create what I am now able to create without it.

Check Out Beaver Builder


Elementor is a WordPress page builder that has taken WordPress web design by storm. It has the deepest feature set, yet is very easy to use and master. Elementor is the most full-featured free page builder. There is also a Pro add-on to add additional developer features.

Key Elementor Features:

  • Live Front End Page Editor
  • Website Personalication Features
  • Template & Block Library
  • Extensive Mobile Responsive Options
  • Most Powerful Popup Builder
  • PRO Create Custom Headers / Footers
  • PRO Create Post Type Layouts

Elementor is the strongest page builder currently available. They consistently release new features that are in line with current design trends. This means you will be able to keep your website relevant.

Elementor Pro is an incredible value considering all the additional modules and power features that it includes.

If I were starting a new website project today, Elementor would be the page builder that I would choose. I consider it a must have WordPress page builder that is a pleasure to use.

Check Out Elementor


GeneratePress is a lightweight theme that can be extended with a premium pack of extensions. It will work with all page builders and has the most extensive documentation of any theme.

Key GeneratePress Features:

  • Page Builder Compatibility
  • Many Customizer Options
  • Best Support Of Any Theme
  • Extensive Documentation
  • WooCommerce Integration
  • Flexable Header Options

GeneratePress is a rock solid choice for you to build your website on. Many highly experienced developers use GeneratePress for all of their projects. Pair that with the amazing support that Tom delivers and you have the perfect theme for just about any website project.

Check Out GeneratePress


OceanWP is a WordPress theme with innovative features and is the most generous free theme I have ever seen. There is a suite of extensions that can be purchased which will extend the theme even further.

Key OceanWP Features:

  • Fully Responsive
  • eCommerce Ready
  • Fully Customizable
  • Advanced Mega Menu
  • RTL Support
  • Free Templates

OceanWP is the most feature-packed free theme that is available.

For a theme that work with any page builder, it has some innovative features that I have never seen in a theme. Primarily it's strength is with e-commerce websites and has all the feature that you would normally expect to pay for.

If you are new to WordPress, the customizer options and the option boxes found in each post/page can be overwhelming and hard to make sense of at times.

Check Out OceanWP

Video Transcript

In this video I would be talking about hooks
now I’m nothing about the kind of put you

hang Christmas lights on I talk about hooks
in your WordPress theme I’m gonna tell you

everything about it how to use these to do
more with your website hi my name is Adam

from where I release a ton of
content to help you get better results with

WordPress faster if you’re new here consider
clicking on the subscribe button and links

to everything that I talked about throughout
the video will be linked in the video description

box below so I’m talking about web hooks hooks
in your WordPress base the theme so I’ll give

you a couple examples here is a website and
you see this large call to action on the top

will this is essentially a piece of content
hooked into what’s called a hook area that

is above the header of this theme have you
ever been to a blog in your reading the post

and you scroll down to the bottom and then
there’s this really interesting call to action

where there may be trying to offer you something
in exchange for your email address and it’s

on every single post that’s also a bit of
content that you can hook into this area at

the end of the content of a blog post these
are called hooks now all the themes that I

talk about pretty much support hooks so if
you’re an Astro fan I am using this particular

theme it has hooks included and it’s actually
included for free so you can download the

free Astra Theme and you can download the
hooks add on and add these hooks to your WordPress

based website all for free here is the free
add-on it’s very unique that they offered

for free because usually this is something
that you have to pay for it’s not to be found

in a free theme if you like GeneratePress
there is an add-on if you have GeneratePress

premium that you can add this hooks functionality
to your website and if you are an OceanWP

fan you have this as an option as well it
comes in the extension bundle now in the use

video here I’m gonna demonstrate how to use
hooks and how you’re most likely going to

use it with your page builder so here I have
a website with Astra installed I want to demonstrate

the free functionality of hooks so I have
asked or installed here know what you need

or need to install Astro go to plug-ins and
there is going to be a plug-in that you need

to install called Astra hooks now they also
have a another plug-in that you can add to

understand these hooks a little better so
here let me actually go to the front end of

this site so this is how the website looks
right now just a normal website but if I activate

this Astra Theme visual hooks like this then
I go here and I refresh the page.

To see all these hook areas so here are the
hook areas above the header here are the hook

areas below the header now since this is a
page the rest of the hooks are in a pretty

much be above the footer and below the footer
these are areas that you can hook designs

into so if you have a design where it’s a
call to action or to be able to hook it into

here and I’m to show you how to do that with
the most page builders and anything that supports

hooks like this now if you are looking at
a blog post you’ll see some of the specific

cook areas for that there is hook areas for
above the sidebar below the sidebar above

the content and below the content on a blog
post so if looking back at this blog post

is would be below the content area of a blog
post for looking here this is going to be

above the header so those are the main locations
now if you did activate this plug-in you’re

gonna want to deactivate it because it will
drive you crazy your receipt on anyone come

to your website and have it look like this
let me do for a refresh here and it should

all go away okay so I’m in a show you where
to put this content in with Astrid GeneratePress

and with the others the motion to repeat okay
so I want to go into appearance and customize

it so Ashley is the only one where they actually
are accessible in the customizer so here I

am in the customizer and we have this option
here that says hooks in here are the various

hook areas now you can actually put anything
in these hook areas you can start typing text

if you have a page builder that supports saving
things and then you can use shortcodes to

display those wherever nothing you can do
that and this is also the ideal location to

put those little snippets of code that you
get for various things so if you want to add

Google analytics to your website it gives
you a little bit of a tracking code in your

and I want to put that into one of these click
area so there’s a lot of purposes for this

so if the very basic level I could just start
typing something right here it’s as before

header so let me go ahead and enter something
there it is all I entered was this is my first

hook in you can see the information that I
just put in this hook area appeared right

there now you can have it formatted HTML if
you want to do that but if you’re using a

page builder there’s going to be a much easier
way to leverage these different hook areas

not when you do put something in one of these
hook areas it will be global on your site

so every single page or post will show whatever
you put in this hook area now you’re pretty

much knocking I want to do it this way this
is how I like to leverage the hooks let me

get out of the customizer right here now on
this particular website I have elemental but

also to demonstrate this using Beaver Builder
now with Elementor if you have Elementor Pro

when you save things to the library check
this out I’m to go to my library it adds this

column here that’s his short code and you
can just copy and paste this out now I’ve

already created a save the section called
header call to action and it generated the

shortcodes I can click on it go ahead and
put that into my clipboard and now I’m been

a take this short code and I am going to put
its in one of these hook locations so here’s

hooks to go to header and I want to put it
before header just like this so when I paste

my short code in you can see it’s going to
show this call to action that I created I

put very limited to no effort into you could
do some better things I probably move this

a little more to the center tighten this up
a little bit but you could see that’s as simple

as it is now if I wanted it after the header
I can go right here and I can pasted in right

there and working to see this call to action
is right there underneath the header so with

Astra these have these hook areas are going
to be accessible in the customizer I really

like that because you get this what you see
is what you get now if you’re using GeneratePress

in their hooks it’s actually good to be an
option found in the back end of WordPress

you can go to appearance and then you’ll have
this option that says GP hooks and you’ll

see it pretty much has the same exact thing
in the same exact locations right here now

if you go to OceanWP it’s pretty much get
to be the same experience here’s a little

screenshot it’s gonna be underneath theme
panel and then underneath hooks right there

and you can see it’s pretty much the same
thing you would just go ahead and paste your

showed short code in you can see I’ve got
that there’s let me go ahead and remove that

now there are these other hook location so
for content it’s good to be before your content

and there’s all these different hook locations
as you saw when I showed you that visual hook

guide there’s hooks before and after comments
a sidebar and footer so go ahead and get out

of here now there is a another way of doing
this these are basic hooks right you just

put it in and it shows a globally now if you
have Astra Pro or you’re a coder you can accomplish

this definitely was some custom code I’m not
a coder and I have no interest in learning

custom code now if you have Astra Pro let
me demonstrate this other functionality and

I’m also been demonstrated using Beaver Builder
now Beaver Builder is a little different to

edit with these shortcodes you can save sections
and you can display those with the short code

but it doesn’t is not as easy doesn’t give
you the short code like Elementor did so if

you Google Beaver Builder shortcodes can it
take you to this page also put a link to it

in the video description down below now when
you scroll down it’s going to show you how

to write these shortcodes out so essentially
it’s going to be this short code but we need

to find something called the pages slug and
put it in right there and that’s all there

is to it so actually let me go ahead and toss
this into my clipboard okay now let me demonstrate

dynamic cooks know if you have Astra Pro so
here’s Astor’s website here’s after Pro I

have a link to this down below if you abide
of an affiliate learn a small amount of money

at others is feature right here dynamic cooks
know what a dynamic hooked is say you want

to put that short code and but you might only
wanted to show on the homepage or say you

might want to have something show at the top
just above the header only on the blog posts

are only on certain types of content or someone
is logged in versus not logged in you can

do that with this dynamic hooks that comes
with Astra Pro Astra Pro is actually very

cheap right now only $49 that might go up
to 69 soon but you can get it for 49 or a

lifetime license for 199 let me show you how
to do this with Beaver Builder with the dynamic

cooks obviously these dynamic cooks work perfectly
fine with Elementor as well I just wanted

to demonstrate all these different systems
so we need to do is we need to go to appearance

we click on Astra right here and here is the
tab for all of these extensions that come

with Astra Pro here it is advance hooks I’ve
already activated it and so we have it right

here under advanced hooks so I’ve gone ahead
and created this advanced hook right here

you basically just give it a name and then
you put your content here so you know how

I demonstrated putting in the content in the
customizer well with these dynamic cooks we

would just do it here in the backend so you
can type whatever you wanted and you can also

if you didn’t want to put a short code and
you can style it however you wanted with this

the typical editor that you get with WordPress
and then right here’s where the magic happens

so first you want to choose the hook location
in this drop-down and here is a list of all

the locations so I will put this at the header
topless will be above the header and right

here you’re going to choose the display options
and that’s pretty much where the magic happens

so if I wanted it on the entire website I
would click this but if I didn’t want it on

the eye entire website and I just wanted it
say on all pages all post a particular page

a particular post or maybe blog posts with
a certain tag or from a certain category you

have all these options right here he couldn’t
be more simple so I’m at first just demonstrated

on the entire website right here now right
here you also have the option of user role

so this could be if someone has a particular
role on your website or if they’re logged

in or logged out so I’m gonna leave that as
is so I’ve enabled it to be across the website

oops I never pulled up the website to begin
with so here is the website without it beautiful

website by the way this is free with the Astra
Sites plug-in so all right, go ahead and click

on updates I’m in a go right here do any re-fresh
and there it is there’s my call to action

created in Beaver Builder now I have Beaver
Builder version 2 on this website here let

me disable it really quick I want to just
show you where to find and where to save the

sections and where to find it with the Beaver
Builder version 2 so here I am on the site

let me do refreshing LC this is gone away
I want to go into Beaver Builder two by the

way I’m been a dutiful review on Beaver Builder
two it’s really really neat so what I want

to do here someone click on this plus go to
Rose because I saved it so right here I’m

been a change this to saved rose and here
is my saved row the way you save arose super

easy in Beaver Builder you can go to any row
like this going to the wrench icon for the

rope and you can click save as and you can
save that row very easily so let me get out

of there now the way you find out that slug
it’s kind of a pain but let me show you so

essentially take the name that you save that
row as and any space and put it all in lowercase

is any spaces replace with a hyphen in your
printing patches set so let me actually show

that to you so I have the saved rose here
if I want to edit it I can click on this little

ranch it opens up a new tab and I can go ahead
and edit anything that I want in that saved

Rome and then I can go ahead and save it as
a little few extra steps I do have a full

Beaver Builder 2.0 review video coming out
Roman to cover all these new little intricacies

with Beaver Builder also in the URL here you
can see the slide right there so it’s after

FL builder template it’s that little bit there
CTA that is the one now I just covered it

in these three themes and I also talked about
Elementor and Beaver Builder is also Thrive

Architect which doesn’t have this functionality
right now there’s also Divi which I don’t

believe you can use shortcodes I don’t think
the theme has a visual hook dynamic hook thing

that I was showing you so there are some disadvantages
there are so many ways these are hooks are

primarily good and use it for maybe if your
website has a seller promotion or someplace

where you want to draw someone’s attention
to or maybe have an opt in box or something

like that it’s very powerful if you leverage
it especially the dynamic codes that come

with Astra Pro it’s a very very powerful if
you also have Beaver Themer you get that dynamic

notice of the hook areas as well so that’s
it for this short tutorial on using hooks

everything that I talked about in this video
will be linked in the description box if you’re

to purchase any of these things if you don’t
have it and appreciate it if you use the links

in the description box I thinned being affiliate
with any of these companies that does have

an affiliate program but also like to throw
something in like perhaps a training course

so some those links might take you back to
my website to give you information about any

bonuses that I might be including in those
purchases now I want to hear from you some

ideas on ideas on how to use hooks leverage
the power of hooks on websites any ideas that

you have obviously showed some basic ideas
but I’d like to hear ideas of how you think

Hook should be used or how you’re currently
using them on projects that you’re doing right

now once again thanks for watching this video
consider subscribing give it a thumbs up and

leave it, down below and I appreciate you
spending this time with me

My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.

Join The Conversation

Your email address will not be published. Required fields are marked *

Stay Up To Date

Enter your name and email for the lates news, updates, and tutorials.