By: Prem Tiwari | Last Updated: | In: WordPress
WordPress widgets provides a simple way of giving any information of your website users. It can be easily dragged and dropped in your widget area. Navigate to the Appearance » Widgets section in your WordPress dashboard to get the list of available widgets. Creating a WordPress widgets is just like creating a WordPress plugin. It’s easier to code than a plugin which can have more than one file. Below are the major functions to create your own widgets.
1 2 3 4 | function widget() function update() function form() |
The WP_Widget class is located in wp-includes/widgets.php
Register your own widget using the widgets_init hook:
You can update your widget data by using admin panel. Use bellow code snippets :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /** * Sanitize widget form values as they are saved. * * @see WP_Widget::update() * * @param array $new_instance Values just sent to be saved. * @param array $old_instance Previously saved values from database. * * @return array Updated safe values to be saved. */ public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ''; return $instance; } } // class Foo_Widget |
After update your data from admin section, use bellow code snippets to display the output :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /** * Front-end display of widget. * * @see WP_Widget::widget() * * @param array $args Widget arguments. * @param array $instance Saved values from database. */ 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']; echo __( 'Hello, World!', 'text_domain' ); echo $args['after_widget']; } |
Open functions.php file from your current activated theme and copy bellow code and paste it to the end of code. Now go to Appearance » Widgets section in your WordPress dashboard and you will see your widget available there.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | /** * Adds Foo_Widget widget. */ class Foo_Widget extends WP_Widget { /** * Register widget with WordPress. */ function __construct() { parent::__construct( 'foo_widget', // Base ID __('Widget Title', 'text_domain'), // Name array( 'description' => __( 'A Foo Widget', 'text_domain' ), ) // Args ); } /** * Front-end display of widget. * * @see WP_Widget::widget() * * @param array $args Widget arguments. * @param array $instance Saved values from database. */ 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']; echo __( 'Hello, World!', 'text_domain' ); echo $args['after_widget']; } /** * Back-end widget form. * * @see WP_Widget::form() * * @param array $instance Previously saved values from database. */ public function form( $instance ) { if ( isset( $instance[ 'title' ] ) ) { $title = $instance[ 'title' ]; } else { $title = __( 'New title', 'text_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 } /** * Sanitize widget form values as they are saved. * * @see WP_Widget::update() * * @param array $new_instance Values just sent to be saved. * @param array $old_instance Previously saved values from database. * * @return array Updated safe values to be saved. */ public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ''; return $instance; } } // class Foo_Widget |
It’s easier to copy and paste. Have fun!
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
How to create wordpress widgets, wordpress, Wordpress widgets
