WordPress.org

Ready to get started?Download WordPress

Forums

CSS - Button Class for Category Listings? (12 posts)

  1. Richmond Media
    Member
    Posted 1 year ago #

    Using the Categories widget in the sidebar for a site... the categories are shown as text links. Is there any way to assign the class="button" rule, so the category text links show as buttons?

    Thanks in advance.

  2. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    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.

  3. Richmond Media
    Member
    Posted 1 year ago #

    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.

  4. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

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

  5. Richmond Media
    Member
    Posted 1 year ago #

    Sure, here's a sample:

    http://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!

  6. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    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;
    }
  7. Richmond Media
    Member
    Posted 1 year ago #

    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.

  8. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    I forgot to mention:

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

    http://codex.wordpress.org/Plugin_API/Filter_Reference

  9. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    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...

  10. Richmond Media
    Member
    Posted 1 year ago #

    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...

  11. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    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)

  12. Richmond Media
    Member
    Posted 1 year ago #

    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;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic