Gold Penguin Official Logo

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.
Updated September 10, 2023

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!

Blog Post tags above the article title in Breakdance Builder

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 monthly newsletter
where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
Written by Christy Cañete
Christy Cañete is a software engineer who's passionate about front-end web design. Not only can she code, but she writes too! She loves breaking down technical topics into super easy tutorials. If you're looking to learn without the jargon, she's your go-to.
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our free monthly newsletter where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
magnifiercross