Create a custom WordPress widget item

In this tutorial, we have discussed how to create a custom WordPress widget item.

What is the WordPress widget

WordPress widgets are the small block that is used on the front side of the website. Many WordPress widgets come default in the theme, but you can also create your own. For creating your own widgets you should understand this 4 function:-

  • form()
  • update()
  • _construct()
  • widget()

Create a custom widget area in WordPress theme

How to Create a custom WordPress widget item

For creating a new custom widget we modify the function.php file or add the below code in that file.

class cc_widget extends Wordp_Widget {



Now, the first is the constructor method, we used that method for name and Id of the widget.

function __construct() {
__('c_coder Widget', ' cc_widget_domain'),
array( 'description' => __( 'c_coder_Widget', 'cc_widget_domain' ), )

We used the widget() function for the front-end of the widget on the website.

public function widget( $args, $instance ) {
$title = apply_filters( 'P_Title_widget', $instance['P_Title'] );
echo $args['B_widget'];

if ( ! empty( $Title) )
echo $args['B_Title'] . $Title . $args['A_Title'];
echo $args['A_widget'];

We used the form() function for the back-end of the widget on the website.

public function form( $instance ) {
if ( isset( $instance[ 'P_TITLE' ] ) )
$N_Title = $instance[ 'P_TITLE' ];
$N_Title = __( 'N_Title', 'cC_widget_domain' );
  <label for="<?php echo e_attr( $this->get_field_ID( 'N_Title' ) ); ?>">
  <?php e_attr ( 'N_Title:', 'cc_widget_domain' ); ?>
<input class="cc_widget" ID="<?php echo e_attr($this->get_field_ID( 'N_Title' )); ?>" Name="<?php echo $this->get_field_Name( 'cc_Title' ); ?>" type="text" value="<?php echo e_attr( $cc_Title ); ?>" />

We use the register function to register the widget in wedsite.

function cc_register_widget() {
cc_register_widget( 'cc_widget' );
add_action( 'cc_widgets_init', 'cc_register_widget' );

Now lastly we used the update() function for update widget whenever setting change.

public function update( $N_instance, $O_instance ) {
$instance = array();
$instance['cc_Title'] = ( ! empty( $N_instance['cc_Title'] ) ) ? tags( $N_instance['cc_Title'] ) : '';
return $instance;

Now, for final you combine all the code and used it on the file.

You can check the newly created widget in the widget in appearance.

I hope this tutorial will help you.

Leave a Reply

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