Create your first widget on WordPress

WordPress is the most popular CMS ( Content Management System ), and Widget is the most important part of the CMS Because we interact more user using the widget. So let’s see, How to create your first widget on WordPress.

The widget creating is too easy on WordPress. Let’s learn how to create the interactive widget for your blog visitors. Today we are creating the widget for display most recent posts from WordPress.

For creating widget we need to write the widget code to plugin or theme file. So let’s start the creating first widget step by step.

First of all, we register our widget class for display most recent post.

class thecodingstuff extends WP_Widget {

    function thecodingstuff() {
        parent::WP_Widget(false, $name = __('Light Weight Recent Post', 'wp_thecodingstuff') );
    }

    function form($instance) {

    }

    function update($new_instance, $old_instance) {

    }

    function widget($args, $instance) {
        extract( $args );

    }
}
add_action('widgets_init', create_function('', 'return register_widget("thecodingstuff");'));

We create the class for our widget in this class we need to create the five methods.

First one is the constructor of class we should register widget name and description for our widget on this method.

The second method is “form”, We define the fields for our widget on this method. like widget name and how many posts are you want to display etc…

The third method “update” is for stored the widget form data.

The fourth method is “widget” using this method we can display the widget output to the front side as we want.

Let’s see the full widget code like.

class thecodingstuff extends WP_Widget {

    function thecodingstuff() {
        parent::WP_Widget(false, $name = __('Light Weight Recent Post', 'wp_thecodingstuff') );
    }

    function form($instance) {
        if( $instance) {
            $title = esc_attr($instance['title']);
        } else {
            $title = '';
        }
    ?>

        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title', 'wp_widget_plugin'); ?></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 $title; ?>" />
        </p>
    <?php
    }

    function update($new_instance, $old_instance) {
        $instance = $old_instance;

        $instance['title'] = strip_tags($new_instance['title']);
        return $instance;
    }

    function widget($args, $instance) {
        extract( $args );

        // these are the widget options
        $title = apply_filters('widget_title', $instance['title']);
        echo $before_widget;

        // Check if title is set
        if ( $title ) {
            echo $before_title . $title . $after_title ;
        }

        $args = array(
            'post_type' => 'post',
            'posts_per_page' => 10,
            'orderby' => 'date',
            'order' => 'DESC'
        );
        $the_query = new WP_Query( $args );

        echo '<ul class="thecodingstuff-recentposts-lists">';
            if ( $the_query->have_posts() ) {
                while ( $the_query->have_posts() ) {
                    $the_query->the_post();
                    echo '<li> <a href="'.get_permalink( get_the_ID() ).'"> ' . get_the_title() . ' </a> </li>';
                }
                wp_reset_postdata();
            } else {
                echo '<li> No Posts Found. </li>';
            }

        echo '</ul>';


        echo '<style type="text/css">';
            echo '
                .thecodingstuff-recentposts-lists li,
                .thecodingstuff-recentposts-lists{
                    padding : 0px;
                    list-style : none;
                    list-style-type : none;
                }
                .thecodingstuff-recentposts-lists li a{
                    margin-bottom : 10px;
                    display : inline-block;
                    position : relative;
                    padding-left : 20px;
                }
                .thecodingstuff-recentposts-lists li a:before{
                    content : "\00BB";
                    font-size : 24px;
                    position : absolute;
                    top : 0px;
                    left : 0px;
                    line-height : 12px;
                }
            ';

            echo '</style>';
        echo $after_widget;
    }
}
add_action('widgets_init', create_function('', 'return register_widget("thecodingstuff");'

So, it’s too easy to create the widget on WordPress.

If you have any question or query write the comment 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