How to Create aAdvanced Wordpress WIdget Widget Plugin for WordPress - WPExplorer

7/18/2019 How to Create aAdvanced Wordpress WIdget Widget Plugin for WordPress - WPExplorer

http://slidepdf.com/reader/full/how-to-create-aadvanced-wordpress-widget-widget-plugin-for-wordpress-wpexplorer 1/15

To Create A Widget Plugin For WordPress - WPExplorer

/www.wpexplorer.com/create-widget-plugin-wordpress/[08/09/2015 15:04:26]

Published on: 5th November 2012 Author: Remi Under: WordPress Tutorials Comments: 35

How To Create A Widget Plugin For WordPress

Post Series: How To Create A Widget Plugin For WordPress

WordPress is an amazing Content Management System with many great features such as widgets. In this

tutorial, I’m going to explain you how to create your own widgets within a small plugin. This post will cover some

WPEXPLORER

From The Blog

Homepage \ Blog \ WordPress Tutorials \ How To Create A Widget Plugin For WordPress

1. How To Create A Widget Plugin For WordPress

2. How to Create a Widget Plugin for WordPress – Part 2

WordPress made easy with the drag & drop Total WordPress Theme - learn more→

http://www.wpexplorer.com/author/remi/

http://www.wpexplorer.com/tutorials/

http://-/?-

http://www.wpexplorer.com/post-series/widget-plugin-wordpress/

http://wordpress.org/

http://www.wpexplorer.com/


http://www.wpexplorer.com/blog/


http://www.wpexplorer.com/out/total-theme












http://wordpress.org/


http://-/?-







extra points that you need to understand before creating the widget itself. Here we go!

Step 1: How to create a plugin

I recently created a plugin called “Freelancer Widgets Bundle“, and some people asked me how to create such a

plugin, so I decided to write this post. First step is the creation of the plugin. And as you’ll see, it’s the not the

hardest part. A plugin is extra code added to WordPress once you activate it. WordPress creates a loop through

a folder to retrieve all available plugins and list them in the back office. To create your plugin, you’ll need an

editor such as Coda (Mac), or Dreamweaver (PC & Mac). I recommend you to create your plugin in a local install

of WordPress, making it on a live server can cause some troubles if you make an error. So please, wait to test

our plugin before placing on it your hosting.

Open now the folder wp-content/plugins. This where you are going to add your plugin. Create a new directory

and call it “widget-plugin” (actually, this name can be whatever you want). Even if our plugin will only have one

single file, it’s always better to use a folder for each plugin. In your directory, create a new file called “widget-

plugin.php” (this name can be changed too), and open it. We are now about to add our first lines of code. The

definition of a plugin under WordPress follows some rules that you can read here on the codex. Here is how

WordPress defines a plugin:

So, we have to modify this code to make it fit our needs:

1 <?php2 /*3 Plugin Name: Name Of The Plugin

4 Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates5 Description: A brief description of the Plugin.6 Version: The Plugin's Version Number, e.g.: 1.07 Author: Name Of The Plugin Author8 Author URI: http://URI_Of_The_Plugin_Author9 License: A "Slug" license name e.g. GPL210 */11 ?>

1 <?php2 /*3 Plugin Name: Widget Plugin4 Plugin URI: http://www.wpexplorer.com/5 Description: A simple plugin that adds a simple widget6 Version: 1.07 Author: WPExplorer8 Author URI: http://www.wpexplorer.com/9 License: GPL210 */11 ?>

http://remicorson.com/freelancer-widgets-bundle/

http://codex.wordpress.org/Writing_a_Plugin

http://codex.wordpress.org/Writing_a_Plugin

http://remicorson.com/freelancer-widgets-bundle/





Save your file. By only adding code to our widget-plugin.php file we have created a plugin! Well, for now the

plugin doesn’t do anything, but WordPress recognizes it. To make sure it’s the case, go your administration, and

go under “Plugins” menu. If your plugin appears in the plugins list you’re good, otherwise make sure you

followed my instructions and try again. You can now activate the plugin.

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:

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

1 class wp_my_plugin extends WP_Widget {2 3 // constructor4 function wp_my_plugin() {

5 /* ... */6 }7 8 // widget form creation9 function form($instance) {

10 /* ... */11 }12 13 // widget update14 function update($new_instance, $old_instance) {15 /* ... */16 }17 18 // widget display19 function widget($args, $instance) {20 /* ... */21 }22 }23 24 // register widget25 add_action('widgets_init', create_function('', 'return

register_widget("wp_my_plugin");'));

http://codex.wordpress.org/Widgets_API

http://codex.wordpress.org/Widgets_API





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:

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 // constructor2 function wp_my_plugin() {3 parent::WP_Widget(false, $name = __('My Widget', 'wp_widget_plugin') );4 }

1 // widget form creation2 function form($instance) {3 4 // Check values5 if( $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 = '';13 }14 ?>15 16 <p>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; ?>" />

19 </p>20 21 <p>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; ?>" />

24 </p>25 26 <p>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>

http://codex.wordpress.org/Translating_WordPress#Localization_Technology








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:

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):

29 </p>30 <?php31 }

1 // update widget2 function 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;9 }

1 // display widget2 function widget($args, $instance) {3 extract( $args );4 // these are the widget options5 $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">';11 12 // Check if title is set13 if ( $title ) {14 echo $before_title . $title . $after_title;15 }16 17 // Check if text is set18 if( $text ) {19 echo '<p class="wp_widget_plugin_text">'.$text.'</p>';





TWITTER GOOGLE+ LATEST POSTS

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.

Conclusion

As you saw, creating a WordPress widget isn’t complicated. We saw how to create simple inputs fields, and in my

next post I’ll show you how to add more complex field types. But now i hope you enjoyed this first tutorial about

widgets. I’ll be more than happy to hear from you in the comments section!

How To Create A Widget Plugin For WordPress Part 2

Don’t worry guys, the fun doesn’t stop here! Continue on to read How To Create A Widget Plugin For WordPress

Part 2→

About the Author

Remi

Remi is an expert WordPress developer that coded many great free and premium themes and

plugins. His experience on WordPress allows him to produce great stuff and to propose

advanced tutorials. (remicorson.com)

Latest Articles Posted Under: WordPress Tutorials

20 }21 // Check if textarea is set22 if( $textarea ) {23 echo '<p class="wp_widget_plugin_textarea">'.$textarea.'</p>';24 }25 echo '</div>';26 echo $after_widget;27 }

BIO

http://remicorson.com/






to create a Widget Plugin for WordPress - Part 2

//www.wpexplorer.com/how-to-create-a-widget-plugin-for-wordpress-part-2/[08/09/2015 15:05:11]

Published on: 12th November 2012 Author: Remi Under: WordPress Tutorials Comments: 13

How to Create a Widget Plugin for WordPress – Part 2

Post Series: How To Create A Widget Plugin For WordPress

WPEXPLORER

From The Blog Homepage \ Blog \ WordPress Tutorials \ How to Create a Widget Plugin for WordPress – Part 2

1. How To Create A Widget Plugin For WordPress

2. How to Create a Widget Plugin for WordPress – Part 2

WordPress made easy with the drag & drop Total WordPress Theme - learn more→



http://-/?-





















http://-/?-







We saw last week the basics to create a WordPress widget plugin. Today I’ll be covering some new

points to make a better plugin and to add extra features to the existing one. So if you have missed

part one, i truly recommend you to have a look to part 1. You’ll need the code we saw last week to

start this part 2.

Step 1 – Adding a checkbox field

First of all, we are going to add a checkbox field to our widget. Open the file you created in part one.

In this step, we only have to add a new field, nothing really complex.


Lets’ start by the adding a new field type to the form() function:

1 // widget form creation2 function form($instance) {

3 // Check values if( $instance) {4 $title = esc_attr($instance['title']);5 $text = esc_attr($instance['text']);6 $textarea = esc_textarea($instance['textarea']);7 $checkbox = esc_attr($instance['checkbox']); // Added8 } else {9 $title = '';10 $text = '';11 $textarea = '';12 $checkbox = ''; // Added13 }14 ?>15 <p>16 <label for="<?php echo $this->get_field_id('title'); ?>"><?php

_e('Widget Title', 'wp_widget_plugin'); ?></label>17 <input id="<?php echo $this->get_field_id('title'); ?>" name="<?php

echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />

18 </p>19 <p>20 <label for="<?php echo $this->get_field_id('text'); ?>"><?php

_e('Text:', 'wp_widget_plugin'); ?></label>21 <input id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo

$this->get_field_name('text'); ?>" type="text" value="<?php echo $text; ?>" />

http://www.wpexplorer.com/create-widget-plugin-wordpress








The only difference here is that the input type is a checkbox, that means that we can use the

WordPress built-in checked() function. In two words this function is equivalent to a “if” statement that

compares the variable value to another one.


In the update function, we only have to add a new variable corresponding to the checkbox field:


In the widget() function we just have to check if $checkbox is set and if its value is equal to 1. You

can then echo whatever you want.

22 </p>23 <p>24 <label for="<?php echo $this->get_field_id('textarea'); ?>"><?php

_e('Textarea:', 'wp_widget_plugin'); ?></label>25 <textarea id="<?php echo $this->get_field_id('textarea'); ?>" name="<?

php echo $this->get_field_name('textarea'); ?>"><?php echo $textarea; ?></textarea>

26 </p>27 <p>28 <input id="<?php echo $this->get_field_id('checkbox'); ?>" name="<?php

echo $this->get_field_name('checkbox'); ?>" type="checkbox" value="1" <?php checked( '1', $checkbox ); ?> />

29 <label for="<?php echo $this->get_field_id('checkbox'); ?>"><?php _e('Checkbox', 'wp_widget_plugin'); ?></label>

30 </p>31 <?php }

1 // update widget

2 function update($new_instance, $old_instance) {3 $instance = $old_instance;4 // Fields5 $instance['title'] = strip_tags($new_instance['title']);6 $instance['text'] = strip_tags($new_instance['text']);7 $instance['textarea'] = strip_tags($new_instance['textarea']);8 $instance['checkbox'] = strip_tags($new_instance['checkbox']);9 return $instance;10 }

1 // display widget2 function widget($args, $instance) {3 extract( $args );

http://codex.wordpress.org/Function_Reference/checked

http://codex.wordpress.org/Function_Reference/checked





Please note that you could also use if( $checkbox == true ). In that case it doesn’t really matter, but if

you want to change the value of $checkbox, the first method is better. And this is it! You just added

a checkbox field to your widget!

Step 2 – Adding a select dropdown field

Let’s see now how to add a select dropdown field to our widget. The method is very similar to what

we just did for the checkbox.


Lets’ start by the adding a new field type to the form() function:

4 // these are the widget options5 $title = apply_filters('widget_title', $instance['title']);6 $text = $instance['text'];7 $textarea = $instance['textarea'];8 echo $before_widget;9 // Display the widget10 echo '<div>';11 12 // Check if title is set13 if ( $title ) {

14 echo $before_title . $title . $after_title;15 }16 17 // Check if text is set18 if( $text ) {19 echo '<p>'.$text.'</p>';20 }21 // Check if textarea is set22 if( $textarea ) {23 echo '<p>'.$textarea.'</p>';24 }25 // Check if checkbox is checked26 if( $checkbox AND $checkbox == '1' ) {27 echo '<p>'.__('Checkbox is checked', 'wp_widget_plugin').'</p>';28 }29 echo '</div>';30 echo $after_widget;31 }

1 // widget form creation





2 function form($instance) {3 4 // Check values5 if( $instance) {6 $title = esc_attr($instance['title']);7 $text = esc_attr($instance['text']);8 $textarea = esc_textarea($instance['textarea']);9 $checkbox = esc_attr($instance['checkbox']);10 $select = esc_attr($instance['select']); // Added11 } else {

12 $title = '';13 $text = '';14 $textarea = '';15 $checkbox = '';16 $select = ''; // Added17 }18 ?>19 20 <p>21 <label for="<?php echo $this->get_field_id('title'); ?>"><?php

_e('Widget Title', 'wp_widget_plugin'); ?></label>22 <input id="<?php echo $this->get_field_id('title'); ?>" name="<?php

echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />

23 </p>24 25 <p>26 <label for="<?php echo $this->get_field_id('text'); ?>"><?php

_e('Text:', 'wp_widget_plugin'); ?></label>27 <input id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo

$this->get_field_name('text'); ?>" type="text" value="<?php echo $text; ?>" />

28 </p>29 30 <p>

31 <label for="<?php echo $this->get_field_id('textarea'); ?>"><?php _e('Textarea:', 'wp_widget_plugin'); ?></label>32 <textarea id="<?php echo $this->get_field_id('textarea'); ?>" name="<?

php echo $this->get_field_name('textarea'); ?>"><?php echo $textarea; ?></textarea>

33 </p>34 35 <p>36 <input id="<?php echo $this->get_field_id('checkbox'); ?>" name="<?php

echo $this->get_field_name('checkbox'); ?>" type="checkbox" value="1" <?php checked( '1', $checkbox ); ?> />

37 <label for="<?php echo $this->get_field_id('checkbox'); ?>"><?php _e('Checkbox', 'wp_widget_plugin'); ?></label>

38 </p>39 40 <p>41 <label for="<?php echo $this->get_field_id('select'); ?>"><?php

_e('Select', 'wp_widget_plugin'); ?></label>42 <select name="<?php echo $this->get_field_name('select'); ?>" id="<?php

echo $this->get_field_id('select'); ?>" class="widefat">43 <?php44 $options = array('lorem', 'ipsum', 'dolorem');45 foreach ($options as $option) {46 echo '<option value="' . $option . '" id="' . $option . '"', $select ==

$option ? ' selected="selected"' : '', '>', $option, '</option>';





The new code is now adding a dropdown select with three options. You can customize options list by

modifying the $options. You can add as many options as you want.


In the update() function, we have to what we did before: adding a new instance, nothing complicated

here.


It’s now time to display the select value on the website. As know already know, this part is done by

the widget() function. What we are going to do now is to retrieve the select value and output it:

47 }48 ?>49 </select>50 </p>51 <?php52 }

1 // update widget2 function update($new_instance, $old_instance) {3 $instance = $old_instance;4 // Fields5 $instance['title'] = strip_tags($new_instance['title']);6 $instance['text'] = strip_tags($new_instance['text']);7 $instance['textarea'] = strip_tags($new_instance['textarea']);8 $instance['checkbox'] = strip_tags($new_instance['checkbox']);9 $instance['select'] = strip_tags($new_instance['select']);

10 return $instance;11 }

1 // display widget2 function widget($args, $instance) {3 extract( $args );4 // these are the widget options5 $title = apply_filters('widget_title', $instance['title']);6 $text = $instance['text'];7 $textarea = $instance['textarea'];8 echo $before_widget;9 // Display the widget10 echo '<div>';11 12 // Check if title is set





Great! We have successfully added another field type to our widget! Well done! But what about radio

buttons ? In fact in very similar to the new fields we’ve just added and I’m pretty sure with a bit of

work you’ll manage to add it

Now that the widget is working and that we have our fields i would like to introduce you a few more

techniques to customize the widget and make it your own.

Step 3 – Going a bit further

1 – Customizing the widget display

Well, all we did before was nice, but it’s time to go a bit further. There a few more things i’d like to

13 if ( $title ) {14 echo $before_title . $title . $after_title;15 }16 17 // Check if text is set18 if( $text ) {19 echo '<p>'.$text.'</p>';20 }21 22 // Check if textarea is set

23 if( $textarea ) {24 echo '<p>'.$textarea.'</p>';25 }26 27 // Check if checkbox is checked28 if( $checkbox AND $checkbox == '1' ) {29 echo '<p>'.__('Check is checked', 'wp_widget_plugin').'</p>';30 }31 32 // Get $select value33 if ( $select == 'lorem' ) {34 echo 'Lorem option is Selected';35 } else if ( $select == 'ipsum' ) {36 echo 'ipsum option is Selected';37 } else {38 echo 'dolorem option is Selected';39 }40 41 echo '</div>';42 echo $after_widget;43 }





show you to create really nice widgets. And the first one is about the constructor. Remember what

we saw in part 1. The constructor was similar to this:

This is the basic way of declaring a plugin. But i would i like to add a description to the plugin (in the

administration), modify its size and add a CSS class (still in the administration). To do so, we need

to pass variables, here is how:

$widget_ops is adding a CSS class and the description to the widget box while $control_ops is

modifying the plugin height and width.

2 – Adding auto-paragraph to textareas

The second point i’d like to see is the auto-paragraph creation with textareas. If you test now your

plugin you’ll see that if you insert text containing paragraphs (and HTML), after you saved the

content, the text becomes a plain text, and you lost your paragraphs. Here is how to deal with that

point. To allow auto-paragraphs creation for the textarea field modify this line in widget() function:

Replace it by this one:

1 // constructor2 function wp_my_plugin() {3 parent::WP_Widget(false, $name = __('My Widget',

'wp_widget_plugin') );4 }

1 // Controller2 function __construct() {3 $widget_ops = array('classname' => 'my_widget_class',

'description' => __('Insert the plugin description here', 'wp_widget_plugin'));

4 $control_ops = array('width' => 400, 'height' => 300);5 parent::WP_Widget(false, $name = __('My Widget',

'wp_widget_plugin'), $widget_ops, $control_ops );6 }

1 $textarea = $instance['textarea'];

1 $textarea = apply_filters( 'widget_textarea', empty( $instance['textarea'] ) ? '' : $instance['textarea'], $instance );






and then in the function, replace:

by this:

and finally in update() function, replace:

by this:

This part is a bit tricky, but when it’s done, you’ll get the entire satisfaction to have a really nice

widget!

Conclusion

We saw that creating a widget inside a plugin is very interesting, now you must know how to create a

simple plugin containing a widget with different field types and you learnt how to go a bit further

using advanced techniques to customize the widget. Congratulations, you did an amazing job!

1 // Check if textarea is set2 if( $textarea ) {3 echo '<p>'.$textarea.'</p>'; }

1 if( $textarea ) { echo wpautop($textarea); }

1 $instance['textarea'] = strip_tags($new_instance['textarea']);

1 if ( current_user_can('unfiltered_html') )2 $instance['textarea'] = $new_instance['textarea'];3 else4 $instance['textarea'] = stripslashes(

wp_filter_post_kses( addslashes($new_instance['textarea']) ) );

How to Create aAdvanced Wordpress WIdget Widget Plugin for WordPress - WPExplorer

Documents

Transcript of How to Create aAdvanced Wordpress WIdget Widget Plugin for WordPress - WPExplorer