WordPress Dashboard Widget – Create Step by Step

WordPress Dashboard Widget – Sidebar Widget की तरह ही WordPress हमें Dashboard Widget Create करने के लिए भी एक API Provide करता है। Dashboard Widget Create करने के लिए हमें एक WordPress Developer के रूप में wp_add_dashboard_widget() API Function को Use करना होता है, जिसका Syntax निम्नानुसार होता है:

wp_add_dashboard_widget($widget_id, $widget_name, $callback, $control_callback)

$widget_id

ये एक Compulsory रूप से Specify किया जाने वाला Parameter होता है, जो कि एक CSS ID होता है और Widget के DIV Element में इसे CSS ID की तरह Use कर लिया जाता है।

$widget_name

ये भी एक Compulsory रूप से Specify किया जाने वाला Parameter होता है, जो कि हमारे Widget का वह नाम होता है, जिसे Widget के Heading के रूप में द”र्ााया जाता है।

$callback

ये भी एक Compulsory रूप से Specify किया जाने वाला Parameter होता है, जो कि एक Callback Function होता है। ये Callback Function हमारे Widget को Dashboard पर Display करने का काम करता है।

$control_callback

ये एक Optional Parameter होता है, जो कि Elements व Submission को Handle करने के लिए Call होता है। यानी हम हमारे Widget के Options या Configurations को Handle करने के लिए जो HTML Form Elements Create करते हैं, उनके Submission को Handle करने के लिए इस Callback Function को Define किया जाता है।

कोई Dashboard Widget Create करने के लिए हमें WordPress के wp_dashboard_setup नाम के Action Hook को Use करना होता है। ये Hook Exactly तब Execute होता है, जब WordPress के Default WordPress Widgets पूरी तरह से Initialize तो हो जाते हैं लेकिन Display नहीं हुए होते। यानी ये Hook, सभी Default Widgets के Initialize होने के बाद व Display होने से पहले Execute होता है और इसे निम्नानुसार उपयोग में लिया जा सकता है:

<?php
add_action( 'wp_dashboard_setup', 'dashboard_widget_example' );

function dashboard_widget_example() {
//Create a custom dashboard widget
wp_add_dashboard_widget( 'dash_wid_id', 'Plugin Information', 'dash_wid_display' );
}
?>

जैसे ही हम हमारे Plugin में उपरोक्तानुसार Code लिखकर अपने Plugin को Activate करते हैं, हमारे WordPress के Dashboard Panel में हमें हमारा Newly Created Dashboard Widget निम्न चित्रानुसार दिखाई देने लगता है:

ऐसा इसलिए होता है क्योंकि जैसे ही wp_dashboard_setup Hook Fire होता है, dashboard_widget_example() Function Execute होता जाता है और इस Function के Execute होते ही wp_add_dashboard_widget() API Function Execute हो जाता है, जो दूसरे Parameter में Specified “Plugin Information” नाम के नए Dashboard Widget को WordPress Engine में Register कर देता है। परिणामस्वरूप हमें उपरोक्त चित्रानुसार नया Dashboard Widget दिखाई देने लगता है।

इस Newly Created Dashboard Widget में हमें जो भी Content Display करना होता है, उसे हमें wp_add_dashboard_widget() API Function के तीसरे Parameter के रूप में Specified Function में Specify करना होता है, जिसे उपरोक्त उदाहरण में हमने dash_wid_display() नाम दिया है। इसलिए यदि हम इस Function को निम्नानुसार Define करें:

function dash_wid_display(){
	echo "<p>This Content is displaying in the Newly Created Dashboard Widget.</p>";
}

तो हमें दिखाई देने वाला हमारा Dashboard Widget कुछ निम्नानुसार दिखाई देने लगता है:

Widget Dashboard की विशेषता ये होती है कि Widget Dashboard API Automatically हमारे Newly Created Dashboard Widget को Draggable व Collapsible बना देता है साथ ही ये Widget Automatically Dashboard के “Screen Options” Tab में निम्न चित्रानुसार Add भी हो जाता है:

इस प्रकार से यदि हम हमारा पूरा Plugin Code देखें, तो हमारे Plugin के सारे Codes कुछ निम्नानुसार होते हैं:

<?php 
/*
Plugin Name: Dashboard Widget
Plugin URI: https://www.bccfalna.com/wpplugins/Dashboard-Widget/
Description: Dashboard Widget Development
Author: Kuldeep Chand
Version: 1.0
Author URI: https://www.bccfalna.com/
*/

add_action( 'wp_dashboard_setup', 'dashboard_widget_example' );

function dashboard_widget_example() {
	//Create a custom dashboard widget
	wp_add_dashboard_widget( 'dash_wid_id', 'Plugin Information', 'dash_wid_display' );
}

function dash_wid_display(){
	echo "<p>This Content is displaying in the Newly Created Dashboard Widget.</p>";
}

जिस तरह से हमने Sidebar Widget के लिए User Interface Create किया था, उसी तरह से हम इस Dashboard Widget के लिए भी User Interface Create कर सकते हैं, जिसके Data या तो Option Settings के रूप में WordPress Database की Options Table में Store किए जा सकते हैं या फिर User Interface से Retrieve किए जाने वाले Data को हम किसी Custom Table में भी Store कर सकते हैं, जिसके बारे में आगे Discuss किया गया है।

उदाहरण के लिए यदि हमें WordPress Sidebar से आने वाले User Data को Widget के माध्‍यम से Handle करना हो, तो इस जरूरत को पूरा करने के लिए हम हमारे पिछले Example Sidebar Widget Plugin को निम्नानुसार Modify करते हुए उपयोग में ले सकते हैं:

जैसे ही हम इस Sidebar Widget Form में Username व Email Specify करके Register Button पर Click करते हैं, हमें निम्नानुसार Output प्राप्त हो जाता है:

जहां हम देख सकते हैं कि हमें एक Message प्राप्त हो रहा है, जो इस बात का Indication दे रहा है कि User Successfully Register हो गया है। ये Message Display करने का काम निम्नानुसार widget() Method को Override करके किया गया है:

	public function widget( $args, $instance ) {
		$title = apply_filters( 'widget_title', $instance['title'] );

		echo $args['before_widget'];
		if ( ! empty( $title ) )
			echo $args['before_title'] . $title . $args['after_title'];
	?>
		
		<form method="get">
			<label for="username">Username</label><br>
			<input type="text" id="username" name="username" /><br>
			<label for="email">EMail</label><br>
			<input type="text" id="email" name="email" />
			<input type="submit" name="submit" value="Register" />
		</form>
	<?php
		if(isset($_GET['submit'])){
			_e("You registered successfully.");
		}
		
		echo $args['after_widget'];
	}

जैसाकि हमने पहले भी कहा था कि Sidebar Widget के सारे User Visitor Contents को widget() Method में निम्नानुसार before_widget व after_widget के बीच ही Enclose किया जाता है:

		echo $args['before_widget'];
		…
		echo $args['after_widget'];

इसलिए इसी Pair के बीच हमने सबसे पहले निम्नानुसार Codes द्वारा एक User Interface Form Create किया है, ताकि User Site पर Registration करने के लिए इस Widget पर दिखाई देने वाले HTML Form को उपयोग में ले सके:

		<form method="get">
			<label for="username">Username</label><br>
			<input type="text" id="username" name="username" /><br>
			<label for="email">EMail</label><br>
			<input type="text" id="email" name="email" />
			<input type="submit" name="submit" value="Register" />
		</form>

और फिर निम्न Statement Execute होता है:

	<?php
		if(isset($_GET['submit'])){_e("You registered successfully.");
	}

इस Statement द्वारा इस बात को Check किया है कि User ने “Submit” Button को Click किया है या नहीं। यदि User ने Submit Button को Click किया हो, तो $_GET Global Array में “submit” Key Exist होता है, परिणामस्वरूप isset() Method true Return करता है, जिसकी वजह से PHP Control if Statement Block में Enter करता है और उपरोक्त चित्रानुसार एक Message Display कर देता है।

हालांकि यहां हमने केवल एक Single Statement Display किया है, लेकिन यदि हमें किसी अन्‍य जरूरत को पूरा करने से सम्बंधित यानी वास्तविक User Registration से सम्बंधित Codes लिखने होते, तो उन Codes को भी हमें ठीक इसी तरह से if Statement Block के रूप में ही Enclose करना होता। इस Modified Plugin को हम निम्नानुसार Specify कर सकते हैं:

<?php 
/*
Plugin Name: Widget
Plugin URI: https://www.bccfalna.com/wpplugins/Widget/
Description: Widget Development    
Author: Kuldeep Chand
Version: 1.0
Author URI: https://www.bccfalna.com/
*/

add_action( 'widgets_init', function(){
     register_widget( 'My_Widget' );
});

class My_Widget extends WP_Widget {

	function __construct() {
		parent::__construct(
			'widget_base_id', 					// Base ID
			__('Widget Title', 'plugin_domain'), 			// Name
			array( 
			'description' => __( 'Custom Widget using WP_Widget API', 'plugin_domain' ),
			'classname' => 'my-widget'
			 ) 							// Args
		);
	}
	
	public function form( $instance ) {
		if ( isset( $instance[ 'title' ] ) ) {
			$title = $instance[ 'title' ];
		}
		else {
			$title = __( 'New title', 'plugin_domain' );
		}
		?>
		<p>
			<label for="<?php echo $this->get_field_id( 'title' ); ?>">
				<?php _e( 'Title:' ); ?>
			</label>
			 
			<input 
				class="widefat" 
				id="<?php echo $this->get_field_id( 'title' ); ?>" 
				name="<?php echo $this->get_field_name( 'title' ); ?>" 
				type="text" 
				value="<?php echo esc_attr( $title ); ?>" 
			/>
		</p>
		<?php
	}

	public function update( $new_instance, $old_instance ) {
		$instance = array();
		if(! empty( $new_instance['title'] ))
			$instance['title'] = strip_tags( $new_instance['title'] );
		else
			$instance['title'] = '';

		return $instance;
	}

	public function widget( $args, $instance ) {
		$title = apply_filters( 'widget_title', $instance['title'] );

		echo $args['before_widget'];
		if ( ! empty( $title ) )
			echo $args['before_title'] . $title . $args['after_title'];
	?>
		
		<form method="get">
			<label for="username">Username</label><br>
			<input type="text" id="username" name="username" /><br>
			<label for="email">EMail</label><br>
			<input type="text" id="email" name="email" />
			<input type="submit" name="submit" value="Register" />
		</form>
	<?php
		if(isset($_GET['submit'])){
			_e("You registered successfully.");
		}
		
		echo $args['after_widget'];
	}
}

इसी प्रकार से यदि हम चाहें तो Dashboard Widget के लिए भी User Interface Create कर सकते हैं और उस User Interface को Create व Control करने के लिए हमें ठीक उसी तरह से पिछले Dashboard Widget Example के dash_wid_display() Function को Modify करना होता है, जिस प्रकार से हमने इस Example में widget() Method को Modify किया है। जैसे:

<?php 
	function dash_wid_display(){
?>
	
	<form method="get">
		<label for="username">Name</label>
		<input type="text" id="username" name="username" /><br>
		<label for="email">EMail</label>
		<input type="text" id="email" name="email" />
		<input type="submit" name="submit" value="Register" />
	</form>
	
	<?php
	if(isset($_GET['submit'])){
		_e("You registered successfully.");
	}
}

परिणामस्वरूप जब इस Dashboard Widget को Activate किया जाता है, तो इस बात हमें हमारा Dashboard Widget कुछ निम्नानुसार दिखाई देता है:

जब हम इस Dashboard Plugin के Name व Email Fields में User Values Specify करके “Register” Button पर Click करते हैं, तो ये Widget भी Exactly Sidebar Widget की तरह ही निम्नानुसार Output Generate करता है:

यानी दोनों ही प्रकार के Widget हालांकि अलग-अलग प्रकार के Users व Roles की जरूरतों को पूरा करने के लिए Design किए जा सकते हैं लेकिन दोनों ही Plugins समान प्रकार से काम करते हैं।