Start Blogging 101 is supported by its readers. If you purchase through a link on my site, I may earn a commission. Learn more
If you’re wondering how to use Kadence Element Hooks to customize your site and take full advantage of an extremely powerful feature, then you’ve come to the right place.
In this Kadence Element Hooks tutorial, I will be going over setup, configuration settings, and everything you need to know to learn how to use element hooks like a pro.
Element hooks allow you to write custom code and hook it anywhere into your site wherever a hook location exists. These can be run on all your pages or only certain pages that you specify.
The best part about using Kadence Element Hooks is that you can use Gutenberg blocks, Kadence Blocks, or even your page builder to build whatever sections you desire. Very similar to Block Elements that are offered by GeneratePress, but Kadence’s version.
By the way, if you’re brand new to Kadence or simply want to learn more about the Kadence theme, you should read why Kadence won my award for the best free WordPress theme for 2020 which gives a full overview of the theme.
If you’re still confused about what Kadence Element Hooks are, imagine being able to put social sharing icons at the top of all your posts, including an “About Me” section at the top of your WordPress sidebar, a countdown timer in a top bar above your site’s header that expires once the deal is done, a customized “subscribe to our newsletter” section after certain blog posts based on category, and much, much more.
Have you ever wanted to add a custom feature to your site such as a subscribe form, but only run it on certain pages so it doesn’t slow down your entire site? Well, that’s where the conditional power of hooks comes into play. You can specify exactly which pages you want the custom code to run on or group it by certain categories or tags. More on that below.
So, without further ado, let’s begin learning how to use Kadence Element Hooks for endless customization on your website.
How to Use Kadence Element Hooks – Tutorial Guide:
1. Setup Kadence Element Hooks
First and foremost, I’m going to teach you how to get Kadence Element Hooks onto your site.
In order to get the Element Hooks feature, you will need the Kadence Pro theme as this is a premium feature offered for the Kadence theme.
Once the Kadence Pro plugin is activated, go to Appearance → Kadence.
If you haven’t already, make sure you fill out your License Key and License Email in the upper-right box and then click Activate to fully activate Kadence Pro and receive any updates that are released.
Here, you will see all of the Pro Addons that come with Kadence Pro. Click on the switch to enable Hooked Elements.
Once Hooked Elements are enabled, refresh your page. Now, under Appearance → Kadence, click on the ↳ Elements option.
You’re now ready to move on to Step 2.
2. Create Element Content
You will now be on the Elements page. Click the Add New button to begin adding a new element.
You will see an option for Default or Code.
Let’s first go over the Default option.
Default Kadence Element
Choosing Default will allow you to use Gutenberg blocks, Kadence Blocks, or even your page builder to design and build whatever section you need.
For this tutorial, I’m going to show you how to create a simple Affiliate Disclosure Element that mimics Wirecutter’s affiliate disclosure.
If you’ve ever included any affiliate links in your blog posts, you know that you have to include an affiliate disclosure statement letting your readers know that you may earn a commission if they purchase a product and then link to your Disclosure Policy.
In fact, check the very top of this blog post to see the exact element that we will be creating. 🙂
Where it says Add title, type “Affiliate Disclosure“.
Then, for your element content, type the following:
“[Your site] is supported by its readers. If you purchase through a link on my site, I may earn a commission. Learn more”
For the “Learn more” part, you can link directly to your Disclosure Policy on your website.
Obviously, you can change the affiliate disclosure content to be whatever you wish. If you use a different disclosure, feel free to type whatever you want for the content.
Once that is done, you’re free to move onto Step 3. But first, let me go quickly over the remaining two element types – Fixed Element and Code Element.
Fixed Kadence Element
If you choose the Fixed option for your element, you’ll see the same screen as choosing the Default option, except your Placement options within the Element Settings (covered in Step 3) will be different.
Fixed Kadence Elements are an insanely powerful addition to Kadence Hooked Elements. Just like a regular Kadence element, they allow you to build any section you want with Gutenberg blocks, Kadence Blocks, or your page builder, except now you’re able to have that element fixed on your website so that it sticks as the user scrolls.
Here is a list of all the fixed placement options you get for a fixed Kadence element:
- Fixed On Top
- Fixed Above Transparent Header
- Fixed Top After Scroll
- Fixed Bottom After Scroll
- Fixed On Bottom
- Fixed Bottom (no space below footer)
To learn more about Kadence Element Hook placements, check out Step 3 where I go over them more in detail.
Code Kadence Element
If you choose the Code option for your element, you will be presented with a slightly different screen that allows you to input code.
Right now, there is a really nice editor that allows you to input any type of HTML code that you would like to add to your site.
As time goes on, I’m guessing there will be more options for code snippets such as being able to add PHP code which will make the Code block even more solid.
3. Choose Element Hooks Placement
After your Kadence element has a title and all of the content that you want, it’s time to hook it into an area on your site by choosing a hook placement.
In the upper-right corner of the Elements page, click on the icon for your Element Settings.
This will open up all of the specific settings for your element and I’ll explain each one in detail.
The first one is Placement. If you click on the dropdown, you will see a long list of every single hook area that Kadence offers. Every one of these is a place that you can hook your custom content into.
Here’s a list of all of Kadence hooks:
- Before Site Wrapper
- After Site Wrapper
- Before Header
- After Header
- Replace Header
- Content Wrap
- Before All Content
- After All Content
- Content and Sidebar
- Before Content
- After Content
- Before Sidebar
- After Sidebar
- Single Inner Content
- Before Inner Content
- Before Inner Title
- After Inner Title
- Before Entry Content
- After Entry Content
- After Inner Content
- Before Comments
- Before Comments List
- After Comments List
- After Comments
- Archive Inner Content
- Before Archive Inner Title
- After Archive Inner Title
- Before Footer
- After Footer
- Replace Footer
- Mobile Menu Off Canvas Area
- Before Mobile Off Canvas Content
- After Mobile Off Canvas Content
- Header Account Login Modal
- Before Login Form
- After Login Form
- Custom Hook
Whew. That’s quite the list of hooks. You’ll notice that Kadence Pro offers a plethora of hook options including the ability to hook into areas such as the mobile menu off canvas area. These types of hooks give the Kadence theme a clear advantage over other popular WordPress theme hooks.
Since we want the affiliate disclosure to show before your blog post’s content but after the post title, the hook we want to choose is Before Entry Content as seen in the previous element settings image. Leave the Priority at the default of 10.
If you are adding your own custom element, look at all the hooks offered and choose whichever hook fits the area in your site where you want to place it.
Time to move onto Step 4.
4. Configure Display Settings
Up to this point, you have created your affiliate disclosure element and you have chosen the Placement hook where you want your element to show up.
Now comes the fun part – Display Settings. Display settings allow you to conditionally place your section on whichever pages you choose.
This makes Kadence Element Hooks very powerful because it can make your website feel more dynamic and allows you to make all sorts of customizations.
If you open up the Show On dropdown, you will see all of the different pages of your site that you can show your element on.
Here’s a list of all the page options you can have your element Show On:
- Entire Site
- Front Page
- Blog Page
- Search Results
- Not Found (404)
- All Singular
- All Archives
- Author Archives
- Date Archives
- Single Posts
- Category Archives
- Tag Archives
- Single Pages
If you want your element to show on your entire site, you can simply choose Entire Site. However, you can begin to see what all you can do with these Display Settings.
You can show your element only on all blog posts by choosing Single Posts or on all pages by choosing Single Pages, plus various archive pages, your 404 Not Found page, and so much more.
For our affiliate disclosure element, we only want it to show on our blog posts, so we will choose Single Posts for the Show On.
Okay, so we have our affiliate disclosure element setup to show on Single Posts at the hook placement of Before Entry Content, but we don’t want the affiliate disclosure to show up on all of our blog posts because what if we don’t have any affiliate links on certain posts?
Here’s where we can get very specific and choose certain Groups or Individual posts to show the element on.
To solve this issue, I’m going to only show the affiliate disclosure on all blog posts that have a tag of
amazon set on them so that we have a proper disclosure on all blog posts that use Amazon affiliate links.
You could also have a tag of
affiliate or whatever tag makes the most sense for you.
In order to do that, choose Group for the Select Post By dropdown. After you choose Group, you’re presented an option to choose which Taxonomy you want to group your posts by – either Categories or Tags. Choose Tags since we want to target blog posts with a certain tag.
After you choose Tags, you can then begin to type whatever tag you want to target.
**Note: It will only show tags that you currently have set on your site.
Choose whichever tag works best for your site. In this case, I chose
amazon. You can also then add more rules if you would like or just leave it as is.
5. Configure User Settings (optional)
At this point, our affiliate disclosure element is complete. If you want to publish your Kadence element, skip to Step 7.
However, I’m going to explain the final two sections because, believe it or not, there are still two more sections for enhanced customization.
The Configure User Settings section is completely optional, but adds yet another layer of customization to build up your site.
If you open up the Visible to dropdown, you will see a set of users and roles that you can show your element.
Here’s the list of users and roles that you can make your element Visible to:
- All Users
- Logged out Users
- Logged in Users
- Specific Role
For example, if you use the Account feature from Kadence Pro in your header, users will be able to sign in and out of your website.
You can choose to show a certain element to All Users, Logged out Users or Logged in Users.
**Note: Leaving it blank (set to None) will show it to all your users which is why this section is optional.
Also, you can specifically choose to show certain elements to various roles on your site such as an Administrator, Editor, Author, Contributor, or Subscriber.
This is a fantastic feature especially if you have a membership type of site where users need to login to your site.
You can make certain sections appear or disappear on your site as soon as users are logged in.
A perfect example of this would be to have certain “ad” elements on your site where ads show in your sidebar, above your header, and in your content.
Then, say a user signs up for your site and is logged in. You could hide all of these “ad” sections for Logged in Users as a way to give an ad-free experience for premium members. How cool is that?!
Time to move onto Step 6 – our last section before it’s time to publish your Kadence element!
6. Set Expires Settings (optional)
I have 4 words for this last section: This. Feature. Is. Awesome. This feature will almost certainly be copied by other popular themes such as Astra and GeneratePress. I wrote extensively about Astra vs Kadence in a detailed comparison here.
The Set Expires Settings section is also optional, but this opens up a level of automation to make your life even easier.
Let’s go over some examples for this section.
Say you have a countdown timer above your header for a certain promotional offer and it expires on a certain date and time. Or, Black Friday is approaching and you have some affiliate banners to show in your sidebar or above your header that are only good for a certain amount of time. Or, you use ShareASale, CJ Affiliate, or some other affiliate network and have access to offers with an expires date.
Well, you’re in luck. Kadence Element Hooks expires settings has you covered.
Simply toggle the Enable Expires switch to on and you will be presented with a date/time field with a calendar.
You can choose the exact date and the exact time that you want your element to expire.
All you have to do is input the time and day that your offer expires, and Kadence Element Hooks does the rest.
Once that time is hit, the element will automatically expire and remove itself from your site. THE POWER IS REAL!
This saves you time and headaches. Who wants to be constantly checking all their offers and manually removing banners, countdown timers, and other promotional material every time something expires? That’s right, no one wants to do that. Just let element hooks do the work for you.
This is all just the beginning. The Kadence team will certainly expand on these options with time and provide even more customizable goodness (as if it wasn’t already good enough).
Finally, it’s time to publish your element in Step 7.
7. Publish Kadence Element
This step will be very quick.
Once you have created your element content, chosen your hook placement, configured your display settings for which pages to show it on, and then set any optional user settings or expires settings, you are finally ready to Publish your element.
Double-check your settings and make sure they all look good, then hit the Publish button on your element.
After your element is successfully published, you will see something similar to the image below.
Congratulations! You have officially published your Kadence element. How does it feel?!
Here’s the Kadence element tutorial final product. Otherwise, you can see it for yourself at the top of the page!
If you didn’t gather it from all the options I went over in this tutorial, Kadence Element Hooks allow for endless customization to your site. Use your imagination and I’d love to hear what you built!
Hopefully you enjoyed this Kadence Element Hooks tutorial!
Kadence Element Hooks are an unbelievably powerful feature and these are just one of the many incredible features that the Kadence Pro theme comes with.
If you want a summarization of all the free and pro features that come with the Kadence theme, check out my detailed Kadence theme overview.
Although themes such as Astra and GeneratePress have had Custom Layouts and Elements for some time now, Kadence took Element Hooks and brought them to a whole new level.
The Kadence Hook Element Settings are directly accessible through your Gutenberg editor, the layout is extremely clean and intuitive (there aren’t 75 different options with a messy UI), and you can use Gutenberg blocks, Kadence Blocks, or your page builder to build custom sections.
The bar has officially been raised thanks to Kadence.
What do you think of Kadence Element Hooks? Do you like them better or worse than hooks/elements in other themes? What do you wish they would add? Let me know in the comments below!
Also, I’d love it if you joined my completely free Start Blogging 101 Community Facebook Group where we discuss all things blogging. It’s brand new and something I’ve wanted to build for a long time. Come join and say hi!