I´m having some difficulty override to default category widgets in my wordpress theme. I created the theme from scratch.

I want to remove the <ul><li></li></ul> from categories in the lists. I want to add my own style using <a href=""></a> instead

<div class="list-group"> 
<a href="#" class="list-group-item">LifeStyle</a> 
<a href="#" class="list-group-item">SmartPhones</a> 
<a href="#" class="list-group-item">Business</a> 
<a href="#" class="list-group-item">Graphic Design</a> 
<a href="#" class="list-group-item">Agriculture</a> 
<a href="#" class="list-group-item">Music</a> 
<a href="#" class="list-group-item">Travel</a> 

I can override it?


This is a really tricky and long question, there is no easy way to do this, as I guess you want to override this core WordPress function from within your theme.

The way to go is a particular case of something explained here, so you can do the following in your functions.php.

Create a new class by copying the code from the original source. Give it a new name (in this example I will be using WP_Widget_Categories_Modified), and start modifying it.

After that you need to unregister the original Widget and register the new one (so, again, assuming your new class is named WP_Widget_Categories_Modified):

function replace_default_wp_widgets() {
    unregister_widget( 'WP_Widget_Categories' );
    register_widget( 'WP_Widget_Categories_Modified' );
add_action( 'widgets_init', 'replace_default_wp_widgets', 1 );

Now, you have replaced the default class with the new one, which is exactly the same as the original. So you need to start modifying the new class you created.

First of all, delete the <ul> and </ul> before and after wp_list_categories in your new Class (remember you copied the original code).

Since the WordPress original class calls to wp_list_categories, which includes the code, the best choice is to add a custom 'walker' to the function.

To do so, also add in your functions.php the walker, for instance:

class Walker_Categories_Plain extends Walker {
    var $db_fields = array( 'parent' => 'parent_id', 'id' => 'object_id' );  
    function start_el( &$output, $item, $depth = 0, $args = array() ) {
        $output .= "\n<a href='" . get_term_link( $item ) . "'>" . $item->name . "</a>\n";

Then, you need to pass this walker to wp_list_categories. To do this, add this argument as this, before the call to wp_list_categories():

$cat_args['walker'] = new Walker_Categories_Plain;

That's it, it should work if I did not forget anything!

The walker can be modified to change the output until you reach your desired code (check the $output string).

Now, your theme:

  1. Hides the default Category Widget
  2. Registers its own Category Widget (which is only used to delete the <ul> and to pass the new Walker by default)
  3. Creates its custom Walker (may be used anywhere else to modify wp_list_categories)
  • Thx you for your guide now I can customize default category output successfully. Oct 21 '15 at 1:26

This worked for me <?php echo the_category(' '); ?>.It removed ul li then you can style hyperlink using parent div class or id.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.