Easy Step How to Create Custom Widget WordPress
Easy Step How to Create Custom Widget WordPress

awproject.net – For more advance need we must make custom widget, so this is how to create custom widget step by step on easy way.

1. Create Requirement Class and Function

Open functions.php of your theme add this code … this code are requirement code to create custom widget.

class themeslug_custom_widget extends WP_Widget {
  public function __construct() {
    // Instantiate the parent object like widget information etc.
  }
 
  public function widget( $args, $instance ) {
    // function to display element on public page
  }
 
  public function form( $instance ) {
    // function to display element on admin page like form etc.
  }
 
  public function update( $new_instance, $old_instance ) {
    // function to process widget options to be saved
  }
}

2. Register The Widget Class

On this step make sure using same name of widget class name. on this article the class name is : themeslug_custom_widget

add_action( 'widgets_init', 'themeslug_register_widgets' );
 
function themeslug_register_widgets() {
    register_widget( 'themeslug_custom_widget' );
}

3. Create widget information like, Widget title

On function __construct() add code below

parent::__construct(
  /* Base ID of your widget */
  'themeslug_widget_id',

  /* Widget name will appear in UI */
  esc_html__('Custom Widget', 'themeslug'),

  /* Widget description */
  array(
    'description' => esc_html__( 'Description of custom widget',   'themeslug' ),
    'customize_selective_refresh' => true,
  )
);

4. Add form option for admin page

On public function form( $instance ) add code below :

$title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( '', 'themeslug' );
$text = ! empty( $instance['text'] ) ? $instance['text'] : esc_html__( '', 'themeslug' );
?>
  <p>
    <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php echo esc_html__( 'Title:', 'themeslug' ); ?></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>
  <p>
    <label for="<?php echo esc_attr( $this->get_field_id( 'Text' ) ); ?>"><?php echo esc_html__( 'Text:', 'themeslug' ); ?></label>
    <textarea class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'text' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'text' ) ); ?>" type="text" cols="30" rows="10"><?php echo esc_attr( $text ); ?></textarea>
  </p>
<?php

note : On each form option make sure using same field_id and field_name

5. Handle Saving Process

When click Save on widget admin page, this code below are handle saving process to database. Don forget to sanitize the value to prevent from XSS attacking. Add extra code on public function update( $new_instance, $old_instance ) function.

$instance = array();
$instance['title'] = ( !empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
$instance['text'] = ( !empty( $new_instance['text'] ) ) ? esc_html( $new_instance['text'] ) : '';
 
return $instance;

Note : esc_html() and esc_html() used for strip all html tags, so only save text only.

6. Display Widget Contenton Public Page

On public function widget( $args, $instance ) function add extra code below

echo $args['before_widget'];
 
  if ( ! empty( $instance['title'] ) ) {
    echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
  }
 
  echo '<div class="textwidget">';
 
    echo esc_html( $instance['text'] );
 
  echo '</div>';
 
echo $args['after_widget'];

So, this is are step by step how to create custome widget on easy way. extra note the best place to write code of custom widget are on plugin. but if you want to write on theme are no problem sob … leave comment if you have any question … :mrgreen:

widhy980

Blogger, Web Developer & Traveler

Hi, I am from Indonesia, and i have more interest about website development. i have good skill on Codeigniter, Wordpress, HTML x CSS and Bootstrap. have a business? please contact me ... :D

You Might Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *