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.
Use the Kadence Hooked Elements guide below to jump around as you need.
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 Default, Fixed, 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 (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.
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:
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 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.
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 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
Now let’s choose which users will be able to see your newly created element.
The Configure User Settings section 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: 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 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 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 WordPress Without Page Builders by StartBlogging101 Facebook Group and connect with an awesome community of rockstar individuals who are passionate about building fast, beautiful WordPress sites to grow their businesses. Come say hi! 👋