• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Display List of Tags

This tutorial provides 5 different code examples which enable you to display a list of tags anywhere in your theme.

tags

In the 1st example, the code displays the list using the loop start hook and includes the count.

add_action( 'loop_start', 'list_tags_with_count' );
function list_tags_with_count() {
$tags = get_tags( array('orderby' => 'count', 'order' => 'DESC') );
foreach ( (array) $tags as $tag ) {
echo '<li><a href="' . get_tag_link ($tag->term_id) . '" rel="tag">' . $tag->name . ' (' . $tag->count . ') </a></li>';
    }
}

The 2nd example removes the tag count:

add_action( 'loop_start', 'list_tags_no_count' );
function list_tags_no_count() {
$tags = get_tags( array('orderby' => 'count', 'order' => 'DESC') );
foreach ( (array) $tags as $tag ) {
echo '<li><a href="' . get_tag_link ($tag->term_id) . '" rel="tag">' . $tag->name . '</a></li>';
    }
}

The 3rd example adds a custom class to each listed tag:

add_action( 'loop_start', 'list_tags_with_class' );
function list_tags_with_class() {
$tags = get_tags();
$html = '

<ul class="post_tags">';
foreach ( $tags as $tag ) {
    $tag_link = get_tag_link( $tag->term_id );
            
    $html .= "<li><a href='{$tag_link}' title='{$tag->name} Tag' class='{$tag->slug}'>";
    $html .= "{$tag->name}</a></li>";
    }
$html .= '</ul>

';
echo $html;
}

The 4th example works on single posts and displays tags for each post in a list.

add_action('loop_start','list_single_post_tags');
function list_single_post_tags() {
if ( is_singular('post')) {
    echo get_the_tag_list('

<ul><li>','</li><li>','</li></ul>

');
    }
}

See get_the_tag_list for more information.

Custom Tag List Widget

This code enables you to create your own tag list widget similar to the native tag cloud widget included in WordPress.

custom-tag-widget

You’ll need to load the file from your functions file and register the widget using the following code.

In this example, we’ll load the file from a child theme using get_stylesheet_directory()

require_once( get_stylesheet_directory() . '/class-wp-widget-tag-list.php' );

function register_tag_lists_widget() {
    register_widget( 'WP_Widget_Tag_List' );
}
add_action( 'widgets_init', 'register_tag_lists_widget' );

And then create a file named class-wp-widget-tag-list.php in your child themes root directory using the following code.

Related Tutorials

  • Tag Cloud By Current Category

Taxonomy Terms

Reader Interactions

Comments

  1. Tim Burkart says

    December 29, 2022 at 7:31 pm

    Hi Brad,

    I tried unsuccessfully to pay with Paypal and then Google pay but neither worked.

    I’ll try again with a credit card.

    Log in to Reply
    • Brad Dalton says

      December 30, 2022 at 4:48 am

      Hi Tim. Did you get a error message? I would like to know what happened when you tried to use PayPal. Thanks.

      Log in to Reply
  2. Tim Burkart says

    December 29, 2022 at 3:16 am

    How can I customize this to display a tag cloud for a specific category; or by the current category on a category archives page?

    Log in to Reply
    • Brad Dalton says

      December 29, 2022 at 6:15 am

      Hi Tim. That would require some work to complete and is not a simple modification. If you’d like to go ahead, you can book a 1 hour consultation and i will complete the work for you. https://wpsites.net/product/hourly-consulting/

      Log in to Reply
      • Tim Burkart says

        December 30, 2022 at 3:27 am

        Hi Brad,

        I just purchased a 1 hour consultation. Please proceed with the work for this customization.

        Thank you!

        Log in to Reply
        • Brad Dalton says

          December 30, 2022 at 6:02 am

          Here you go Tim https://wpsites.net/?p=111322

          Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Recent Posts

  • Style First Nav Menu Item Using CSS
  • Genesis One Page Block Theme
  • Reposition Image Before Title When Mobile Responsive
  • Post Tags By Current Category
  • Custom Button Link Per Product in WooCommerce

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.