Create a custom widget in WordPress in functions.php

WordPress widgets are a great way to add additional functionality to your website’s sidebar or widget areas. While there are many pre-built widgets available, sometimes you may need to create your own custom widget. In this tutorial, we’ll show you how to create a custom WordPress widget and add it to your theme’s functions.php file.

Creating a Custom WordPress Widget

To create a custom WordPress widget, you’ll need to add some code to your site. Here’s an example of a basic custom widget that displays a title and some text:

phpCopy codeclass Custom_Widget extends WP_Widget {
    function __construct() {
        parent::__construct(
            'custom_widget', // Widget ID
            __('Custom Widget', 'text_domain'), // Widget name
            array( 'description' => __( 'A custom widget to display a title and text', 'text_domain' ), ) // Widget description
        );
    }

    public function widget( $args, $instance ) {
        echo $args['before_widget'];
        if ( ! empty( $instance['title'] ) ) {
            echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
        }
        echo '<p>' . $instance['text'] . '</p>';
        echo $args['after_widget'];
    }

    public function form( $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'text_domain' );
        $text = ! empty( $instance['text'] ) ? $instance['text'] : __( 'Enter some text here', '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>
        <p>
            <label for="<?php echo $this->get_field_id( 'text' ); ?>"><?php _e( 'Text:' ); ?></label>
            <textarea class="widefat" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>"><?php echo esc_attr( $text ); ?></textarea>
        </p>
        <?php
    }

    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? sanitize_text_field( $new_instance['title'] ) : '';
        $instance['text'] = ( ! empty( $new_instance['text'] ) ) ? sanitize_text_field( $new_instance['text'] ) : '';
        return $instance;
    }
}
function custom_widget_init() {
    register_widget( 'Custom_Widget' );
}
add_action( 'widgets_init', 'custom_widget_init' );

This code creates a custom widget that displays a title and some text. To use it, copy and paste the code into your theme’s functions.php file.

Adding the Custom Widget to Your Theme’s functions.php File

Once you’ve created your custom widget code, you can add it to your theme’s functions.php file. The functions.php file is a special file in your WordPress theme that contains PHP functions

and code snippets that add additional functionality to your site.

To add your custom widget to your theme’s functions.php file, simply copy and paste the code from the previous section into the file. Once you’ve done this, save the changes to the file and upload it to your server.

Using the Custom Widget

Once you’ve added your custom widget to your theme’s functions.php file, you can start using it in your sidebar or widget areas. To do this, go to Appearance > Widgets in your WordPress dashboard and drag the widget to the desired location.

In the widget settings, you can enter a title and some text that will be displayed in the widget area. Once you’ve saved the settings, the custom widget will appear on your website.

Creating a custom WordPress widget is a great way to add additional functionality to your website. By using the code snippets provided in this tutorial, you can create your own custom widget and add it to your theme’s functions.php file. Once you’ve done this, you can start using the widget in your sidebar or widget areas to enhance your website’s functionality.