Search Google

Friday 15 August 2014

How To Create A Widget Plugin For WordPress

Step 2: Create the Widget

We are now going to create the widget itself. This widget will be a PHP class extending the core WordPress class WP_Widget. Basically, our widget will be defined this way:
1class wp_my_plugin extends WP_Widget {
3    // constructor
4    function wp_my_plugin() {
5        /* ... */
6    }
8    // widget form creation
9    function form($instance) { 
10    /* ... */
11    }
13    // widget update
14    function update($new_instance, $old_instance) {
15        /* ... */
16    }
18    // widget display
19    function widget($args, $instance) {
20        /* ... */
21    }
24// register widget
25add_action('widgets_init', create_function('', 'return register_widget("wp_my_plugin");'));
This code gives WordPress all the information the system needs to be able to use the widget:
  1. The constructor, to initiate the widget
  2. The form() function to create the widget form in the administration
  3. The update() function, to save widget data during edition
  4. And the widget() function to display the widget content on the front-end

1 – The constructor

The constructor is the part of code that defines the widget name, so we’ll only add one line of code to it, to make it look like this:
1// constructor
2    function wp_my_plugin() {
3        parent::WP_Widget(false, $name = __('My Widget', 'wp_widget_plugin') );
4    }
Please not the use of __(). This function is use by WordPress for translation. I really recommend you to always use these functions, to make your theme fully translatable.

2 – The form() function

This function is the one that creates the widget in the WordPress administration, this is were you’ll enter your data to be displayed on the the website. For now I’m just going to explain you ho to add text fields and text areas. We’ll see check-box, drop-down  select and other methods in a next post. Here is what form’) must contain:
1// widget form creation
2function form($instance) {
4// Check values
5if( $instance) {
6     $title = esc_attr($instance['title']);
7     $text = esc_attr($instance['text']);
8     $textarea = esc_textarea($instance['textarea']);
9} else {
10     $title = '';
11     $text = '';
12     $textarea = '';
17<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Widget Title', 'wp_widget_plugin'); ?></label>
18<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; ?>" />
22<label for="<?php echo $this->get_field_id('text'); ?>"><?php _e('Text:', 'wp_widget_plugin'); ?></label>
23<input class="widefat" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>" type="text" value="<?php echo $text; ?>" />
27<label for="<?php echo $this->get_field_id('textarea'); ?>"><?php _e('Textarea:', 'wp_widget_plugin'); ?></label>
28<textarea class="widefat" id="<?php echo $this->get_field_id('textarea'); ?>" name="<?php echo $this->get_field_name('textarea'); ?>"><?php echo $textarea; ?></textarea>
This code is simply adding 3 fields to the widget. The first one is the widget title, the second a text field, and the last one is a textarea. Let’s see now how to save and update each field value with the update() function.

3 –  The update() function

The update() function is really simple. As WordPress core developers added a really powerful widgets API, we only need to add this code to update each field:
1// update widget
2function update($new_instance, $old_instance) {
3      $instance = $old_instance;
4      // Fields
5      $instance['title'] = strip_tags($new_instance['title']);
6      $instance['text'] = strip_tags($new_instance['text']);
7      $instance['textarea'] = strip_tags($new_instance['textarea']);
8     return $instance;
And tada! the magic appears! You don’t need more code to save values, isn’t it awesome?

4 –  The widget() function

The widget() function is the one that will output the content on the website. It’s what your visitors will see. This function can be customized to include CSS classes, and specific tags to match perfectly your theme display. Here is the code (please not that this code can be modified easily to fit your needs):
1// display widget
2function widget($args, $instance) {
3   extract( $args );
4   // these are the widget options
5   $title = apply_filters('widget_title', $instance['title']);
6   $text = $instance['text'];
7   $textarea = $instance['textarea'];
8   echo $before_widget;
9   // Display the widget
10   echo '<div class="widget-text wp_widget_plugin_box">';
12   // Check if title is set
13   if ( $title ) {
14      echo $before_title . $title . $after_title;
15   }
17   // Check if text is set
18   if( $text ) {
19      echo '<p class="wp_widget_plugin_text">'.$text.'</p>';
20   }
21   // Check if textarea is set
22   if( $textarea ) {
23     echo '<p class="wp_widget_plugin_textarea">'.$textarea.'</p>';
24   }
25   echo '</div>';
26   echo $after_widget;
This code isn’t complex, all you have to remember is to to check if a variable is set, if you don’t and if you want to print it, you’ll get an error message.


How to Get Google’s Verified Authorship for your WordPress Blog

We heard folks claiming that this is increasing click through rates and sometimes rankings as well. In this article, we will show you how you can get google’s verified authorship for your WordPress blog.
You need to add the following code in your theme’s <head> section. (Don’t forget to change the Google+ profile URL to yours). Normally you can do this by editing the header.php file
1<link rel="author" href="" />

If you are using a theme framework or just want to put this in as a function, then you can add this by hooking into wp_head(). Paste the following code in your theme’s functions.php file.

1add_action('wp_head', 'add_google_rel_author');
2function add_google_rel_author() {
3echo '<link rel="author" href="" />';

Next thing you need to do is go to your Google+ profile, and add link to your website under the contributors section.
Add Website to Google+ Contributor Section
Lastly, make sure that your +1′s are public on your Google+ profile or this won’t work.
Now you are done. Simply wait for Google to re-crawl your pages and show your face next to it. You can check to see if you did everything right by going to the Google Webmasters Rich Snippets Testing Tool. Below is a screenshot of what it should look like.

No comments:

Post a Comment