Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/webgalli/public_html/blog/wp-includes/plugin.php on line 571

Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/webgalli/public_html/blog/wp-includes/plugin.php on line 571
Easily create a new widget for wordpress with top level categories only - Team Webgalli Blog - Team Webgalli Blog
Request quote

Easily create a new widget for wordpress with top level categories only

Posted on: July 29th, 2012 by Raez Mon No Comments

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.

Basic Widget frame work for wordpress

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.

Plugin Name: Custom categories Widget
Plugin URI: http://webgalli.com/
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
Author URI: http://webgalli.com/
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'];
  <p><label for="<?php echo $this->get_field_id('title'); ?>"></label>
  <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" />
  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;;

	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.

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

Tags: , , , , , , , , , , ,