WordPress Widget Multiple Instances / WordPress Custom Widget
Crunchify has created multiple WordPress plugins over last few years. One of the requirements we got for our plugin Facebook Members is to have multiple instance
of same Widget because users may want Facebook Page Plugin into their Sidebar
and also in Footer
section.
While working with numerous clients over last few years, we have created quite a few simple plugins with multiple instance widget option.
In this tutorial we will go over Sample ready-to-use WordPress Plugin
code which will put live Facebook Page Plugin
widget into your blog’s Sidebar and/or Footer. Feel free to use this code into your plugin.
Let’s get started:
Step-1
I usually do all Java and WordPress development in Eclipse IDE. So, follow tutorial to setup PHP development kit into Eclipse.
Create file crunchify-plugin.php
under crunchify-plugin
folder and put below code.
<?php /* * Plugin Name: Crunchify Plugin * Plugin URI: https://crunchify.com/ * Description: The Simplest Ready to use WordPress Plugin with Multiple Instance of the same Widgets option - by Crunchify * Version: 1.0 * Author: Crunchify * Author URI: https://crunchify.com * Text Domain: crunchify-plugin */ class crunchify_widget extends WP_Widget { // Create Multiple WordPress Widgets function __construct() { parent::__construct('crunchify_widget', __('Crunchify Plugin', 'crunchify_plugin_domain'), array( 'description' => __('Sample WordPress Plugin by Crunchify', 'crunchify_plugin_domain') )); } // This function creates nice Facebook Page Like box in Header or Footer public function widget($args, $instance) { $crunchify_facebook_url = apply_filters('crunchify_facebook_url', $instance['crunchify_facebook_url']); $crunchify_facebook_hidecover = $instance['crunchify_facebook_hidecover'] ? 'true' : 'false'; $crunchify_facebook_showface = $instance['crunchify_facebook_showface'] ? 'true' : 'false'; $facebookpage = '<div style="margin-bottom:30px;"><iframe src="//www.facebook.com/plugins/page.php?href=' . $crunchify_facebook_url . '&tabs=&width=300&height=220&small_header=false&adapt_container_width=true&hide_cover=' . $crunchify_facebook_hidecover . '&show_facepile=' . $crunchify_facebook_showface . '&show_border=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:220px; margin:-1px;" allowTransparency="true"></iframe></div>'; echo $before_widget; echo $before_title . $after_title; echo $facebookpage; echo $after_widget; } // Create Instance and Assign Values public function form($instance) { if (isset($instance['crunchify_facebook_url'])) { $crunchify_facebook_url = $instance['crunchify_facebook_url']; } else { $crunchify_facebook_url = __('https://facebook.com/Crunchify', 'crunchify_plugin_domain'); } $instance['crunchify_facebook_hidecover'] = $instance['crunchify_facebook_hidecover'] ? 'true' : 'false'; $instance['crunchify_facebook_showface'] = $instance['crunchify_facebook_showface'] ? 'true' : 'false'; ?> <!-- This is Crunchify Widget Form --> <p> <label for="<?php echo $this->get_field_id('crunchify_facebook_url'); ?>"> <?php _e('Facebook Page URL');?></label> <input class="widefat" id="<?php echo $this->get_field_id('crunchify_facebook_url');?>" name="<?php echo $this->get_field_name('crunchify_facebook_url');?>" type="text" value="<?php echo esc_attr($crunchify_facebook_url);?>" /> <br /> <br /> <label for="<?php echo $this->get_field_id('crunchify_facebook_hidecover');?>"><?php _e('Hide Cover?');?></label> <input class="checkbox" type="checkbox" <?php checked($instance['crunchify_facebook_hidecover'], 'true');?> id="<?php echo $this->get_field_id('crunchify_facebook_hidecover');?>"name="<?php echo $this->get_field_name('crunchify_facebook_hidecover');?>" /> <br /> <br /> <label for="<?php echo $this->get_field_id('crunchify_facebook_showface');?>"><?php _e('Show Facepile?'); ?></label> <input class="checkbox" type="checkbox" <?php checked($instance['crunchify_facebook_showface'], 'true'); ?> id="<?php echo $this->get_field_id('crunchify_facebook_showface'); ?>" name="<?php echo $this->get_field_name('crunchify_facebook_showface'); ?>" /> </p> <?php } // Updating widget replacing old instances with new function update($new_instance, $old_instance) { $instance = array(); $instance['crunchify_facebook_url'] = (!empty($new_instance['crunchify_facebook_url'])) ? strip_tags($new_instance['crunchify_facebook_url']) : ''; $instance['crunchify_facebook_hidecover'] = $new_instance['crunchify_facebook_hidecover']; $instance['crunchify_facebook_showface'] = $new_instance['crunchify_facebook_showface']; return $instance; } } function crunchify_plugin() { register_widget('crunchify_widget'); } // Initialize Plugin add_action('widgets_init', 'crunchify_plugin'); ?>
Let’s understand 4 highlighted lines from above code:
- function __construct()
- Initialize the WordPress plugin with Name and Description
- public function widget($args, $instance)
- This is what shows on your Blog – output the content of the widget
- public function form($instance)
- This is where you specify WordPress Widget options inside
Appearance
->Widgets
- This is where you specify WordPress Widget options inside
- function update($new_instance, $old_instance)
- When you click on Save button – Options values will be saved
NOTE:
widgets_init
action will call your function crunchify_plugin
which internally registers
widget with name crunchify_widget
.
Step-2
Create readme.txt
file under same crunchify-plugin
folder with below content. Feel free to update it as per your need.
=== Crunchify Plugin === Contributors: Crunchify Tags: WordPress, WordPress Plugins, Crunchify, multiple widgets Requires at least: 4.3 Tested up to: 4.5.2 Stable tag: 1.0 The simplest ready to use WordPress Plugin with Multiple Instance of the same Widgets option - by Crunchify.com == Description == Sample WordPress Plugin which creates Multiple Widgets for your plugin. [Feedback](https://crunchify.com/) | [Twitter](https://twitter.com/Crunchify) == Installation == 1. Unpack the `download-package`. 2. Upload the file to the `/wp-content/plugins/` directory. 3. Activate the plugin through the `Plugins` menu in WordPress. 4. Go to Appearance -> Widgets Section -> Select Plugin `Crunchify Plugin`. 5. Done and Ready. == Frequently Asked Questions == = FAQ1 = * Your Answer1. = Where do I get latest updates on plugin? = * On <a href="http://twitter.com/Crunchify" target="_blank">Twitter</a> and <a href="http://www.facebook.com/Crunchify" target="_blank">Facebook</a>. == Screenshots == 1. Screenshot1 details 2. Screenshot2 details == Changelog == = 1.0 = * Initial Working Version
Step-3
Just to make sure your folder structure should look like this:
Put crunchify-plugin
folder under plugins
folder.
Step-4 How to Enable?
- Go to your site’s
Admin Panel
- Click on
Plugins
Activate
plugin Crunchify Plugin
Step-5 Setup Plugin Options
- Click on
Appearance -> Widgets
- Choose Widget
Crunchify Plugin
and put it underSidebar
orFooter
- Update options and click
save
Step-6 How to verify?
I’ve placed two widgets with different options.
You should see multiple instances of same Crunchify Plugin
which emits nice Facebook Page Plugin
in your Sidebar Or Footer as per your setup.