How to display all WordPress tags?

That is registered in the functions.php file. In this guide, we will show you how to add code to display all tags and style them.

1. Adding a Function to functions.php

Create a new function in your theme’s functions.php file. This code will collect all available tags from the database and form an HTML list with links to these tag pages:

PHP

function show_all_tags_shortcode() {
    $tags = get_terms(array(
        'taxonomy'   => 'post_tag',
        'hide_empty' => false,
    ));

    if (empty($tags)) return 'No tags';

    $output = '<ul class="all-tags-list">';
    foreach ($tags as $tag) {
        $output .= '<li><a href="' . get_term_link($tag) . '">' . esc_html($tag->name) . '</a></li>';
    }
    $output .= '</ul>';
    return $output;
}
add_shortcode('all_tags', 'show_all_tags_shortcode');

This code creates a shortcode [all_tags] that you can use anywhere on your site (in posts, pages, or widgets).

2. Using the Shortcode

To display the list of all tags, simply insert the following shortcode in the desired location:

[all_tags]

After saving, you will see a list of all tags formatted as an HTML list.

3. Styling

To make the tags look attractive, add the following CSS styles to your theme’s style.css file:

CSS

.all-tags-list {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.all-tags-list li {
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #FFFFFF29;
}

.all-tags-list li a {
    text-decoration: none;
    color: #fff;
    font-weight: 400;
    font-size: 16px;
    transition: color 0.3s ease;
}

.all-tags-list li:hover {
    background: #fff;
    border: 1px solid #000;
}

.all-tags-list li:hover a {
    color: #000;
}

4. How it Works

  • The get_terms() function retrieves all tags from the database. We specify the parameter 'hide_empty' => false to show even those tags that are not associated with any posts.
  • The [all_tags] shortcode makes it easy to insert the tag list anywhere on your site without additional plugins.
  • The CSS styles make the tag output more attractive and user-friendly.

5. Conclusion

Now you know how to display all WordPress tags via functions.php and format them as a stylish list. This method is ideal for creating a tag cloud or a page with a list of all labels on your site.

How to create a website for a personal blog on WordPress/Elementor?

Introductory lesson on CSS in combination with Elementor

Text underline on hover