create a new widget for wordpress with top level categories only


We were in need of a custom widget for wordpress which lists all the parent categories on sidebar. There are many ready to use plugins available for the same, with too much features. But our need was very limited and we were not interested in adding extra plugins for getting simple wordpress functionalities. Because the more number of plugins you have the slower will be your site. Keep the number of plugins limited, or merge simple plugins together.

Here is a quick code snippet / tutorial on how to create a custom widget for wordpress which will list all the top level categories only. You can easily  customize it to suit your needs.

Lets start by creating a new .php file in your wp-content/plugins directory. Call your file whatever you like, but I’m going with custom_categories_widget.php

Paste the following into the file and save. This is basically a skeleton of widget , and you can see where it says //WIDGET CODE GOES HERE is where we will add our functionality in later.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!–?php
/*
Plugin Name: Custom categories Widget
Description: Provides a Custom categories Widget for wordpress which will list all top level categories to display on your sidebar
Author: Raez Mon
Version: 1
*/
class Custom_Categories extends WP_Widget {
  function Custom_Categories() {
    $widget_ops = array(‘classname’ => ‘Custom_Categories’, ‘description’ => ‘Displays Custom categories’ );
    $this->WP_Widget(‘Custom_Categories’, ‘Custom categories widget’, $widget_ops);
  }
  function form($instance){
    $instance = wp_parse_args( (array) $instance, array( ‘title’ => ” ) );
    $title = $instance[‘title’];
?>

php echo $this->get_field_id(‘title’); ?>”>

  Title:
  php echo $this->get_field_id(‘title’); ?>” name=”get_field_name(‘title’); ?>” type=”text” value=”” />
  </p>
<?php
  }
  function update($new_instance, $old_instance) {
    $instance = $old_instance;
    $instance[‘title’] = $new_instance[‘title’];
    return $instance;
  }
  function widget($args, $instance){
    extract($args, EXTR_SKIP);
    echo $before_widget;
    $title = empty($instance[‘title’]) ? ‘ ‘ : apply_filters(‘widget_title’, $instance[‘title’]);
    if (!empty($title))
    echo $before_title . $title . $after_title;;
    //YOUR WIDGET CODE GOES HERE
    echo $after_widget;
  }
}
add_action( ‘widgets_init’, create_function(”, ‘return register_widget(“Custom_Categories”);’) );
?>

This will give you a simple empty widget, which you can add to your sidebar by going to Your wordpress site’s admin panel > Appearence > Widget. Click on the Custom_categories widget and drag it to the sidebar. You will have the option to name it as you like.

Now lets fetch all the top level categories. For this we can use the following code snippet.

1
2
3
4
5
6
7
8
9
10
11
        $root_categories = get_categories( array(
            ‘parent’ => 0,
        ) );
        echo “<ul>”;
        foreach($root_categories as $parent){
            // To know the array use
            // print_r($parent);
            $url = esc_url(get_category_link($parent->cat_ID));
            echo “<li><a href='{$url}’>{$parent->name}</a></li>”;
        }
        echo “</ul>”;

Here we are using the wordpress get_categories() API. You can learn about its parameters here.

Now inorder to display the categories inside the widget copy the 2nd code snippet and paste it after the //YOUR WIDGET CODE GOES HERE of the first code snippet. Now refresh your page and you can see all the top level categories with links on your sidebar.

See how easy it is to make your own custom widget that can do exactly what you want? Even if you don’t understand 90% of the code we’ve shown you today, you should still be able to customise it somewhat by just changing variables or outputting different HTML.

Problems? Need some different WordPress related help? we are always on hand to help, so head on over and post a new question below.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s