
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.
Kadence 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 2022 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 Hooks for endless customization on your website.
Use the Kadence Hooked Elements guide below to jump around as you need.
Start Blogging 101 is reader-supported. If you purchase through a link on my site, I may earn a commission. Disclosure Policy
Kadence Element Hooks Video Tutorial
If you’re a visual learner, then check out my detailed video tutorial teaching you how to use Kadence Element Hooks for endless customization on your website:
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 Content Section, Fixed Section, Template, or HTML Editor.

Let’s first go over the Content Section option.
Content Section Kadence Element
Choosing Content Section 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”

If you want your affiliate disclosure to look even nicer, here are a number of predesigned templates we built in Start Blogging Blocks that you can easily import with 1-click:
[Your site] is supported by its readers. If you purchase through a link on my site, I may earn a commission. Learn more
[Your site] is supported by its readers. If you purchase through a link on my site, I may earn a commission. Learn more
[Your site] is supported by its readers. If you purchase through a link on my site, I may earn a commission. Learn more
[Your site] is supported by its readers. If you purchase through a link on my site, I may earn a commission. Learn more
If you want to use one of the above designs for your affiliate disclosure, sign up for the free version of Start Blogging Blocks.
You’ll get an email right away with your free license key where you can follow the three easy steps to hook into our cloud of design templates.
Once you’re hooked up to the Start Blogging Blocks cloud, all you have to do is import any of the designs you want (some are free and some are pro):

- Click on the Kadence Design Library button to open it
- Choose the “SB Blocks” tab which is our cloud of design templates
- Choose the “Alert” category on the left
- Choose whichever design you want to use for your affiliate disclosure and it will be instantly imported onto your page
- Lastly, just change the text within the design to whatever you want your affiliate disclosure to say
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 on to Step 3. But first, let me go quickly over the remaining three element types – Fixed Section, Template, and HTML Editor.
Fixed Section Kadence Element
If you choose the Fixed Section option for your element, you’ll see the same screen as choosing the Content Section option, except your Placement options within the Element Settings (covered in Step 3) will be different.
Fixed Section 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 (no space below footer)
- 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.
Template Kadence Element
The Template Kadence Element is a “theme builder” type of feature that allows you to build different templates for your pages.
This template element allows you to completely customize the way your blog and archive pages look.
There is way too much to cover for the template element in this tutorial, so that will be covered in a different article. However, I wanted to at least point out this element and explain what it’s used for.
HTML Editor Kadence Element
If you choose the HTML Editor 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:
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.
Another massive benefit of Kadence is that there are hooks to replace content as well. Notice that there are hooks in the general section for replace header, replace sidebar, replace footer, replace 404 page content, and replace login modal.
This opens up a whole new world of possibilities where you can create custom headers, sidebars, footers, and more all with Gutenberg blocks and then conditionally assign your custom section to whichever page you want.
This means you can have a completely different header, footer, or sidebar on whichever pages or posts that you want. This is HUGE!
Anyway, back to the main topic.
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:
If you want your element to show on your entire site, you can simply choose Entire Site. However, you can begin to see everything 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.
Plus, if you have WooCommerce or an LMS such as LearnDash installed on your site, you will see even more Show On options specific to those plugins such as products, courses, or lessons.
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 set up 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 we have a proper disclosure on all blog posts using 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
Now let’s choose which users will be able to see your newly created element.
The Configure User Settings section adds another layer of customization to build 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:
- Basic
- All Users
- Logged out Users
- Logged in Users
- Specific Role
- Administrator
- Editor
- Author
- Contributor
- Subscriber
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: If you don’t have any users selected, you will see [UNSET] show next to User Settings which means you need to choose an option before your element will work. After you choose an option, the [UNSET] label will disappear.
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 including any custom membership roles you create.
For example, you could use a WordPress membership plugin and create a Gold Membership, Platinum Membership, and a Diamond Membership and show various sections to each member.
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 those who purchased a membership. How cool is that?!
Time to move onto Step 6 – two more optional sections before we publish our Kadence element!
6. Configure Device Settings (optional)
This Configure Device Settings section will be quick, but it increases your element hook customization options even more.
Keep in mind that choosing Device Settings is completely optional.

If you want your element to show only on a certain device (desktop, tablet, or mobile), then you can choose that here.
**Note: If you don’t choose any device settings, you can see that the default is set to show on all devices which is why this section is optional.
For example, say you create an element and you only want it to show on mobile devices. You can choose mobile here. You can also choose multiple options. So, you could choose mobile and tablet if you want your Kadence element to show on every device except for desktop.
Now let’s go over Step 7 – our last section before we see our Kadence element live!
7. 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 theme comparison if you want to read more.
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 8.
8. 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, decided which users will see your element, and chosen optional device 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!
Join the Community
Join the completely free Start Blogging 101 Community on Skool and connect with an awesome community of rockstar individuals who are passionate about building fast, profitable WordPress sites to grow their businesses. Come say hi! 👋
Great tutorial! Thanks Jake 🙂
Thanks Jose! Glad you enjoyed it 🙂
Great tutorial Jake.
Would you mind to show me how to hook the blog page only in the first page?
Hi Sono! Glad you enjoyed the tutorial. Are you just looking to have your home page show all your blog posts? If so, all you have to do is go to your WordPress customizer > Homepage Settings > Then choose “Your latest posts” for what your homepage shows. Otherwise you can select “A static page” and choose whichever page you want to show up as your home page. Hope that helps!
Hi! great post. explained what i needed to know! One question, I am moving to Kadence from Astra. I have hooks on Astra that have all the placement options here but also you can say, on single posts ‘insert after 6 blocks’ or ‘insert after 3 x H2 headings’ so you have it mid content. You think kadence will add this? cheers
Hi Paul! Good choice on switching to Kadence from Astra 🙂 Join the club! Yes, I know that feature has been requested by several people before. I do think that Kadence will add this. That’s a feature that I would like to see as well. I can message the developer and see what he has to say. Hope you’re enjoying Kadence so far!
Thanks for this appreciate the time and learning more about Kadence, all nuggets and appreciate your time.
Have subscribed to you newsletter also #Staysafe
Hey Byron!
No problem at all – I’m always happy to help. And I appreciate you subscribing to the newsletter! A lot of good things to come 🙂
Jake
Hi Jake,
This is a great post, with lots of really useful information.
Just a small question.. I noticed that you can add an element hook to a category archive page. Does that mean that i can make a different section of unique rich content that could be added to each of my category pages to improve them for seo purposes?
Thanks in advance
Hey Mark,
Glad to hear the post was useful! Yes, you can choose “Category Archives” under “Show On” and then you’ll see a dropdown that says “Select Category Archive By:” and then choose “Individually” rather than “All” and then you’ll be able to choose any category of yours that you want to put the element on so you could put a different section of unique rich content on each category. It’s powerful stuff! Hope that helps.
Thanks for your help Jake.
I really appreciate the time you spend answering all the questions on your Facebook group and this blog 🙂
No problem at all, Mark! I’m always happy to help 🙂 I appreciate you reading my content and being in the group!
Hey Jake!
Is there away to use element hooks to implement custom schema per post?
Thanks!
-Garth
Hi Garth! I use Rank Math as my SEO plugin and that allows you to add custom schema per post. That would be my suggested method, but I don’t currently know of a way that Kadence hooks could be used with custom schema.
Very well written article, thank you for writing it
Happy to hear it 🙂 Thanks for reading!
What a wonderful tutorial – I understood most of it. I have been advised by an SEO guy that it would be good to have the disclosure not at the very top of the post. I’m new to Kadence, what would I choose to move it down a bit?
Hi Charlotte! Thank you for the kind words 🙂 Glad you found it helpful. If you don’t want the affiliate disclosure at the very top of the post, you would choose a different “Placement” in the Kadence Hooks settings. So, instead of the location “Before Entry Content” as shown in the tutorial, you could use one of the locations for “Inside the Content.” For example, there are options such as “before first heading tag” or you could choose “after first paragraph,” “after second paragraph,” “after third paragraph,” etc. and those would move the affiliate disclosure a little further down in your content without having it at the very top. Hope that helps!
Great tutorial overall! One thing missing (and I can’t quite find it anywhere else either, including Kadence itself…) is a more advanced tutorial on how to use the “Custom Hook” option provided.
When you choose that option, the interface suggests that all you need to do is add a new anchor (or is that a class?) But how & where would it actually hook to? If that anchor/class is then applied to a block – does it insert above the block, below, inside?
Hi Michael! Thanks for the comment and glad you liked the tutorial. As for Kadence custom hooks, that’s a good question. There hasn’t been a lot of documentation around what each of the custom hook locations are. If anything, I would reach out to Kadence support and they will happily provide more information. As for where the locations would be – I’m guessing the whole “above/below/inside” piece would be a part of the custom hook itself. It would be specified in the hook location. If I do find out more information on the custom hooks, I will certainly update the post to add more info around it.
You just saved me a ton of time. I had no idea that this is possible and was about to add table of contents to my blog posts manually. That would have taken forever. Thank you!
Aren’t Kadence hooks amazing?! 😉 You’re welcome – glad to hear it helped!
Hey Jake! Thanks for sharing!
Do you have any idea how to add close button for element?
I want to create element to ask user choose language.
Best!
Hi Alex! As of right now, you can’t add a “close” button to an element that I know of. However, if you have the Kadence Full Bundle which includes the Kadence Conversions plugin, Kadence Conversions allows slide-outs, banners, or popups that do have ‘close’ buttons that you could add and you could use those instead of an element.
Make sense. Thank you
Happy to help, Alex!
Hi Jake, I created a Subscribe button element like yours but I am unable to specify the X and Y distance from the edge on the bottom. There are no width and position options like in the kadence video. Am I doing something wrong?
Hey Darren! For that, you’ll need to create a “Fixed Section” element and then you’ll be able to choose “Auto” for your width on the fixed section and that will give you the ability to choose the X and Y coordinates away from the edge of the screen.
Hi Jake,
Love the blog as well as your YouTube channel.
Quick question: If I wanted to place an element after 6th paragraph or 4th heading (for example) how would I do that? Kadence has after 1 – 4 paragraphs and after 1st heading so I assume it could be done, but no idea how to do it. Any suggestions?
Hi Chris,
Right now, you can’t specify a certain number of paragraphs or headings. However, that is a feature request that many people have asked for and they should be adding it before too long. Essentially, you would choose an option such as “After x number of paragraphs” and then there would be an input value where you could plug in the number.
Hope that helps!
Jake