Hooked Elements in Kadence

Disclosure: This post may contain affiliate links – meaning I get a commission if you decide to make a purchase through my links, at no cost to you.

One of the features that Kadence Theme Pro adds to Kadence theme is called Hooked Elements which provides an interface to build an element using the WordPress Gutenberg editor and hook it to one of the several locations on your pages so it appears exactly where and when you want.

A sample use case of Kadence Elements is for displaying affiliate disclosure text above the entry content on selected posts like you see on this post.

Here’s a walkthrough on how this can be done:

Step 1

Install and activate the Kadence Theme Pro plugin. It is in stable beta at the time of writing this and is included in Kadence Membership.

Enter your license key and email at Appearance > Kadence if you have not already.

Enable Hooked Elements.

Step 2

Reload the page or click on Kadence in the left side admin and click on Elements.

Click Add New button.

Select DEFAULT as the element type.

Enter a title and the content for your element.

Click on Element Settings icon next to the gear icon near top right.

Configure the element’s behavior by selecting where it should appear.

In this example I have set the element to be added before entry content on all single posts that are tagged Kadence.

Publish your changes.

Here’s the result:

---

The screenshot below shows all the options in the Placement dropdown:

The screenshot below shows all the options in the Display Settings‘ Show On dropdown:

Note

1) We can also specify whether the element should

a) be shown to all users, or only logged in users or only logged out users or select users by a specific role.
b) expire at a specific date and time. This is great for showing seasonal banners.

2) “Code” type of Element only allows HTML, not PHP.

3) An element needs the corresponding display setting even if you are using its shortcode to output it in child theme’s template.