CSS – Button Class for Category Listings?

You can customize your CSS in any way you desire..the best approach is to use a Child Theme…

To discover the classes or id’s associated with this content, use a web inspection tool such as FireBug, Chrome Inspect Element, or IE’s (IE8 or higher) Web Developer Tools…(there are others)

Once one knows which CSS is in use, add new rules to the Child Theme CSS…these override WP or theme CSS.

Thanks for the quick reply!

I use Firebug as far as my limited coding capabilities allow. I know how to use class=”button” on a page, to make a text link into a button. What I don’t know is how to assign that code to the categories text links in the Categories widget.

Can you provide a live url for us to review…without we will be hard pressed to be more specific…

Sure, here’s a sample:

https://bass-ketsbydesign.com/

PLEASE don’t judge my work by this budget site!!!!

Look at the categories in the sidebar. They are text links. I would like to find out how to assign class=”button” to these links, so they appear as buttons in the sidebar. As I said, I know how to do this to a text link in a page or post. But I don’t know how to do it here.

If it helps, I am using Artisteer, with the Templateer plugin. But I doubt that’s relevant in this case.

Thanks again!

general, you can influence the output of the ‘Categories’ widget via a filter aimed at its main function wp_list_categories();

example to add a ccs class to the html link tag:

add_filter('wp_list_categories','add_button_cat_widget');
function add_button_cat_widget( $list ) {
  $list = str_replace('<a href','<a class="button" href',$list);
return $list;
}

or alternatively to the html list tag:

add_filter('wp_list_categories','add_button_cat_widget');
function add_button_cat_widget( $list ) {
  $list = str_replace('<li class="','<li class="button ',$list);
return $list;
}

Thanks! I have the limited ability to add code, if it’s dumbed down enough for a WYSIWYG guy like myself. Where would I add your code?

Again, sorry, not a coder, but I can usually stumble around and get it done.

I forgot to mention:

to code needs to be added into functions.php of your theme;

https://codex.www.ads-software.com/Plugin_API/Filter_Reference

WordPress is outputting the following classes for each category link (li):

<li class="cat-item cat-item-12">

and are in the div:

<div class="box-body blockcontent-body">

so we can use CSS such as:

.blockcontent-body .ul .li .cat-item-# {
//your custom CSS here for a unique css for this cat
}

.blockcontent-body .ul .li .cat-item {
//your custom CSS here for a css for all cats here
}

The cat-item-# is unique for each category…as the class cat-item is also called that can be used to mod all of them…

Man, I wish I had some coding skills. I have functions.php in the editor, but I have no idea where in that file to add the code.

Do you feel like you’re dealing with a five year old yet? Thanks for the help…

I have functions.php in the editor, but I have no idea where in that file to add the code.

if in doubt, add it at the very end, but before the last ?> (which should be in the very last line of functions.php)

alchymyth,

Thanks so much for your help. I will have to configure some things like the length of the buttons, but it worked like a dream.

This forum is so useful for WYSIWIG guys like me!

BTW, just so anyone else will know, this one worked the best:

add_filter(‘wp_list_categories’,’add_button_cat_widget’);
function add_button_cat_widget( $list ) {
$list = str_replace(‘<a href’,'<a class=”button” href’,$list);
return $list;
}