Upload
rebecca-ward
View
238
Download
0
Embed Size (px)
DESCRIPTION
How to create custom wordpress widgets
Citation preview
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→
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 2/15
To Create A Widget Plugin For WordPress - WPExplorer
/www.wpexplorer.com/create-widget-plugin-wordpress/[08/09/2015 15:04:26]
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 ?>
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 3/15
To Create A Widget Plugin For WordPress - WPExplorer
/www.wpexplorer.com/create-widget-plugin-wordpress/[08/09/2015 15:04:26]
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");'));
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 4/15
To Create A Widget Plugin For WordPress - WPExplorer
/www.wpexplorer.com/create-widget-plugin-wordpress/[08/09/2015 15:04:26]
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>
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 5/15
To Create A Widget Plugin For WordPress - WPExplorer
/www.wpexplorer.com/create-widget-plugin-wordpress/[08/09/2015 15:04:26]
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>';
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 6/15
To Create A Widget Plugin For WordPress - WPExplorer
/www.wpexplorer.com/create-widget-plugin-wordpress/[08/09/2015 15:04:26]
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
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 7/15
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→
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 8/15
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]
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.
1 – The form() function
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; ?>" />
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 9/15
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]
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.
2 – The update() function
In the update function, we only have to add a new variable corresponding to the checkbox field:
3 – The widget() function
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 );
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 10/15
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]
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.
1 – The form() function
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
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 11/15
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]
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>';
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 12/15
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]
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.
2 – The update() function
In the update() function, we have to what we did before: adding a new instance, nothing complicated
here.
3 – The widget() function
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
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 13/15
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]
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 }
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 14/15
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]
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 );
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 15/15
to create a Widget Plugin for WordPress - Part 2
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']) ) );