Site logo

[Resolved] Make tag cloud to only show tags used on post/pages

Home Forums Support [Resolved] Make tag cloud to only show tags used on post/pages

Home Forums Support Make tag cloud to only show tags used on post/pages

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2513335
    finanzbeben

    Hi there.

    First of all, I use a code snippet to enable tags not only for posts but also for pages.

    // add tag support to pages
    function tags_support_all() {
    register_taxonomy_for_object_type('post_tag', 'page');
    }
    
    // ensure all tags are included in queries
    function tags_support_query($wp_query) {
    if ($wp_query->get('tag')) $wp_query->set('post_type', 'any');
    }
    
    // tag hooks
    add_action('init', 'tags_support_all');
    add_action('pre_get_posts', 'tags_support_query');

    Having achieved this, I want to use the standard tag cloud widget to present tags used on the respective page/post only. So I don’t want to see all tags for the whole website. Further, I want the tags to be shown in descending order by frequency.

    I was not able to find any code so far helping me.

    Do you have any idea how to manipulate the standard tag cloud to achiev this? Or any other workaround?

    Kind regards

    #2513579
    Fernando
    Customer Support

    Hello there,

    Instead of using a Tag Cloud Block, I would recommend using a Block Element – Hook and adding a Headline Block. Through a Headline Block, you can retrieve Tags for specific posts with such settings: https://share.getcloudapp.com/xQuOkxAm

    Can you try this?

    #2513789
    finanzbeben

    Helle Fernando,

    Thanks a lot. I have slightly adjusted your approach: I am using a button to show the list of terms.
    However, is there any possibility to sort the dynamic text type (list of terms) in descending order by frequency?

    Kind regards

    #2513961
    David
    Staff
    Customer Support

    Hi there,

    its not possible with the block dynamic data at this time.
    And the core Tag Cloud Block, has no filters either:

    https://github.com/WordPress/gutenberg/issues/33990

    unlike the old widget you can’t change its behaviour.

    Instead you can create your own tag cloud shortcode by adding this PHP Snippet:

    function tag_cloud_shortcode() {
        if( has_tag() && is_singular() ) {
            global $post;
            $post_tags = get_the_terms($post->ID,'post_tag');
    
            if ($post_tags) {
                foreach($post_tags as $tag) {
                    $all_tags[] = $tag->term_id;
                }
            }
            $tags_arr = array_unique($all_tags);
            $tags_str = implode(",", $tags_arr);
    
            $args = array(
            'echo'      => false,
            'smallest'  => 10,
            'largest'   => 20,
            'unit'      => 'px',
            'number'    => 0,
            'format'    => 'flat',
            'order'     => 'count',
            'include'   => $tags_str
            );
            wp_reset_postdata();
            return wp_tag_cloud($args);
    
        }
    }
    add_shortcode( 'tagscloud', 'tag_cloud_shortcode' );

    Then you can use the shortcode: [tagscloud]

    #2513971
    finanzbeben

    Hi David, Thanks for this workaround option. It works only for posts, not for pages. Do you know how to tweak your snippet to also address pages? Otherwise, I think I will simply stick to the button option for the time being. Kind regards

    #2514037
    David
    Staff
    Customer Support

    Ah, i edited the code above to make it apply to any post type.

    #2514052
    finanzbeben

    Now, it works pretty decent. Thank you.

    In terms of styling, do you know if it is also possible to shift from the “standard” to “outline” output in this custom tag cloud? The outline output looks like buttons whereas the standard shows the tags in different sizes depending on the frequency.

    #2514140
    David
    Staff
    Customer Support

    Ok
    in the code above you will see these two args:

    'smallest'  => 10,
    'largest'   => 20,

    Those set the font size range, if you set them both to the same value eg. 14 then all tags will be the same size of 14px/

    Then add some CSS to style like a button:

    .tag-cloud-link {
        border: 1px solid;
        border-radius: 50px;
        padding: 6px;
        background-color: #f00;
        color: #fff;
    }
    #2514300
    finanzbeben

    Thank you so much!

    #2515337
    David
    Staff
    Customer Support

    You’re welcome

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.