the widget is mainly displayed in sidebar or WordPress and its a very good process to ad extra featured in WordPress in this tutorial we will learn and develop a WordPress widget widget
To create a widget first have to create a class extending the WordPress default widget class thus in the declared class all the functions can be extended
Example: class Social_Pages_Custom_Widget extends WP_Widget {}
Then have to make a function which will register the widget by using the code register_widget( 'Social_Pages_Custom_Widget' );
Example: function create_a_Social_Pages_Custom_Widget(){ register_widget( 'Social_Pages_Custom_Widget' ); }
And then initialize the function which is registering the widget
Example: add_action( 'widgets_init', 'create_a_Social_Pages_Custom_Widget'); here the widgets_init is the keyword and create_a_Social_Pages_Custom_Widget is the function name which registering the widget.
Start the development of the class for widget
Now the class have mainly four part one for construct and call parrents compenect, second one is for declaring the display portion in frontend, the third one is the Form portion of the widget which is chowing in wordpress admin panel and the fourth one is the update of data portion
Now Step By Step develop the construct, widget display, form and update of wordpress widget
First make the construction of widget defining class
Declare the construct by using the code public function __construct() { } and then declare an argument array to pass for the widget construct with the key classname & description the array code is array( 'classname' => 'Social_Pages_Custom_Widget','description'=>'Social page link widget is to submit and show the social media pages'); now call the parent construct with class name , name and arguments parent::__construct( 'Social_Pages_Custom_Widget', 'Social Page Link Widget', $widget_ops );
Example:
<?php
/**
* Sets up the widgets name etc
*/
public function __construct() {
$widget_ops = array(
‘classname’ => ‘Social_Pages_Custom_Widget’,
‘description’ => ‘Social page link widget is to submit and show the social media pages’,
);
parent::__construct( ‘Social_Pages_Custom_Widget’, ‘Social Page Link Widget’, $widget_ops );
}
?>
Now make the widget portion or the display portion of front end
Write the public function with 2 argument passing public function widget( $args, $instance ) {} Now echo the code for before widget echo $args['before_widget']; and at last the after widget inside the function echo $args['after_widget']; and then print the title with before and after content echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title']; then print the value of the field using the code apply_filters( 'widget_title', $instance['facebook'] )
Example:
<?php
/**
* Outputs the content of the widget to show in frontend*
* @param array $args
* @param array $instance
*/
public function widget( $args, $instance ) {
// outputs the content of the widget
echo $args[‘before_widget’];
if ( ! empty( $instance[‘title’] ) ) {
echo $args[‘before_title’] . apply_filters( ‘widget_title’, $instance[‘title’] ) . $args[‘after_title’];
}
?>
<ul>
<?php
if ( ! empty( $instance[‘facebook’] ) ) {
echo ‘<li><a href=”‘ . apply_filters( ‘widget_title’, $instance[‘facebook’] ) . ‘” target=”_blank” style=”text-decoration: none;”>Facebook</a></li>’;
}
?>
<?php
if ( ! empty( $instance[‘twitter’] ) ) {
echo ‘<li><a href=”‘ . apply_filters( ‘widget_title’, $instance[‘twitter’] ) . ‘” target=”_blank” style=”text-decoration: none;”>Twitter</a></li>’;
}
?>
<?php
if ( ! empty( $instance[‘google_plus’] ) ) {
echo ‘<li><a href=”‘ . apply_filters( ‘widget_title’, $instance[‘google_plus’] ) . ‘” target=”_blank” style=”text-decoration: none;”>Google +</a></li>’;
}
?>
</ul>
<?php
echo $args[‘after_widget’];
}
?>
Now make the form and viewing portion of wordpress of a widget
to make a wordpress admin view portion of a widget first write the public function with the argument instance public function form( $instance ) {} Now inside the function first make the form for title and create the instance for title
<?php
// outputs the options form on admin
$title = ! empty( $instance[‘title’] ) ? $instance[‘title’] : esc_html__( ‘New title’, ‘text_domain’ );
?>
<p>
<label for=”<?php echo esc_attr( $this->get_field_id( ‘title’ ) ); ?>”><?php esc_attr_e( ‘Title:’, ‘text_domain’ ); ?></label>
<input class=”widefat” id=”<?php echo esc_attr( $this->get_field_id( ‘title’ ) ); ?>” name=”<?php echo esc_attr( $this->get_field_name( ‘title’ ) ); ?>” type=”text” value=”<?php echo esc_attr( $title ); ?>”>
</p>
and then make one by one form with the instance
<?php
// outputs the options form on admin
$facebook = ! empty( $instance[‘facebook’] ) ? $instance[‘facebook’] : esc_html__( ‘Facebook URL’, ‘text_domain’ );
?>
<p>
<label for=”<?php echo esc_attr( $this->get_field_id( ‘facebook’ ) ); ?>”><?php esc_attr_e( ‘Facebook:’, ‘text_domain’ ); ?></label>
<input class=”widefat” id=”<?php echo esc_attr( $this->get_field_id( ‘facebook’ ) ); ?>” name=”<?php echo esc_attr( $this->get_field_name( ‘facebook’ ) ); ?>” type=”text” value=”<?php echo esc_attr( $facebook ); ?>”>
</p>
Example:
<?php
**
* Outputs the options form on admin
*
* @param array $instance The widget options
*/
public function form( $instance ) {
// outputs the options form on admin
$title = ! empty( $instance[‘title’] ) ? $instance[‘title’] : esc_html__( ‘New title’, ‘text_domain’ );
?>
<p>
<label for=”<?php echo esc_attr( $this->get_field_id( ‘title’ ) ); ?>”><?php esc_attr_e( ‘Title:’, ‘text_domain’ ); ?></label>
<input class=”widefat” id=”<?php echo esc_attr( $this->get_field_id( ‘title’ ) ); ?>” name=”<?php echo esc_attr( $this->get_field_name( ‘title’ ) ); ?>” type=”text” value=”<?php echo esc_attr( $title ); ?>”>
</p>
<?php
// outputs the options form on admin
$facebook = ! empty( $instance[‘facebook’] ) ? $instance[‘facebook’] : esc_html__( ‘Facebook URL’, ‘text_domain’ );
?>
<p>
<label for=”<?php echo esc_attr( $this->get_field_id( ‘facebook’ ) ); ?>”><?php esc_attr_e( ‘Facebook:’, ‘text_domain’ ); ?></label>
<input class=”widefat” id=”<?php echo esc_attr( $this->get_field_id( ‘facebook’ ) ); ?>” name=”<?php echo esc_attr( $this->get_field_name( ‘facebook’ ) ); ?>” type=”text” value=”<?php echo esc_attr( $facebook ); ?>”>
</p>
<?php
// outputs the options form on admin
$twitter = ! empty( $instance[‘twitter’] ) ? $instance[‘twitter’] : esc_html__( ‘Twitter URL’, ‘text_domain’ );
?>
<p>
<label for=”<?php echo esc_attr( $this->get_field_id( ‘twitter’ ) ); ?>”><?php esc_attr_e( ‘Twitter:’, ‘text_domain’ ); ?></label>
<input class=”widefat” id=”<?php echo esc_attr( $this->get_field_id( ‘twitter’ ) ); ?>” name=”<?php echo esc_attr( $this->get_field_name( ‘twitter’ ) ); ?>” type=”text” value=”<?php echo esc_attr( $twitter ); ?>”>
</p>
<?php
// outputs the options form on admin
$google_plus = ! empty( $instance[‘google_plus’] ) ? $instance[‘google_plus’] : esc_html__( ‘Google Plus URL’, ‘text_domain’ );
?>
<p>
<label for=”<?php echo esc_attr( $this->get_field_id( ‘google_plus’ ) ); ?>”><?php esc_attr_e( ‘Google Plus:’, ‘text_domain’ ); ?></label>
<input class=”widefat” id=”<?php echo esc_attr( $this->get_field_id( ‘google_plus’ ) ); ?>” name=”<?php echo esc_attr( $this->get_field_name( ‘google_plus’ ) ); ?>” type=”text” value=”<?php echo esc_attr( $google_plus ); ?>”>
</p>
<?php
}
?>
And at last make the public function for the update of the fields values with argument new instance and old instance
First make the updation of the title of the widget using the code instance array $instance = array(); and the code for update is title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ''; similarly make update all field one by one using the code $instance['facebook'] = ( ! empty( $new_instance['facebook'] ) ) ? strip_tags( $new_instance['facebook'] ) : '';
Example:
<?php
/**
* Processing widget options on save
* @param array $new_instance The new options
* @param array $old_instance The previous options
*/
public function update( $new_instance, $old_instance ) {
// processes widget options to be saved
$instance = array();
$instance[‘title’] = ( ! empty( $new_instance[‘title’] ) ) ? strip_tags( $new_instance[‘title’] ) : ”;
$instance[‘facebook’] = ( ! empty( $new_instance[‘facebook’] ) ) ? strip_tags( $new_instance[‘facebook’] ) : ”;
$instance[‘twitter’] = ( ! empty( $new_instance[‘twitter’] ) ) ? strip_tags( $new_instance[‘twitter’] ) : ”;
$instance[‘google_plus’] = ( ! empty( $new_instance[‘google_plus’] ) ) ? strip_tags( $new_instance[‘google_plus’] ) : ”;
$instance[‘linkedin’] = ( ! empty( $new_instance[‘linkedin’] ) ) ? strip_tags( $new_instance[‘linkedin’] ) : ”;
return $instance;
}
?>
And now here is the full code to be written in the function.php file to develop a widget.
<?php
// custom widget for social pages links
class Social_Pages_Custom_Widget extends WP_Widget {
/**
* Sets up the widgets name etc
*/
public function __construct() {
$widget_ops = array(
'classname' => 'Social_Pages_Custom_Widget',
'description' => 'Social page link widget is to submit and show the social media pages',
);
parent::__construct( 'Social_Pages_Custom_Widget', 'Social Page Link Widget', $widget_ops );
}
/**
* Outputs the content of the widget to show in frontend*
* @param array $args
* @param array $instance
*/
public function widget( $args, $instance ) {
// outputs the content of the widget
echo $args['before_widget'];
if ( ! empty( $instance['title'] ) ) {
echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
}
?>
<ul>
<?php
if ( ! empty( $instance['facebook'] ) ) {
echo '<li><a href="' . apply_filters( 'widget_title', $instance['facebook'] ) . '" target="_blank" style="text-decoration: none;">Facebook</a></li>';
}
?>
<?php
if ( ! empty( $instance['twitter'] ) ) {
echo '<li><a href="' . apply_filters( 'widget_title', $instance['twitter'] ) . '" target="_blank" style="text-decoration: none;">Twitter</a></li>';
}
?>
<?php
if ( ! empty( $instance['google_plus'] ) ) {
echo '<li><a href="' . apply_filters( 'widget_title', $instance['google_plus'] ) . '" target="_blank" style="text-decoration: none;">Google +</a></li>';
}
?>
<?php
if ( ! empty( $instance['linkedin'] ) ) {
echo '<li><a href="' . apply_filters( 'widget_title', $instance['linkedin'] ) . '" target="_blank" style="text-decoration: none;">Linked In</a></li>';
}
?>
</ul>
<?php
echo $args['after_widget'];
}
/**
* Outputs the options form on admin
*
* @param array $instance The widget options
*/
public function form( $instance ) {
// outputs the options form on admin
$title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( 'New title', 'text_domain' );
?>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_attr_e( 'Title:', 'text_domain' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
</p>
<?php
// outputs the options form on admin
$facebook = ! empty( $instance['facebook'] ) ? $instance['facebook'] : esc_html__( 'Facebook URL', 'text_domain' );
?>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'facebook' ) ); ?>"><?php esc_attr_e( 'Facebook:', 'text_domain' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'facebook' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'facebook' ) ); ?>" type="text" value="<?php echo esc_attr( $facebook ); ?>">
</p>
<?php
// outputs the options form on admin
$twitter = ! empty( $instance['twitter'] ) ? $instance['twitter'] : esc_html__( 'Twitter URL', 'text_domain' );
?>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'twitter' ) ); ?>"><?php esc_attr_e( 'Twitter:', 'text_domain' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'twitter' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'twitter' ) ); ?>" type="text" value="<?php echo esc_attr( $twitter ); ?>">
</p>
<?php
// outputs the options form on admin
$google_plus = ! empty( $instance['google_plus'] ) ? $instance['google_plus'] : esc_html__( 'Google Plus URL', 'text_domain' );
?>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'google_plus' ) ); ?>"><?php esc_attr_e( 'Google Plus:', 'text_domain' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'google_plus' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'google_plus' ) ); ?>" type="text" value="<?php echo esc_attr( $google_plus ); ?>">
</p>
<?php
// outputs the options form on admin
$linkedin = ! empty( $instance['linkedin'] ) ? $instance['linkedin'] : esc_html__( 'Linkedin URL', 'text_domain' );
?>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'linkedin' ) ); ?>"><?php esc_attr_e( 'Linkedin:', 'text_domain' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'linkedin' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'linkedin' ) ); ?>" type="text" value="<?php echo esc_attr( $linkedin ); ?>">
</p>
<?php
}
/**
* Processing widget options on save
* @param array $new_instance The new options
* @param array $old_instance The previous options
*/
public function update( $new_instance, $old_instance ) {
// processes widget options to be saved
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
$instance['facebook'] = ( ! empty( $new_instance['facebook'] ) ) ? strip_tags( $new_instance['facebook'] ) : '';
$instance['twitter'] = ( ! empty( $new_instance['twitter'] ) ) ? strip_tags( $new_instance['twitter'] ) : '';
$instance['google_plus'] = ( ! empty( $new_instance['google_plus'] ) ) ? strip_tags( $new_instance['google_plus'] ) : '';
$instance['linkedin'] = ( ! empty( $new_instance['linkedin'] ) ) ? strip_tags( $new_instance['linkedin'] ) : '';
return $instance;
}
}
function create_a_Social_Pages_Custom_Widget(){
register_widget( 'Social_Pages_Custom_Widget' );
}
add_action( 'widgets_init', 'create_a_Social_Pages_Custom_Widget');
?>
paste the above code inside your functions.php file inside your theme folder and wo to appearance->widget to view the widget and make it attach to a sidebar and test.