Skip to content
Help Center
  • Pricing
  • ProductsExpand
    • Premium BundlesGet all the tools you need in one bundle
    • Kadence ThemeLightning-fast performance theme for modern websites
    • Kadence BlocksDrop in ready designs with advanced controls for pixel perfect websites
    • Kadence Shop KitCreate a more effective WooCommerce shopping experience
    • Kadence ConversionsBoost sales and build engaged audiences with popups and banners
    • Kadence InsightsEasily create A/B tests. Optimize your pages to drive higher conversions.
    • View All Products
  • AI Starter Templates
  • Blog
  • SupportExpand
    • Help CenterProduct Questions? Not sure how to do something? Start here
    • Support TicketsNeed help? We love to help our customers
    • About usCrafted with love in Missoula, Montana
    • Contact usPre Sale Questions? Need help purchasing?
Account Account
Get Kadence
Kadence Theme
  • Features
  • Pro
  • Starter Templates
  • HelpExpand
    • Documentation
    • Facebook Group
    • Submit a Ticket
    • Feature Requests
    • Roadmap
    • Changelog
Help Center
Kadence Theme

Kadence Theme

  • Create a Full Screen Landing Page

Getting Started

  • Theme Installation
  • Getting Started with a Classic Starter Template

Customize Settings

  • How to customize the Kadence Footer
  • Responsive Breakpoints in Kadence
  • How to Import, Export, and Reset Kadence Theme Customizer Settings Using Starter Templates Plugin
  • How to use the Kadence Theme Color Palette
  • Typography and setting font sizes for different devices
  • How to setup Page/Post settings
  • How to Add a Sidebar
  • Sticky Sidebars
  • How to style Buttons
  • How to add Scroll To Top

Header

  • How to Customize the Kadence Header
  • Customizing the Mobile Navigation Area
  • How to Use a Transparent Header
  • Customizing the Topbar
  • Navigation Colors (Transparent Header, Sticky Header)
  • Edit Dropdown Menu Styling
  • Working with the Sticky Header
  • Social Media Icons in the Header
  • Editing a Row in the Header

General WordPress

  • Set Site Favicon
  • How do I add Custom CSS
  • Adding Google Analytics
  • How to backup my site?
  • How to add a Custom Post Type
  • Fix: Page Not Updating
  • How to Find the Page or Post ID
  • How to prevent spam comments
  • How do I turn off comments?
  • How to Remove All Spam Comments

Troubleshooting

  • Troubleshooting the “Update Failed: Service Unavailable” error when updating Pro Kadence WP plugins
  • How to Enable the WordPress Error Logs
  • WordPress Error “Incompatible Archive”
  • Temporarily deactivating plugins
  • How to View Console Log Errors
  • Clearing Your Website Cache
  • How to preview the mobile version of your site on Desktop
  • Getting 500 error
  • Broken Styles after version 1.1.15

Advanced

  • Common Code Snippets for Kadence Users
  • How to translate using LocoTranslate
  • How to hook elements inside of post or page content
  • What Is a Child Theme, Should I install one, if so How?
  • How to add a custom filter or function with Code Snippets
  • Adding Custom Fonts to Kadence
  • How to make a custom 404 page
  • How to change a theme icon to something custom
  • Change any text on your site
  • Changing Various Heading HTML Tags
  • Adding Google Tag Manager with a child theme or code snippet plugin
  • Replace Author HTML (Multiple Author Support)
  • Theme hooks

Pro Addon

  • Kadence Maintenance Mode
  • WooCommerce Addons
  • How to Display Custom Post Types with Kadence Elements Templates and the Post/Grid Carousel
  • How to use conditional header
  • Theme hooks
  • Kadence Theme Pro Plugin
  • Header Addons
  • How to create a Mega (multicolumn menu)
  • How to add contact information
  • How to add a toggle open menu for desktop
  • How to use the Color Palette Switch (Dark Mode)
  • How to add a login and account Menu
  • Kadence Custom Fonts
  • How to add scripts in header/footer
  • How to open the side cart when a product is added to cart
  • How to use Element Hooks

Kadence Elements

  • What is Kadence Elements?
  • Installing Kadence Elements
  • The Four Types of Kadence Elements
  • Switching between different Kadence Elements Types
  • Showing/Hiding Kadence Elements Settings
  • How to Create a Kadence Elements Content Section
  • Creating a Template Element
  • What goes into an element?
  • How to Replace the Footer Using a Kadence Element
  • How to Use an Element to Replace the Archive Loop Item Content
  • How to Design a Post Grid/Carousel using a Kadence Element

Woocommerce

  • How to Add Image Switch on Hover for Product Archives
  • How to Add a Mini Cart to the Site Header
  • How to Change the WooCommerce Product Loop Title Tags
  • Home
  • Knowledge Base
  • Kadence Theme
  • Kadence Theme
  • Advanced

How to hook elements inside of post or page content

Hooked Elements (or Element Hooks) which provides an interface to build an element using the WordPress Gutenberg editor (or custom code) and hook it to one of the several locations on your site’s pages so it appears exactly where and when you want.

In short, element hooks allow you to add content in different areas of a page, with unlimited customization options.

Just one amazing thing they allow you to do is restrict content to certain posts, pages and even users. There are entire plugins devoted to that purpose and here is a Kadence hooked element ready to do it all, humbly waiting in the background. When you get right down to it, hooked elements have overwhelming potential. Naturally, that does mean they are a pro add-on.

Enable Hooked Elements

To get started, let’s walk through how to enable Hooked Elements. As mentioned before, this is a Kadence Pro Addon so make sure you have installed and activated Kadence Pro in order to enable this feature. It is included in Kadence Membership and can also be purchased individually.

Once you have installed and activated Kadence Pro, enter your license key and email at Appearance > Kadence.

Once you are an official Pro user, you will notice all the Pro Addons have been unlocked and are available to enable and begin using. Enable “Hooked Elements.”

Once “Hooked Elements” is enabled, refresh your page. Now you should be able to see an additional submenu item under “Kadence” titled “Elements.”

Click on “Elements” and you will see a table with all the elements you create. This table will be empty until you create one.

Now onto the fun part.

Creating an Element

Click Add New to add a new element. Pretty simple so far, right?

Adding a new element in Kadence

Now you should see 4 options that intimidate you and tempt you to forget hooked elements ever existed. But wait!! I’m here to explain everything! We ‘re going to take this one step at a time.

Here is an explanation of the 4 element types and scenarios for when you might choose one over the other.

  • Content Section
  • Fixed Section
  • Template
  • HTML Editor

1. Content Section

This is element type I go with most often. It is exactly what it sounds like, a section of content. Working with this type is no different than building sections of a post or page.

Potential Use Cases:
  • Secondary header
  • Sale Banner

2. Fixed Section

Fixed in this case just means the section will be visible at all times. You may think of this as a “sticky” section. Where ever you configure the placement of this element type, you will always see it there regardless of where you scroll to on a post or page.

Potential Use Cases:
  • Ad Banner
  • Subscribe form

3. Template

Template allows control over the layout of a custom post type without using code. It is also the choice you will likely want to use if you are using any dynamic content in the element.

Potential Use Cases:
  • When displaying custom post types
  • Instances using dynamic content or advanced custom fields

4. HTML Editor

The HTML Editor element type allows you to write your own HTML and CSS. This might be a good option if you don’t want to use any 3rd-party css or blocks. You could also have something custom you want implemented that blocks can’t accomplish.

Potential Use Cases:
  • Custom code
  • Custom CSS class
  • SVG

Element Settings

Once you have created your new element, the full potential can be realized. Now you have the mighty power to decide, where this can be seen (not only posts and pages but exactly where on the page or post you want it displayed- ie. header, footer, etc), who can see it, and how long it can be seen for.

Let’s take a beat and really let that power set in. Okay, that’s enough, moving on.

In the screenshot above I have chosen to use the Content Section element type. This is just a row block with a background, advanced text, advanced buttons and a bottom row with a search bar, nothing too crazy.

Make sure you have the Element Settings selected by clicking on Element Settings icon next to the gear icon near top right. Now you should see all the display and visibility settings.

For this element I have set the Placement to After Header – so directly below the logo, navigation and all that jazz. However, I don’t want it to appear on all that pages, so I have Display Settings to only show on the Product Archive page. If I wanted to add a rule to show on an additional page, I have that option, but for now, I’m good with just the one page. I also have the option to say show on All Pages and then Exclude the posts or pages I don’t want to show the element on.

Next, you see where you can set which users are allowed to see it. Here I have it set to All Users, but you might have a scenario where you only want users who are Logged In, or users with a specific role like Subscriber. The possibilities are endless people. And if that wasn’t enough, you also have the option to choose what type of devices it can display on. Have a vendetta against tablets? We’ve all been there! Now you have the option to shun all tablets from seeing your amazing element.

Finally, we have the Expire Settings. By default it is disabled, but when enabled you will see all the date and time options.

Expires Settings section enables you to specify whether the element should automatically be removed (not shown) at a specified date and time.

This setting comes in especially handy if say you have a sale or promotion going on and want to set the expiration for an ad banner or something of that nature.

Once the element is configured, publish it to see it in action.

How to translate using LocoTranslateWhat Is a Child Theme, Should I install one, if so How?
  • Pricing
  • Products
    • Premium BundlesGet all the tools you need in one bundle
    • Kadence ThemeLightning-fast performance theme for modern websites
    • Kadence BlocksDrop in ready designs with advanced controls for pixel perfect websites
    • Kadence Shop KitCreate a more effective WooCommerce shopping experience
    • Kadence ConversionsBoost sales and build engaged audiences with popups and banners
    • Kadence InsightsEasily create A/B tests. Optimize your pages to drive higher conversions.
    • View All Products
  • AI Starter Templates
  • Blog
  • Support
    • Help CenterProduct Questions? Not sure how to do something? Start here
    • Support TicketsNeed help? We love to help our customers
    • About usCrafted with love in Missoula, Montana
    • Contact usPre Sale Questions? Need help purchasing?
Account Login
  • Features
  • Pro
  • Starter Templates
  • HelpExpand
    • Documentation
    • Facebook Group
    • Submit a Ticket
    • Feature Requests
    • Roadmap
    • Changelog