How to Create a WordPress Widget from Scratch

WordPress offers the users, power to customize their site like anything. While saying “power”, it truly means “freedom” to build and décor a website. WordPress widget is such a “Power Tool” you can use to customize your web page.

So, what is WordPress widget?

The WordPress widgets could be formally introduced as the blocks of dynamic or static HTML content that can be attached to precise areas of the web page (sidebars or specific widget areas). Being as a user of WordPress, you can simply enjoy built-in widgets like Categories, Archives, Tag Cloud, Recent Posts, Search, Calendar and much more.

So, if you are looking for ready-to-use widgets, you can have thousands of WordPress widgets in the Plugin Directory. However, this huge Plugin Directory could fail you to find the ideal widget that you want to incorporate into your site.

The only solution to this troubled situation is creating a WordPress widget of your own. How? If you are a plugin developer, creating a widget is probably as easy as pie. But, what if you are not a plugin developer? You may take help from WordPress maintenance services or develop a plugin on your own!

Here, in this short tutorial, we will introduce you to the simple steps to create widgets. You will be amazed to learn how easy it is to develop a widget of your own with a sprinkle of programming language.

 

How to develop a simple WordPress widget

Yes, we will stick to the word “simple” widget. In this blog, you will learn the basic steps of creating a widget even if you are not a professional developer. You can give any name to your plugin, for instance, we will call it “Random Post Widget.”

Following is the glimpse of “almost” complete code for the widget we are talking about. You can copy and paste it into your file and save it to see the result. But, as we have said it is “almost complete,” if you want to learn how to create widget easily you have to go through this blog. The secret will be disclosed step by step. Image is there to help see the structure of the code.

You can download the code from the link below:

[download id=”283″]

STEP 1: The Widget Box

At first step copy and paste, the following code into your file and you will see a widget appeared on the page:

<?php

/*

Plugin Name: Random Post Widget

Plugin URI: http://example.me/

Description: Random Post Widget grabs a random post and the associated thumbnail to display on your sidebar

Author: David Statham

Version: 1.0

Author URI: http://example.me/

*/



class RandomPostWidget extends WP_Widget

{

     function RandomPostWidget()

     {

          $widget_ops = array('classname' => 'RandomPostWidget', 'description' => 'Displays a random post with thumbnail' );

          $this->WP_Widget('RandomPostWidget', 'Random Post and Thumbnail', $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'); ?>">Title: <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); ?>" /></label></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;;

              // WIDGET CODE GOES HERE

              echo "<h1>This is an example widget!</h1>";

              echo $after_widget;

         }

     }

add_action( 'widgets_init', create_function('', 'return register_widget("RandomPostWidget");') );?>

 

Using the above-stated code, you will find a simple widget box on your web page, which merely states “This is an example widget.” We will add function code to replace “WIDGET CODE GOES HERE.”

Although it looks like nothing but a simple box at the page corner, you will have the option to change the title. Remember, customizing title is an important feature of a fully functional widget.

 

STEP 2: A Query and the Loop

It is time to put some function in the widget. Now we have added code to “WIDGET CODE GOES HERE.”

// WIDGET CODE GOES HERE

query_posts('posts_per_page=10');

if (have_posts()) :

     while (have_posts()) : the_post();

         the_title();

     endwhile;

endif;

wp_reset_query();

echo $after_widget;

}

}

add_action( 'widgets_init', create_function('', 'return register_widget("RandomPostWidget");') );?>

 

Now, you can see that the widget box has some information. It is a general view of a basic query and loop demonstration. It is a zero formatting output; which means widget information has the default look of your web contents. It is simple and certainly not appealing.

STEP 3: Add Permalink

After setting up the basic widget, ut is time to improve its look. How? Let’s add some HTML formatting with ECHO command and create a link with the function: get_the_permalink ()

Add the following code:

// WIDGET CODE GOES HERE

query_posts('posts_per_page=10');

if (have_posts()) :

     echo "";

     while (have_posts()) : the_post();

         echo '<a href="'.get_permalink().'">'.get_the_title().'</a>'."<hr>"; // Add <hr> tag to separate posts

     endwhile;

     echo "";

endif;

wp_reset_query();

echo $after_widget;

}

}

add_action( 'widgets_init', create_function('', 'return register_widget("RandomPostWidget");') );?>

 

STEP 4: Improve It

Now it is already looking clean and good. But, is it appealing enough? If you want to select any random option and want to make it better, try this code:

// WIDGET CODE GOES HERE

query_posts('posts_per_page=1&orderby=rand'); //fetch 1 post randomly

if (have_posts()) :

    echo "";

    while (have_posts()) : the_post();

        echo '<a href="'.get_permalink().'">'.get_the_title().'</a>';

        echo the_post_thumbnail(array(220,200));   //for image

    endwhile;

    echo "";

endif;

wp_reset_query();

echo $after_widget;

}

}

add_action( 'widgets_init', create_function('', 'return register_widget("RandomPostWidget");') );?>

 

So, it is now looking really good and appealing, isn’t it? If you want to make more changes and add or edit HTML codes at “WIDGET CODE GOES HERE.”

 

The Sum Up

It is really easy to make your WordPress custom widget. It doesn’t matter whether if you understand 99% of the code used in the blog, you will be able to create an own custom widget. If you still have doubts, you can consult with available WordPress support services or simply inbox us for further clarification.

We are happy to help!