Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Add Current Blog Post Category And Tag Meta Links In Divi

Nelson Miller Profile Orange
In this tutorial I will show you how to add the current blog post category and tag meta links in Divi using dynamic content.

▶️ Please watch the video above to get all the exciting details! 👆

1. Set Up The Divi Blog Post Category links

In my case, we have a Theme Builder template set up for our blog posts. The category meta links are part of the template, so they dynamically show based on which categories are selected in the backend of each WordPress post.

Add A Text Module

Believe it or not, showing category links requires a text module! I know that sounds weird, since they obviously look like buttons and are dynamic, so I’ll explain. You first start by adding a regular Text module to your layout.

Select Dynamic Content

In the Content tab in the Text toggle in the Body area, click the gray dynamic content icon.

click the dynamic content icon in the Divi text module to add blog post category links

Select Post Categories

A window will pop up with a list of all the dynamic content options available for blog posts. The two related to this tutorial are the Post Categories and Post Tags. These two are almost the same, so for this tutorial I’ll just use the Post Categories.

select Divi dynamic content post categories and post tages

Configure The Options

After selecting the “Post Categories” a new popup will appear with some additional options. In my blog post template, I have the word “Categories:” written in the Before input field. You are welcome to do something similar. I also clicked into the Categories Separators input field and pressed space bar to get rid of the vertical bar, but that’s totally up to you.

showing the dynamic content options in the Divi post categories

Select Category Type

The dropdown for Category Type will have different options based on the taxonomies available on your site. For our tutorial and on our site we are displaying the post categories, so just leave it on the default or if this is for projects, products, etc. then make your selection accordingly.

category type options in Divi dynamic content for post categories

View The Result

At this point, click the green checkmark buttons to save and exit the settings, and your output will look something like this.

output of the Divi blog post category links

2. Style The Divi Blog Post Category Links

If you are satisfied with the default link styling, that’s fine, and you can consider the tutorial over. But if you prefer to add more design styling to the links, keep in mind that this is a Text module – which means you can use the link design settings in the module to customize and style your link text! Simply head over to the Design tab and open the Text toggle, and click the link icon tab. Here you can adjust any of the normal text and font design settings, like color, add an underline, set hover colors, etc. 

using the text module design settings to style the Divi blog post category links

3. BONUS: Style The Divi Blog Post Category Links As Buttons

In our blog post template, you may have noticed the links are styled as buttons. This is pretty simple to do with CSS, so if you are interested in that, you can copy the code below and modify it for your own site.

Add A CSS Class

Start by adding a CSS class to the Text module. Open the module settings, go to the Advanced tab, and open the CSS ID & Classes toggle and paste the class “pa-post-category-links” into the CSS Class input field.

add css class to style the Divi blog post category links as buttons

Add The CSS Snippet

Next, copy the CSS snippet below and paste it into your site. This is the same code used on our site, so for a live preview, just scroll to the top of this post. 

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*style the categories on single blog posts*/

.pa-post-category-links {
	font-weight: bold!important;
}


/*style the categories on single blog posts*/

.pa-post-category-links a {
	background: #f0f3f6;
	padding: .5em 1em;
	border-radius: 50px;
	color: #00d263;
	font-size: .8em;
	transition: .3s ease all;
}


/*style the categories on hover on single blog posts*/

.pa-post-category-links a:hover {
	background: #00d263;
	color: #ffffff;
	transition: .3s ease all;
}

Customize The Code

You can customize any of the values, like background color, padding, border-radius, color, and font size.

Display Categories The New Way!

Show a beautiful grid of categories with images, descriptions, and full design settings with our unique Divi Taxonomy Helper plugin!

Divi Taxonomy Helper Plugin by Pee Aye Creative
Categories: Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

15 Comments

Comments By Others

  1. Fredrik

    Hi!

    Is there a method to achieve this by showcasing categories within a particular parent category? For instance, if a post is categorized under two parent categories (Parent Category X and Parent Category Y), can I set it up to exclusively display categories from Parent Category X?

    Regards,
    Fredrik

    Reply
    • Hemant Gaba

      Hi Fredrik!

      I’m afraid the customization is out of the scope of the guide. Please contact the Elegant themes support for it.

      Reply
  2. Justin

    Hey Nelson!

    I really appreciate all of your content! One issue I’m running into is with the post tags not line breaking properly. I used your code, and adjusted it for tags, but with longer tags, the line breaks off and displays on two different lines. Is there an easy way to line break tags or get around this?

    Reply
    • Hemant Gaba

      Hi Justin!

      The best way is to reduce the font size.

      Reply
  3. bjkd

    I am not seeing those options come up for posts… only pages. What am I doing wrong?

    Reply
    • Simon

      Me too. I am not seeing those options come up for posts… only pages.

      Reply
      • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

        It would be the opposite, tags and categories are only for posts, not pages. So I am very confused by your comments, but please reach out to Elegant Themes about it as we have no control over Divi.

    • Hemant Gaba

      Hi there!

      The option should be available in theme builder for posts as well. Can you please check in safe mode first? If the issue persists, then let me know to what the template is assigned to?

      Reply
    • Hemant Gaba

      Hi Courtney!

      Please note that the Blog page contains all the posts of the site and not assigned to any specific category so cannot be added dynamically. However, if you want to display the post categories at the top of Blog page, then you can add them manually with Text module. The link of the category pages needs to be manually added in them as well.

      Let me know how it goes!

      Reply
  4. Paul

    Another Hot tip. Thanks! Another piece of hidden magic buried away in the theme builder.

    Reply
      • Hemant Gaba

        Hi Ian!

        It is not possible by default all the categories assigned to that post will be displayed. We need to hide the other categories using the custom CSS. You can try adding the code for hiding the categories not needed:

        .pa-post-category-links a[href=’https://example.com/tutorials/category/nature/’]{
        display: none;
        }

        The link of the category should be added in the above code. Let me know how it goes!

      • Ian

        Is there a way to just display x category, like the parent or the parent of the parent x times, so you don’t display 6 link,

        Thanks for the tip

      • Ian

        Is there a way to just display x selected category, like the parent for dynamic layout, and not show 6

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart