How to Create a WordPress Plugin with Multi-Instance Widget Option For Sidebar or Footer Use – Ready to use WordPress Plugin Code

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: http://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: http://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 . '&amp;tabs=&amp;width=300&amp;height=220&amp;small_header=false&amp;adapt_container_width=true&amp;hide_cover=' . $crunchify_facebook_hidecover . '&amp;show_facepile=' . $crunchify_facebook_showface . '&amp;show_border=false&amp;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:

1. function __construct()
   • Initialize the WordPress plugin with Name and Description
2. public function widget($args, $instance)
   • This is what shows on your Blog – output the content of the widget
3. public function form($instance)
   • This is where you specify WordPress Widget options inside Appearance -> Widgets
4. 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](http://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 under Sidebar or Footer
• 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.

The post How to Create a WordPress Plugin with Multi-Instance Widget Option For Sidebar or Footer Use – Ready to use WordPress Plugin Code appeared first on Crunchify.
Author: App Shah