FREE DOWNLOAD: Plugin / Widget with RSS counters, Twitter , Facebook for WordPress

So you want to learn how to create your own widget for WordPress ? In fact it is not so difficult and so can be quickly implemented in your blog through so famous functions.php file located in your theme folder. To help you explain , we have created a widget that counts the numbers of your social networks like the one we have here in the School WordPress and can be installed in the form of plugin . The link to download is at the bottom of this article .




After installing the widget , this is their appearance in the sidebar :

NOTE: Pay special attention to the fact that the plugin is responsive, that is, if the sidebar of your template is wider, all counters will appear side-by-side as happens here in WordPress School. If your sidebar is even smaller, it will put all the counters in a vertical format, and so on for the different sidebars of blogs, not requiring you to do any kind of change!
Liked? So come forward and try to learn how to do this and other Widgets for us and we can even share with others. I want to make first around quite clear: since we have to deal with PHP and HTML code and the focus of this tutorial is to create widgets for WordPress, we assume that:
You have some basic knowledge of HTML and PHP or at least tried to do a script. Not in the scope of this tutorial to explain what is the echo function or how to start an object of a class. For this there are several resources on the internet, one of the W3Schools is a portal where you can learn all about programming for the internet including PHP, HTML, SQL and CSS.
You know what it is and where the functions.php file of your theme and at least have opened and edited something in it.
If you do not know even what is a widget, the following section is able to give you some lights.
Plugin / Widget with RSS counters, Twitter , Facebook for WordPress

WHAT IS A WIDGET

For those who do not know, a widget is a piece of code that follows certain rules of programming, using the WordPress API. This program structure , allows , when loaded by WordPress to create a block of functionality that can be used or not by the user on his blog WordPress through the activation of that particular widget in a sidebar .
I will not dwell too much about the structure of Widgets since this is not the focus of this tutorial , however you can search on the internet. There is much material on the subject and it is not hard to find something.
THE BENEFITS OF A WIDGET
It can be used in any Sidebar how many times you want
It is easy organization , activation and removal , since there is a simple and intuitive visual interface that can be used for any expert user or lay
It can be used even by those who do not know anything about programming
You have several options to customize the widget in our image
CREATING THE WIDGET
We will then proceed with the explanation of the code . First of all , I suggest you download the plugin that is at the bottom of this tutorial and take a look and keep it open while reading this article .
A widget always starts with extending the WP_Widget class that is native to WordPress and responsible for the whole process of registration , creation, display and management of all active and inactive widgets to a blog content. So when we create our widget , we create a class that extends this “parent” class , becoming heir so to speak, all these methods, properties and processes inherent to the widget .
Explained our process , we will unveil this our code.
This is an initial basic widget to extend the WP_Widget class but that is not usable :
class Widget_EwpSocialCounter extends WP_Widget {
}
We called our Widget_EwpSocialCounter class and that’s how our widget will be recognized internally in WordPress . However, we will continue to call you simple mind Social widget that is shorter and more concise . 🙂
Started our class , you must now provide you some more information , as well , so the widget will not do anything because it is empty , it does not even have a name for when viewed in the Widgets Admin page . For this to happen we have to add to it the method with the same name of our Social widget class by placing the following code function within the class :
class Widget_EwpSocialCounter extends WP_Widget {
    function Widget_EwpSocialCounter() {
        parent::WP_Widget( false, ‘EWP Social Counter’ );
    }
}
This is always the first function to be executed when the WordPress loads the widget . What this feature does is simply tell the class “parent” or parent – WP_Widget class – a new Widget will start, passing it two parameters:
the first refers to arguments by default for this widget only but we will not use (more relevant information can be found in the core of WordPress, this page http://core.trac.wordpress.org/browser/tags/3.2 . 1 / wp- includes / widgets.php # L24 )
the second argument is the title you want it to be displayed in the Widgets panel in the administration. In our case we will use the title EWP Social Counter , you can use your . Always keep in mind that an illuminating title widget is always an asset .
With this, could already active your your widget and it would be visible in the administration Widgets panel , but would have no functionality. That is what we will now create :
class Widget_EwpSocialCounter extends WP_Widget {
    function Widget_EwpSocialCounter() {
        parent::WP_Widget( false, ‘EWP Social Counter’ );
    }
    /**
* Displays the Widget Content Blog sidebar
     * /
    function widget($args, $instance) {
        extract( $args );
        echo $before_widget;
                echo $before_title;
                echo $title;
                echo $after_title;
        echo $after_widget;
    }
    /**
     * When you click ” Save ” in the widget this function is responsible for this procedure
     */
    function update($new_instance, $old_instance) {
        return $new_instance;
    }
    /**
     * This Function exist all drivers do Widget administration
     */
    function form($instance) {
    }
}
These four methods are the only expressions of class necessary and sufficient for most widgets . Let’s unravel the role of each of these functions in the features of our new widget .
FORM FUNCTION ( ) – The CONTROL WIDGET
The function form () displays the administration interface control widget that is nothing less than a form with multiple fields with the options of our widget . These fields are asking the administration user some elements to be exist  or take the proper operation of the widget .
For example, almost all natural Widgets include a field to add a title. With the following HTML:
<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 esc_attr( (string) isset( $instance[“title”] ) ? $instance[“title”] : ” ); ?>” />
    </label>
</p>
In this function form () , will be rendered within the widget control a text input . Here let our widget with more or less customization capabilities so it is always important to study what to ask the user or not.
PHP get_field_id () and get_field_name () return values ??for each of these recorded fields and should be used instead to assign specific values ??to each attribute, because what these functions do is ensure that the names of these fields are always different from each other inclusive of instances of the same widget that were initiated . Since widgets can be used more than once in each sidebar , these functions prevent the fields have the same names , so options may stay mis-configured .
In our Social Widget we have the following function form () :
function form($instance) {
?>
<p>
    <label for=”<?php echo $this->get_field_id(“twitter”); ?>”>
        Nome de Twitter:
        <input class=”widefat” id=”<?php echo $this->get_field_id(“twitter”); ?>” name=”<?php echo $this->get_field_name(“twitter”); ?>” type=”text” value=”<?php echo esc_attr( (string) isset( $instance[“twitter”] ) ? $instance[“twitter”] : ” ); ?>” />
    </label>
    <span class=”description”>O name do Twitter lies no final da URL: </span><code>http://twitter.com/name-de-utilizador</code>
</p>
<p>
    <label for=”<?php echo $this->get_field_id(“facebook”); ?>”>
        ID do Facebook:
    </label>
    <input class=”widefat” id=”<?php echo $this->get_field_id(“facebook”); ?>” name=”<?php echo $this->get_field_name(“facebook”); ?>” type=”text” value=”<?php echo esc_attr( (string) isset( $instance[“facebook”] ) ? $instance[“facebook”] : ” ); ?>” />
    <span class=”description”> Id parameter in the URL of your Facebook page
: </span><code>https://www.facebook.com/pages/edit/?id=id-da-página</code>
</p>
<p>
    <label for=”<?php echo $this->get_field_id(“feedburner”); ?>”>
        user do FeedBurner:
    </label>
    <input class=”widefat” id=”<?php echo $this->get_field_id(“feedburner”); ?>” name=”<?php echo $this->get_field_name(“feedburner”); ?>” type=”text” value=”<?php echo esc_attr( (string) isset( $instance[“feedburner”] ) ? $instance[“feedburner”] : ” ); ?>” />
    <span class=”description”> User name is the end of the URL: </span><code>http://feeds.feedburner.com/user-home</code>
</p>
<?php
}
I think its not necessary to explain each piece of this code, since it is a copy of what was previously said. Only we have created more fields for configuration.
UPDATE FUNCTION () – VALIDATION AND SAVE DATA:
This method performs only one task. It makes updating the new data entered into the control form, getting them on shape parameter and returning them then. Here you can do some validations or calculations of the fields. There is not much more to say about this function.
WIDGET FEATURE () – A VISIBLE PART OF THE WIDGET:
This method prints the blog side of the widget. It is therefore the central part of the widget that your users see and the one who gets the purpose of the widget exist. In addition to HTML in here you also need to get the values ??supplied to the control widget. This can be a bit confusing at times, but the need here is you understand the logic of the widget, especially their arguments:
function widget($args, $instance) {
    extract( $args );
    echo $before_widget;
        echo $before_title;
        echo $instance[‘title’];
        echo $after_title;
    echo $after_widget;
}
This function accepts two arguments:
$ Args – is a set of default variables that help in shaping the widget. They are the variables passed to register_sidebar () function that creates a sidebar in your theme. They are $ before_widget, after_widget $, before_title, $ after_title and, as its name implies, contains the HTML of the arguments passed to register_sidebar () function that will appear in these positions.
 $ Instance – is the set of values ??of the fields provided to the widget control form that we created.
The native PHP function extract () accepts an array of variables and defines them in overall body function. That is, $ args [ ‘before_widget’] is now available as a variable $ before_widget and so on. This is not necesssary, it’s just a more comfortable way of working with variables rather than with an array of variables.
Then we print, obviously each of these variables in order to format the widget according to the theme. First we use the variables $ before_widget and $ after_widget at the beginning of the end of the widget respectively. Everything else is between these two variables, namely the title if any. In our case, the title is not important and will not be used.
A WIDGET FEATURE () – PART 1: RECEPTION OF DATA NEEDED
In order to disclose our numbers of social networks , we have to get them to the source. For this we use the web services implemented by each of the social networks , called API ( Application Programming Interface or Application Programming Interface) . Wikipedia has a great article about what is an API . It is what we will do in the first part of this function :
function widget($args, $instance) {
    global $wpdb;
    extract( $args );
    $get_feedburner = wp_remote_get( ‘https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=’.$instance[‘feedburner’] );
    $get_twitter = wp_remote_get( ‘http://twitter.com/users/show.xml?screen_name=’.$instance[‘twitter’] );
    $get_facebook = wp_remote_get( ‘http://api.facebook.com/restserver.php?method=facebook.fql.query&query=SELECT%20fan_count%20FROM%20page%20WHERE%20page_id=’.$instance[‘facebook’] );
    $xml = new SimpleXmlElement( $get_feedburner[‘body’], LIBXML_NOCDATA );
    $rss_counter = $xml->feed->entry[‘circulation’];
    $xml = new SimpleXmlElement( $get_twitter[‘body’], LIBXML_NOCDATA );
    $twitter_counter = $xml->followers_count;
    $xml = new SimpleXmlElement( $get_facebook[‘body’], LIBXML_NOCDATA );
    $fb_counter = $xml->page->fan_count;
    $comments_counter = $wpdb->get_var( “SELECT COUNT(*) FROM $wpdb->comments WHERE comment_approved = ‘1’” );
    echo $before_widget;
This is the part of PHP, responsible for fetching the values ??that we intend to each of the APIs of social networks. You can put here your favorite social network if desired. Today quae all social networks provide a webservice or API Restfull. It is up to you to find out what the URL for the API of your preferred social network and replicate each of these parts. There is much information on the internet about the APIs of many social networks, just search.
Returning to our code:
First we globalize the object $ wpdb which is a wrapper created by WordPress for database access. This object is responsible for all processes and SQL calls to MySQL database. We need this object in order to get the total number of comments on the blog through an SQL call.
Second, we need to access the APIs of Twitter, Facebook and Feedburner to be able to receive the number of Followers, Fans and subscribers respectively. For this we use the native function of WordPress wp_remote_get (). This function is a wrapper for various functions and file manipulation procedures using the HTTP protocol, including Curl.Então with this function what we do is get the return of our API in XML format in a variable.
Note that we pass to each URL the values ??stored in the control widget through the array $ instance. To get the value of Twitter just spend $ instance [ ‘twitter’] to the URL once we record our field in the widget control with this index and so on for each of the URLs.
Having all return to the APIs on our side, we will read the XML returned. For this we use the new SimpleXMLElement () class that is native to PHP 5.2 as a matter of ease of use and responsiveness. What this class does is the following: we create an object passing the XML content. It converts the XML into a succession of objects that we can use more easily in our code.
To this class passed two parameters: the body of the XML returned by the API and the constant LIBXML_NOCDATA. Not in the scope of this tutorial to explain this last parameter, so I recommend taking a look at W3Schools.




LEAVE A REPLY

Please enter your comment!
Please enter your name here