How To Add Current Blog Post Category And Tag Meta Links In Divi Tutorial by Pee Aye Creative

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

In this tutorial I will show you how to add the current blog post category and tag meta links in Divi using dynamic content.
Categories: Divi Blog Tutorials

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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 1.0 1

Last updated Jan 10, 2023 @ 12:19 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 Comments

  1. Paul

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

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart