Adding a Tags Heading to Kadence Posts with a Hook

If you’re using the Kadence theme in WordPress and want to add a “Tags” label inline with the post tags after the content of a single post, you can achieve this by leveraging the kadence_single_after_entry_content hook. This hook allows you to insert custom content or functionality after the main entry content in a post.

This will work for the free and pro version of Kadence theme!

Why Use a Hook?

Hooks in WordPress provide an efficient way to modify or extend functionality without altering core theme files. The kadence_single_after_entry_content hook is specifically designed to execute custom code after the main post content, making it an ideal choice for adding elements such as additional metadata or related posts.

Implementing the Inline Tags Label

To add the word “Tags:” inline with the post tags, insert the following code into your theme’s functions.php file or a custom snippet plugin ( I use Fluentsnippets):

function add_inline_tags_with_post_tags() {
    if (has_tag()) {
        echo '<div class="post-tags"><strong>Tags:</strong> ';
        the_tags('', ' &#8226; ', '');
        echo '</div>';
    }
}
add_action('kadence_single_after_entry_content', 'add_inline_tags_with_post_tags');

Explanation of the Code

• The function add_inline_tags_with_post_tags() checks if the post has tags.
• If tags exist, it outputs “Tags:” in bold followed by the actual post tags, separated by ● (a bullet point), all within a div container.
• The add_action() function hooks this custom function into kadence_single_after_entry_content, ensuring the tags appear after the post content.

Styling the Inline Tags

To ensure the “Tags:” label is inline with the post tags and styled neatly, add the following CSS to your theme’s stylesheet:

.post-tags {
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.post-tags strong {
    font-weight: bold;
}

.post-tags a {
    background-color: #f5f5f5;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s;
}

.post-tags a:hover {
    background-color: #ddd;
}

This CSS ensures that the “Tags:” label remains inline with the post tags and styles them for better readability and user experience.

Please Read First:

Make sure you go into the customizer and into the post layout and disable the default tags near the bottom. If you do not do this you will see two sets of tags.

Conclusion

Using WordPress hooks like kadence_single_after_entry_content allows for seamless customization without modifying core theme files. By implementing this approach, you can display the word “Tags:” inline with the post tags, separated by bullet points, ensuring a clean and structured presentation in your Kadence-powered website.

Notes:

“These scripts, CSS styles, and plugins are designed to work best with minimal interference from themes or other plugins. If conflicts arise, adjustments may be needed.
Please note that they must be used as is.”

Let me know if you’d like any further refinements!

Wp Scriptly