Single category posts name clickable

Hi,

Thanks for the great theme!

Would it be possible to make the category names at the top of the Single category posts widget clickable? So that you can click on the category name and be redirected to all posts of that category.

Thanks!

Hello there,

It isn’t supported yet and should be implemented in the future update. However, you’ll still be able to accomplish it by doing the below steps:

  1. Add the below function to your child theme’s functions.php file. If you don’t run a child theme yet, you can use a functionality plugin like Code Snippets.

add_action( 'wp_enqueue_scripts', 'greatmag_child_script', 9999 );
function greatmag_child_script() {

  $post_cats = array();

  $categories_obj = get_terms('category');
  foreach ($categories_obj as $cat) {

    $post_cats[$cat->name] = get_term_link($cat->term_id);

  }

  wp_localize_script( 'greatmag-scripts', 'categories', $post_cats );

}

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

  if( $('.athemes_single_category_posts_a').length ) {

    $('.athemes_single_category_posts_a').each(function(){
        var catTitle = $(this).find('.post-cat span.ispan');
        var catTitleLabel = catTitle.text();
        catTitle.wrapInner('<a href="#" data-cat-name="'+catTitleLabel+'"></a>');
    });

    $.each(categories, function(key,value){

        var catName = key;
        var catURL  = value;

        $('.athemes_single_category_posts_a').each(function(){
          var catLink = $(this).find('.post-cat span.ispan a');
          if( catName == catLink.attr('data-cat-name') ) {
            catLink.attr('href', catURL);
          }
        });

    });

  }

})(jQuery)

  1. Update

Clear all caches if applied, otherwise the code additions wouldn’t take affect.

Regards,
Kharis

Thank you Karis.

I tried it and I also cleared caches, but I noticed the URL links of the category names don’t work, it seems you can click on them, but if you do it just goes to the top of the (home)page. Also the colours of the names changed?

Could you provide any suggestions?

Hello there,

Please share your site URL here, so I can have a look.

Regards,
Kharis

Hi,

Would be great if you could have a look.

Kind regards,

Roselinde

Hello there,

It only happened when special character like & found in category title. As the PHP code I wrote encode it to &amp ;, that’s why the link doesn’t match. Sorry for suggesting incorrect code. Please try to replace this line of code (at the first step above):


$post_cats[$cat->name] = get_term_link($cat->term_id);

to:


$cat_name = wp_specialchars_decode($cat->name);
$post_cats[$cat_name] = get_term_link($cat->term_id);

Regards,
Kharis

Thank you, the links work now!
I noticed that the colors of the category titles changed too, would it be possible to change them back to the old colors (like in the menu at the top)?

Hello there,

Please add this extra custom CSS code to Appearance > Customize > Additional CSS from dashboard.


.athemes_single_category_posts_a .post-cat span.ispan a {
  color: inherit;
}

Regards,
Kharis

Thank you so much, it works perfectly!!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi @kharisblank
is it possible to do the same with the ‘Multiple category post’ widgets?
I have followed your instructions but maybe this works for ‘Single category post’ only.

Thank you!

Hi @kharisblank @roman, is it possible to do the same with the ‘Multiple category post’ widgets?
I have followed your instructions but maybe this works for ‘Single category post’ only.
I wrote 4 days ago but maybe you have been busy.
It is quite urgent.
Thank you very much.

Hello there,

I am sorry for the long delay. Please try doing the below steps:

  1. Add the greatmag_child_script() function as mentioned in this thread to your child theme’s functions.php or use Code Snippets.
  2. Install and activate the TC Custom JavaScript plugin
  3. Go To Appearance > Custom JavaScript
  4. Paste the following code into the provided box
    ;(function($) {

     if( $('.widget_athemes-multiple-cats-posts').length ) {

       $('.widget_athemes-multiple-cats-posts .col-md-4').each(function(){
           var catTitle = $(this).find('.post-cat span.ispan');
           var catTitleLabel = catTitle.text();
           catTitle.wrapInner('<a href="#" data-cat-name="'+catTitleLabel+'"></a>');
       });

       $.each(categories, function(key,value){

           var catName = key;
           var catURL  = value;

           $('.widget_athemes-multiple-cats-posts .col-md-4').each(function(){
             var catLink = $(this).find('.post-cat span.ispan a');
             if( catName == catLink.attr('data-cat-name') ) {
               catLink.attr('href', catURL);
             }
           });

       });

     }

    })(jQuery)
  1. Update

Regards,
Kharis

Hi @kharisblank
thank you so much. It works but unfortunately the color categories are lost. Now the category titles are all blue? :frowning:

Try replacing this code block:

    $('.widget_athemes-multiple-cats-posts .col-md-4').each(function(){
        var catTitle = $(this).find('.post-cat span.ispan');
        var catTitleLabel = catTitle.text();
        catTitle.wrapInner('<a href="#" data-cat-name="'+catTitleLabel+'"></a>');
    }); 

with:

    $('.widget_athemes-multiple-cats-posts .col-md-4').each(function(){
       var catTitle = $(this).find('.post-cat span.ispan');
       var catTitleLabel = catTitle.text();
       var style = catTitle.attr('style');
       catTitle.wrapInner('<a href="#" data-cat-name="'+catTitleLabel+'" style=" ' + style + ' "></a>');
    }); 

Then add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .widget_athemes-multiple-cats-posts .col-md-4 span.ispan a:hover {
      color: #f8c200 !important;
    } 

Regards,
Kharis