WordPress Create Custom Widget

16th Jun 2011 at 1:30 PM | Posted in Wordpress | Leave a comment

<?php

/**

 * Plugin Name: Connect With Us Widget

 * Description: A widget that serves as an example for developing more advanced widgets.

 * Version: 0.1

 *

 * This program is distributed in the hope that it will be useful,

 * but WITHOUT ANY WARRANTY; without even the implied warranty of

 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

 */

/**

 * Add function to widgets_init that'll load our widget.

 * @since 0.1

 */

add_action( 'widgets_init', 'connect_load_widgets' );

/**

 * Register our widget.

 * 'Example_Widget' is the widget class used below.

 *

 * @since 0.1

 */

function connect_load_widgets() {

	register_widget( 'Connect_Widget' );

}

/**

 * Example Widget class.

 * This class handles everything that needs to be handled with the widget:

 * the settings, form, display, and update.  Nice!

 *

 * @since 0.1

 */

class Connect_Widget extends WP_Widget {

	/**

	 * Widget setup.

	 */

	function Connect_Widget() {

		/* Widget settings. */

		$widget_ops = array( 'classname' => 'connect', 'description' => __('An socal medis widget.', 'connect') );

		/* Widget control settings. */

		$control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'connect-widget' );

		/* Create the widget. */

		$this->WP_Widget( 'connect-widget', __('Connect Widget', 'connect'), $widget_ops, $control_ops );

	}

	/**

	 * How to display the widget on the screen.

	 */

	function widget( $args, $instance ) {

		extract( $args );

		global $post;

		$include = $instance['include'];

		$includeArr = array();

		if($include != ''){

			$includeArr = explode(",",$include);

		}

		if(is_page($includeArr)){

		/* Our variables from the widget settings. */

		$title = apply_filters('widget_title', $instance['title'] );

		$name = $instance['name'];

		$description = $instance['description'];

		/* Before widget (defined by themes). */

		echo $before_widget;

		echo '<div class="cntSocial">';

		/* Display the widget title if one was input (before and after defined by themes). */

		if ( $title )

			echo '<h3 class="widget-title">'. $title ."</h3>";

		/* Display name from widget settings if one was input. */

		if ( $description )

			echo $description;

		echo '<br class="clear" /></div>';

		/* After widget (defined by themes). */

		echo $after_widget;

		}

	}

	/**

	 * Update the widget settings.

	 */

	function update( $new_instance, $old_instance ) {

		$instance = $old_instance;

		/* Strip tags for title and name to remove HTML (important for text inputs). */

		$instance['title'] = $new_instance['title'];

		$instance['description'] = $new_instance['description'];

		$instance['include'] = $new_instance['include'];

		return $instance;

	}

	/**

	 * Displays the widget settings controls on the widget panel.

	 * Make use of the get_field_id() and get_field_name() function

	 * when creating your form elements. This handles the confusing stuff.

	 */

	function form( $instance ) {

		/* Set up some default widget settings. */

		$defaults = array( 'title' => __('Connect', 'connect'), 'name' => __('John Doe', 'connect'), 'sex' => 'male', 'show_sex' => true );

		$instance = wp_parse_args( (array) $instance, $defaults ); ?>

		<!-- Widget Title: Text Input -->

		<p>

			<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Title:', 'hybrid'); ?></label>

			<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" class="widefat" />

		</p>

		<!-- Your Name: Text Input -->

		<p>

			<textarea id="<?php echo $this->get_field_id( 'description' ); ?>" name="<?php echo $this->get_field_name( 'description' ); ?>" class="widefat" cols="20" rows="16"><?php echo $instance['description']; ?></textarea>

		</p>

		<p>

			<label for="<?php echo $this->get_field_id( 'include' ); ?>"><?php _e('Include Page Id:', 'hybrid'); ?></label>

			<input id="<?php echo $this->get_field_id( 'include' ); ?>" name="<?php echo $this->get_field_name( 'include' ); ?>" value="<?php echo $instance['include']; ?>" style="width:100%;" class="widefat" />

		</p>

	<?php

	}

}

?>

————————————————————-

Output:


Advertisements

Leave a Comment »

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.
Entries and comments feeds.

%d bloggers like this: