Create Custom Tag & Category Buttons for Blogs in Breakdance
Boost your blog’s organization and searchability with custom block tags. This tutorial will guide you through creating custom tags and categories to apply on your blog posts using Breakdance Builder.

Christy Cañete
Updated August 8, 2023

Buttons for Categories and Tags in Breakdance Builder
Reading Time: 4 minutes
Tags and categories help you organize your blog posts. They also help your readers find the content they’re interested in with ease. Having pretty tags at the top of your articles make your website look better & keep your post organization pretty clean.
Adding custom tags and categories in Breakdance is relatively straightforward. In this tutorial, I’ll guide you on how to add them in just a few minutes!


How to Create Custom Tag and Category Buttons In Breakdance
Step 1: Install the Code Snippet Plugin
Code Snippets is a popular WordPress plugin used to deploy small bits of custom code into your site. In this tutorial, we’ll be using this plugin to add a global PHP code.

First, open your WordPress dashboard and go to Plugins > Add New. Then search for ‘Code Snippet Plugin.’ Click ‘Install Now,’ then ‘Activate.’
Step 2: Add a PHP Code
Once you’ve installed the Code Snippet plugin, you should see a ‘Snippet’ option on the left side of your dashboard. Go ahead and click Snippet > Add New.
Add a name to your snippet. In this example, let’s name it ‘Custom Post Tags.’

Here, we’ll need to ‘inject’ our custom PHP codes. Make sure that you’re on the ‘Functions PHP’ tab before adding a code.
Go ahead and copy the PHP code below into your new snippet:
<?php function gpbd_tag_wrap_shortcode( $atts ) { global $post; $tags = get_the_tags( $post->ID ); if ( !empty( $tags ) ) { $output = '<div class="post-tags">'; foreach ( $tags as $tag ) { $output .= '<a href="' . esc_url( get_tag_link( $tag->term_id ) ) . '">#' . esc_html( $tag->name ) . '</a> '; } $output = rtrim( $output, ' ' ); // Remove the last comma $output .= '</div>'; return $output; } } add_shortcode( 'tagwrap', 'gpbd_tag_wrap_shortcode' ); // Usage:// Add CSS styles to the header function gpbd_tag_wrap_styles() { ?> <style> .post-tags { display: block; margin: 10px 0; font-size: 16px; } .post-tags a { display: inline-block; padding: 3px 6px; margin-right: 4px; background-color: #f2f2f2; color: #333; text-decoration: none; border-radius: 5px; } .post-tags a:hover { background-color: #333; color: #fff; } </style> <?php } add_action( 'wp_head', 'gpbd_tag_wrap_styles' ); // Add CSS to the header of the website ?>
Below the code editor, choose ‘Run snippet everywhere.’ This option simply means we want our custom code available on every part of our site.

Once everything is set, click ‘Save Changes and Activate.’
Step 3: Add Code Snippet As Shortcode
Let’s now add our custom post tags in our blog post.
Go to Breakdance > Templates. Choose ‘Single Post’ to edit in Breakdance.

On your Breakdance editor, add a ‘Shortcode’ block.
You can place the element anywhere you want your custom tags to appear. Let’s just say we want to display our post tags above the post title.

Then, add your code snippet to your shortcode block.
Notice this line of code that you’ve pasted on your new snippet. Here, we named our shortcode as ‘tagwrap.’:
add_shortcode( 'tagwrap', 'gpbd_tag_wrap_shortcode' ); // Usage:
Copy this word and paste it on your shortblock code, as shown below.

Click save. You should now see your custom tags appear above your blog title.

Locations for WordPress Category & Tag Blocks
Add Custom Tags On Top of the Blog Title
Want to highlight some keywords before readers dive into your article? Then I recommend adding custom tags above your post title just like what we did above. By doing so, you’re grabbing your visitor’s attention immediately.

Add Custom Tags Below A Comments Widget
Another way to engage with your readers is to add custom tags below the comments section. You can use strong keywords to encourage them to read other related contents they might be interested in.

That’s a wrap…
Now that you know how to add custom tags, it’s time to level up!
Breakdance has tons of other features to help you build a beautiful website. For instance, you can try adding dynamic data to make your posts interactive.
So, keep experimenting and keep tweaking to make your website the best it can be!
Got questions or thoughts? Leave them in the comments below.
Want to Learn Even More?
If you enjoyed this article, subscribe to our free newsletter where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.