How to build a WordPress widget using the modern WP_Widget class?

So, you want to build your own custom widgets for your WordPress site? That’s a fantastic idea. Widgets are these handy little boxes that let you add functionality to your theme’s widget areas, like displaying recent posts, categories, or even custom content. While there are pre-built ones, creating your own gives you so much more control and flexibility.

The good news is, with WordPress’s modern WP_Widget class, building custom widgets is far more straightforward and robust than it used to be. Forget those older, potentially less secure methods; the WP_Widget class provides a structured, object-oriented approach that makes development cleaner and maintenance easier.

This guide will walk you through the process, breaking it down into manageable steps. We’ll get you from zero to a functional custom widget that you can proudly add to your WordPress site.

Before we dive into the coding, let’s understand what a widget actually is in WordPress terms and what the WP_Widget class brings to the table.

What is a WordPress Widget?

Think of widgets as pre-built blocks of content or functionality that you can drag and drop into designated areas on your WordPress theme. These areas are typically found in sidebars, footers, or even header areas, depending on how the theme is designed. They offer a simple way for users (and you!) to customize the look and feel of their site without needing to touch code.

The Power of `WP_Widget`

The WP_Widget class is the official, recommended way to create custom widgets in WordPress. It’s an abstract class, meaning you don’t use it directly. Instead, you extend it, creating your own class that inherits all its useful methods and properties. This class handles a lot of the heavy lifting for you, including:

Registration: Making your widget available in the WordPress admin area.
Saving Options: Ensuring the settings you define for your widget are saved correctly.
Displaying the Widget: Providing methods to control how your widget appears on the front-end of your site.
Form Handling: Creating the interface for users to configure your widget in the admin.

By using this class, you benefit from built-in security measures and a standardized way of building widgets, which makes your code more compatible with WordPress core updates.

Where to Put Your Widget Code

There are a few standard places you can put your custom widget code. The most common and recommended methods are:

As a Plugin: This is generally the best approach for reusable widgets or those with significant functionality. You create a simple plugin file, add your widget class to it, and activate the plugin. This makes it easy to manage and deploy your widget across different sites.
In Your Theme’s functions.php File: For widgets that are specific to a particular theme, you can add the code directly to your theme’s functions.php file. However, be aware that if you switch themes, your widget will disappear. This is usually only recommended for very simple, theme-specific widgets.

For this guide, we’ll assume you’re building your widget as part of a plugin. It’s a more robust and scalable approach.

If you’re looking to enhance your WordPress site further after learning how to build a widget using the modern WP_Widget class, you might find it beneficial to explore the importance of website performance. A related article that delves into optimizing your site’s speed is available at Google PageSpeed Insights. This resource provides valuable insights and tips on improving your website’s loading times, which can significantly enhance user experience and SEO rankings.

Building Your First Custom Widget: The Core Essentials

Let’s get our hands dirty and start building. We’ll create a basic widget that displays a simple message.

Understanding the Widget Class Structure

When you extend WP_Widget, you’re essentially creating a new class that will contain the logic for your widget. This class will have a few key methods that you must implement:

__construct(): This is the constructor method. It’s where you’ll set up your widget’s basic properties, like its name and description.
widget(): This method defines what will be displayed on the front-end of your website when the widget is active.
form(): This method defines the form that appears in the WordPress admin area, allowing users to configure your widget’s settings.
update(): This method handles saving the settings that your users enter in the form() method.

Creating Your Widget Class

Let’s start with a basic structure. Imagine a file named my-custom-widget.php within your plugin’s directory.

“`php

/**

Plugin Name: My Awesome Widget Plugin
Description: A simple plugin to demonstrate building a custom WordPress widget.
Version: 1.0
Author: Your Name

// Prevent direct access to the file.

if ( ! defined( ‘ABSPATH’ ) ) {

exit;

}

/**

Class My_Custom_Widget.

Extends WP_Widget to create a custom widget.

class My_Custom_Widget extends WP_Widget {

/**

My_Custom_Widget constructor.

public function __construct() {

// Setting up the widget’s id, name and description.

parent::__construct(

‘my_custom_widget’, // Base ID. Used in the widget class name.

esc_html__( ‘My Custom Message Widget’, ‘text_domain’ ), // Name. Visible in the widget admin area.

array( ‘description’ => esc_html__( ‘A widget to display a custom message.’, ‘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 ) {

// … Widget content will go here …

}

/**

Back-end widget form.

@see WP_Widget::form()

@param array $instance Previously saved values from database.

public function form( $instance ) {

// … Widget form fields will go here …

}

/**

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 ) {

// … Sanitization and saving logic will go here …

}

/**

function register_my_custom_widget() {

register_widget( ‘My_Custom_Widget’ );

}

add_action( ‘widgets_init’, ‘register_my_custom_widget’ );

“`

Let’s break down what’s happening here:

Plugin Header: The initial block of comments (/** ... */) is standard WordPress plugin information.
Namespace Protection: if ( ! defined( 'ABSPATH' ) ) { exit; } is a security measure to prevent direct file access.
Class Definition: We define My_Custom_Widget that extends WP_Widget.
__construct():
parent::__construct(): This is crucial. It calls the parent WP_Widget constructor.
'my_custom_widget': This is the unique ‘base ID’ for your widget. It’s used internally and in the widget’s class name.
esc_html__( 'My Custom Message Widget', 'text_domain' ): This is the name that will appear in the “Available Widgets” list in the admin area. esc_html__ is a WordPress function for internationalization (translation) and escaping HTML for security. 'text_domain' is a placeholder for your plugin’s text domain, which is also important for translation.
array( 'description' => esc_html__( 'A widget to display a custom message.', 'text_domain' ), ): This array contains optional arguments. Here, we provide a description that appears below the widget name in the admin.
widget(), form(), update(): These are placeholder methods for now. We’ll fill them in soon.
Registration Function:
register_my_custom_widget(): This function is where the magic happens to make your widget available.
register_widget( 'My_Custom_Widget' ): This WordPress function takes your widget class name as an argument and registers it with the widget system.
add_action( 'widgets_init', 'register_my_custom_widget' ): This hooks your registration function into the widgets_init action, which WordPress fires when it’s ready to initialize widgets.

Once you save this as my-custom-widget.php in a folder like my-awesome-widget-plugin inside your wp-content/plugins directory, and then activate “My Awesome Widget Plugin” in your WordPress admin, you should see “My Custom Message Widget” in your “Available Widgets” list.

Populating the Widget: Displaying Content (`widget()` method)

Now that our widget is registered, let’s make it display something on the front-end. This is handled by the widget() method.

The `widget()` Method Explained

The widget() method receives two arguments:

$args: An array containing pre-defined arguments that the theme provides. These typically include things like before_widget, after_widget, before_title, and after_title. These are essential for ensuring your widget integrates correctly with the theme’s markup and styling.
$instance: An array containing the saved settings for this specific instance of your widget. If a user has multiple instances of the same widget, each instance will have its own $instance data.

Adding Content to the `widget()` Method

Let’s update our widget() method to display a simple message.

“`php

// … inside the My_Custom_Widget class …

/**

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 ) {

// Check if there are any saved settings for this widget instance.

if ( ! $instance ) {

return; // Nothing to display if no settings are saved.

}

// Extract the settings from the $instance array.

// We’ll define $message and $title in the form and update methods later.

$title = ! empty( $instance[‘title’] ) ? $instance[‘title’] : esc_html__( ‘Default Title’, ‘text_domain’ );

$message = ! empty( $instance[‘message’] ) ? $instance[‘message’] : esc_html__( ‘This is my custom message!’, ‘text_domain’ );

// Before widget: This is where the theme’s wrapper markup usually goes.

echo $args[‘before_widget’];

// Widget title: Display the title if it’s set.

if ( ! empty( $title ) ) {

echo $args[‘before_title’] . esc_html( $title ) . $args[‘after_title’];

}

// Widget content: Display the message.

echo ‘

‘;

// After widget: The closing tag for the theme’s wrapper.

echo $args[‘after_widget’];

}

// … rest of the class and registration …

“`

Let’s break down the additions:

Checking $instance: It’s good practice to check if $instance is empty. If it is, it means no settings have been saved, and there’s nothing to display.
Extracting Settings: We’re trying to get a title and a message from the $instance array. For now, these are just placeholders. We provide default values using esc_html__() in case they aren’t set.
Outputting Theme Markup:
echo $args['before_widget'];: This echoes whatever markup the theme has defined to wrap a widget (e.g.,
).
echo $args['before_title'] . esc_html( $title ) . $args['after_title'];: This handles the widget title. Again, it uses the theme’s predefined wrappers (e.g.,
or
). esc_html( $title ) ensures the title is displayed safely.
Outputting Widget Content:
echo '
';: We add a div with a custom class. This is useful for applying your own CSS styling to the widget’s content later on.
echo wp_kses_post( $message );: wp_kses_post() is a secure way to display user-submitted HTML content. It allows standard HTML tags that are generally considered safe for posts.
echo '

';: Closes our custom content wrapper.

Closing Widget Markup: echo $args['after_widget'];: This closes the theme’s widget wrapper (e.g.,

After this change, if you were to drag and drop your widget, it would show a default title and message, wrapped in your theme’s widget styling. However, you can’t yet change this message through the admin.

Configuring the Widget: The Admin Form (`form()` method)

To make your widget user-friendly, you need to provide a way for users to input their own settings. This is done in the form() method.

The `form()` Method Explained

The form() method receives one argument:

$instance: An array containing the current saved values for this widget instance. If the widget hasn’t been saved before, this will be an empty array. This is crucial because it allows you to pre-populate the form fields with existing settings when the user is editing the widget.

Creating Form Fields

This method is essentially a standard HTML form. You’ll use form elements like , , </code>, and <code><select></code> to gather user input. Let’s add fields for the <code>title</code> and <code>message</code> to our <code>form()</code> method. “`php // … inside the My_Custom_Widget class … /** <ul> <li>Back-end widget form.</li> </ul> * <ul> <li>@see WP_Widget::form()</li> </ul> * <ul> <li>@param array $instance Previously saved values from database.</li> </ul> */ public function form( $instance ) { // Set default values if the instance is not set. $title = ! empty( $instance[‘title’] ) ? $instance[‘title’] : esc_html__( ‘Default Title’, ‘text_domain’ ); $message = ! empty( $instance[‘message’] ) ? $instance[‘message’] : esc_html__( ‘This is my custom message!’, ‘text_domain’ ); ?> <label for="<?php echo esc_attr( $this->get_field_id( ‘title’ ) ); ?>”> <?php esc_html_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 ); ?>“> <label for="<?php echo esc_attr( $this->get_field_id( ‘message’ ) ); ?>”> <?php esc_html_e( 'Message:', 'text_domain' ); ?> </label> <textarea class="widefat" id="<?php echo esc_attr( $this->get_field_id( ‘message’ ) ); ?>” name=”<?php echo esc_attr( $this->get_field_name( ‘message’ ) ); ?>” rows=”4″><?php echo esc_textarea( $message ); ?>




}
// … rest of the class and registration …
“`
Here’s what’s important in the form() method:

Retrieving Current Values: We again fetch title and message from $instance, providing defaults. This ensures that when a user edits an existing widget, the fields are pre-filled with their saved settings.
Crucial WordPress Helper Functions:
$this->get_field_id( 'title' ): This method generates a unique HTML id for each form field. It ensures that IDs are unique for each widget instance and field name. For example, it might produce my_custom_widget-123-title.
$this->get_field_name( 'title' ): This method generates the name attribute for form inputs. This is how WordPress knows which values belong to which widget field when they are submitted. It typically looks like widget-my_custom_widget[123][title]. The [123] part is the unique ID for the widget instance.
Input Fields:
Title: We use a standard  for the title. esc_attr() is used to safely output the values for the id, name, and value attributes.
Message: We use a </code> to allow for multi-line text input for the message. <code>esc_textarea()</code> is used to safely output the content within the <code><textarea></code> tags.</li>
<li><strong>Labels and WordPress Translation:</strong> <code>esc_html_e()</code> is used for translating labels, ensuring your widget can be translated into different languages.</li>
</ul>
<p>Now, when you go to your widget area in WordPress admin, you’ll see fields for “Title” and “Message” for your custom widget, and you can enter your own content.</p>
<p>If you’re looking to enhance your WordPress site further, you might find it beneficial to explore how to implement payment systems effectively. A great resource for this is an article that discusses various methods of integrating payment gateways into your WordPress site. You can read more about it in this informative piece on <a href='https://thesheryar.com/make-payment/'>making payments</a>. This knowledge can complement your understanding of building custom widgets using the modern WP_Widget class, allowing you to create more dynamic and functional user experiences.</p>
<h2>Saving the Data: The <code>update()</code> Method</h2>
<p>So, you’ve built the form, but when you save your widget settings, where do they go? That’s where the <code>update()</code> method comes in.</p>
<h3>The <code>update()</code> Method Explained</h3>
<p>The <code>update()</code> method is responsible for taking the data submitted from the <code>form()</code> and sanitizing it before saving it to the database. It receives two arguments:</p>
<ul>
<li><code>$new_instance</code>: An array containing the new values submitted from the form.</li>
<li><code>$old_instance</code>: An array containing the previously saved values for this widget instance.</li>
</ul>
<p>This method must <em>return</em> an array of the sanitized values that will be saved to the database.</p>
<h3>Sanitizing and Saving Widget Options</h3>
<p>It’s vital to sanitize all user input to prevent security vulnerabilities like cross-site scripting (XSS). WordPress provides several sanitization functions.</p>
<p>Let’s update our <code>update()</code> method.</p>
<p>“`php</p>
<p>// … inside the My_Custom_Widget class …</p>
<p>/**</p>
<ul>
<li>Sanitize widget form values as they are saved.</li>
</ul>
<p>*</p>
<ul>
<li>@see WP_Widget::update()</li>
</ul>
<p>*</p>
<ul>
<li>@param array $new_instance Values just sent to be saved.</li>
<li>@param array $old_instance Previously saved values from database.</li>
</ul>
<p>*</p>
<ul>
<li>@return array Updated safe values to be saved.</li>
</ul>
<p>*/</p>
<p>public function update( $new_instance, $old_instance ) {</p>
<p>$instance = array(); // Initialize an empty array to store the sanitized values.</p>
<p>// Sanitize the title.</p>
<p>$instance[‘title’] = ( ! empty( $new_instance[‘title’] ) ) ? sanitize_text_field( $new_instance[‘title’] ) : ”;</p>
<p>// Sanitize the message, allowing some HTML tags.</p>
<p>// wp_kses_post() is good for this, but you might want more control.</p>
<p>// For this simple example, we’ll use sanitize_textarea_field which strips most tags.</p>
<p>// If you want to allow specific HTML, use wp_kses() with an allowed HTML array.</p>
<p>$instance[‘message’] = ( ! empty( $new_instance[‘message’] ) ) ? sanitize_textarea_field( $new_instance[‘message’] ) : ”;</p>
<p>// If you wanted to allow specific HTML tags like <b> and <i> for the message:</p>
<p>/*</p>
<p>$allowed_html = array(</p>
<p>‘a’      => array(</p>
<p>‘href’   => array(),</p>
<p>‘title’  => array(),</p>
<p>),</p>
<p>‘br’     => array(),</p>
<p>’em’     => array(),</p>
<p>‘strong’ => array(),</p>
<p>);</p>
<p>$instance[‘message’] = ( ! empty( $new_instance[‘message’] ) ) ? wp_kses( $new_instance[‘message’], $allowed_html ) : ”;</p>
<p>*/</p>
<p>return $instance; // Return the sanitized values to be saved.</p>
<p>}</p>
<p>// … rest of the class and registration …</p>
<p>“`</p>
<p>Let’s break down this critical method:</p>
<ul>
<li><strong>Initialize <code>$instance</code>:</strong> We start with an empty array <code>$instance</code> that will hold our cleaned-up data.</li>
<li><strong>Sanitizing the Title:</strong></li>
<li><code>sanitize_text_field()</code>: This is the go-to function for sanitizing single-line text inputs. It removes unwanted tags and characters, making it safe for general text.</li>
<li>We check if the input is not empty and then sanitize it. If it’s empty, we set it to an empty string.</li>
<li><strong>Sanitizing the Message:</strong></li>
<li><code>sanitize_textarea_field()</code>: This is a good option for multi-line text areas. It removes most HTML tags and attributes, ensuring plain text.</li>
<li><strong>Advanced HTML Sanitization (Commented Out):</strong> The commented section shows how you could use <code>wp_kses()</code> to allow specific HTML tags if you wanted your users to format their messages (e.g., bold or links). You define an array <code>$allowed_html</code> specifying which tags and attributes are permitted.</li>
<li><strong><code>wp_kses_post()</code> revisited:</strong> Notice in the <code>widget()</code> method, we used <code>wp_kses_post($message)</code>. This is actually a more appropriate choice for the <em>output</em> of the message if you <em>had</em> allowed certain HTML during sanitization (e.g., using <code>wp_kses</code> in <code>update</code>). For this specific <code>update</code> example where <code>sanitize_textarea_field</code> is used, there’s little to no HTML to sanitize, so it doesn’t make a difference <em>in this specific setup</em>. But it’s good to remember the distinction between sanitizing input and safely displaying output.</li>
<li><strong>Return Sanitized Values:</strong> The method <em>must</em> return the <code>$instance</code> array containing the sanitized values. If you don’t return anything, the widget settings won’t be saved at all.</li>
</ul>
<p>With these changes, your widget settings will now be saved securely when a user clicks the “Save” button in the widget admin.</p>
<h2>Styling Your Widget: Adding CSS</h2>
<p>Your widget is functional, but it might look a bit plain. Let’s add some CSS to make it stand out.</p>
<h3>Options for Enqueuing Stylesheets</h3>
<p>You have a few ways to add custom CSS:</p>
<ul>
<li><strong>Theme’s <code>style.css</code>:</strong> For theme-specific widgets, you can add CSS to your theme’s <code>style.css</code> file.</li>
<li><strong>Plugin-Specific Stylesheet:</strong> For widgets included in a plugin, it’s best practice to enqueue a separate stylesheet for your plugin. This avoids conflicts and keeps your code organized.</li>
</ul>
<p>Let’s go with the plugin-specific stylesheet approach.</p>
<h3>Enqueuing Styles in Your Plugin</h3>
<p>You’ll need to add a new function to your <code>my-custom-widget.php</code> file to enqueue your stylesheet.</p>
<p>First, create a <code>css</code> folder in your plugin’s directory and add a file named <code>widget-styles.css</code>.</p>
<p><strong><code>my-awesome-widget-plugin/widget-styles.css</code>:</strong></p>
<p>“`css</p>
<p>.widget_my_custom_widget .my-custom-widget-content {</p>
<p>padding: 10px;</p>
<p>background-color: #f0f0f0; /<em> Light grey background </em>/</p>
<p>border-left: 4px solid #0073aa; /<em> WordPress blue accent </em>/</p>
<p>margin-bottom: 15px; /<em> Space below the widget </em>/</p>
<p>}</p>
<p>.widget_my_custom_widget .my-custom-widget-content p {</p>
<p>margin-bottom: 0; /<em> Remove default paragraph margin if it looks odd </em>/</p>
<p>}</p>
<p>/<em> You can add more styles for different elements within your widget </em>/</p>
<p>“`</p>
<p>Now, add the following code to your <code>my-custom-widget.php</code> file, ideally outside the class definition:</p>
<p>“`php</p>
<p><?php</p>
<p>// … existing code …</p>
<p>/**</p>
<ul>
<li>Enqueue widget-specific styles.</li>
</ul>
<p>*/</p>
<p>function my_custom_widget_enqueue_styles() {</p>
<p>// Only enqueue if it’s a widget page or the frontend.</p>
<p>// This is a basic check; you might want more sophisticated logic.</p>
<p>if ( is_active_widget( false, false, $this->id_base, true ) || is_admin() ) {</p>
<p>wp_enqueue_style(</p>
<p>‘my-custom-widget-styles’, // Handle</p>
<p>plugin_dir_url( __FILE__ ) . ‘css/widget-styles.css’, // Path to your CSS file</p>
<p>array(), // Dependencies</p>
<p>‘1.0’ // Version</p>
<p>);</p>
<p>}</p>
<p>}</p>
<p>add_action( ‘widget_enqueue_scripts’, ‘my_custom_widget_enqueue_styles’ );</p>
<p>?></p>
<p>“`</p>
<p>Let’s break down the styling part:</p>
<ul>
<li><strong><code>my_custom_widget_enqueue_styles()</code> Function:</strong> This function is responsible for enqueuing our stylesheet.</li>
<li><strong><code>is_active_widget()</code> Check:</strong> This is a helpful WordPress function to check if a widget of a specific base ID is currently active or being displayed. The <code>is_admin()</code> check ensures styles are also loaded in the admin if needed, for example, for a live preview. This prevents loading unnecessary styles on every page.</li>
<li><strong><code>wp_enqueue_style()</code>:</strong> This is the standard WordPress function for adding CSS files.</li>
<li><code>'my-custom-widget-styles'</code>: A unique name (handle) for your stylesheet.</li>
<li><code>plugin_dir_url( __FILE__ ) . 'css/widget-styles.css'</code>: This dynamically builds the correct URL to your CSS file using the plugin’s directory URL.</li>
<li><code>array()</code>: Any dependencies. For a simple CSS file, this is usually empty.</li>
<li><code>'1.0'</code>: The version number. It’s good practice to increment this when you update the CSS file to bypass browser caching.</li>
<li><strong><code>add_action( 'widget_enqueue_scripts', 'my_custom_widget_enqueue_styles' );</code>:</strong> This hook ensures your <code>enqueue_styles</code> function runs at the appropriate time when WordPress is loading scripts and styles for widgets.</li>
</ul>
<p>With this setup, your custom CSS will be loaded only when your widget is active, keeping your site performant.</p>
<h2>Advanced Features and Next Steps</h2>
<p>You’ve built a solid, basic widget. But WordPress widgets can do much more.</p>
<h3>Handling More Complex Fields</h3>
<p>Your forms can include various field types:</p>
<ul>
<li><strong>Checkboxes:</strong> For boolean options (e.g., “Show Title”).</li>
<li><strong>Radio Buttons:</strong> For selecting one option from a few.</li>
<li><strong>Dropdowns (<code><select></code>):</strong> For a longer list of choices.</li>
<li><strong>Media Uploads:</strong> For allowing users to select images or other media. This is more involved and often requires custom JavaScript.</li>
<li><strong>Color Pickers:</strong> For selecting colors. Again, usually requires JavaScript.</li>
</ul>
<p>The principle remains the same: add the HTML input element to your <code>form()</code> method and use the appropriate sanitization function in your <code>update()</code> method.</p>
<h3>Internationalization (Making Your Widget Translatable)</h3>
<p>We’ve used <code>esc_html__()</code> and <code>esc_html_e()</code> throughout the code. This is crucial for internationalization. By wrapping all user-facing strings in these functions and specifying a text domain (e.g., <code>'text_domain'</code> in our example, which should be unique to your plugin), you make your widget compatible with translation plugins like Loco Translate or Poedit. You’ll generate <code>.po</code> and <code>.mo</code> files for each language your widget supports.</p>
<h3>Widget Widgets</h3>
<p>You can create widgets that are essentially wrappers around existing WordPress features. For instance, you could create a widget that displays a specific category’s posts in a custom format, or a widget that integrates with a specific plugin’s shortcode.</p>
<h3>Widget Dependencies and JavaScript</h3>
<p>For more interactive widgets, you’ll likely need to enqueue JavaScript files. You would use <code>wp_enqueue_script()</code> similar to how we used <code>wp_enqueue_style()</code>, hooking into <code>wp_enqueue_scripts</code> or even <code>admin_enqueue_scripts</code> for the widget’s admin form.</p>
<h3>Security Best Practices</h3>
<ul>
<li><strong>Always Sanitize Input:</strong> Never trust user input directly. Use WordPress’s built-in sanitization functions.</li>
<li><strong>Escape Output:</strong> Always escape data before displaying it on the front-end or in the admin area using functions like <code>esc_html()</code>, <code>esc_attr()</code>, <code>esc_url()</code>, or <code>wp_kses_post()</code>.</li>
<li><strong>Validate Data:</strong> Beyond sanitization, ensure data conforms to expected formats (e.g., numbers are actually numbers, dates are valid dates).</li>
<li><strong>Use WordPress Nonces:</strong> For forms that perform actions (like saving settings), use WordPress nonces to verify that the request comes from your WordPress site and hasn’t been tampered with. The <code>check_admin_referer()</code> function is key here, typically used within the <code>update()</code> method.</li>
</ul>
<p>By following these steps, you’ve successfully built a custom WordPress widget using the modern <code>WP_Widget</code> class. This skill opens up a world of possibilities for customizing your WordPress site beyond what’s available out-of-the-box. Experiment with different form fields, styling, and functionality – the WordPress widget API is powerful and flexible!</p>
				</div>
					</div>
				</div>
				</div>
				<footer data-elementor-type="footer" data-elementor-id="37" class="elementor elementor-37 elementor-location-footer" data-elementor-post-type="elementor_library">
			<footer class="elementor-element elementor-element-9da27f1 e-flex e-con-boxed e-con e-parent" data-id="9da27f1" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-54b8d58 e-con-full e-flex e-con e-child" data-id="54b8d58" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-46df351 elementor-widget elementor-widget-image" data-id="46df351" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
																<a href="https://thesheryar.com">
							<img width="544" height="188" src="https://thesheryar.com/wp-content/uploads/source-02-1.png" class="attachment-full size-full wp-image-2398" alt="" srcset="https://thesheryar.com/wp-content/uploads/source-02-1.png 544w, https://thesheryar.com/wp-content/uploads/source-02-1-300x104.png 300w" sizes="(max-width: 544px) 100vw, 544px" />								</a>
															</div>
				<div class="elementor-element elementor-element-cf36300 e-grid-align-left elementor-shape-rounded elementor-grid-0 elementor-widget elementor-widget-global elementor-global-919 elementor-widget-social-icons" data-id="cf36300" data-element_type="widget" data-e-type="widget" data-widget_type="social-icons.default">
							<div class="elementor-social-icons-wrapper elementor-grid" role="list">
							<span class="elementor-grid-item" role="listitem">
					<a class="elementor-icon elementor-social-icon elementor-social-icon-linkedin-in elementor-repeater-item-00771c7" href="https://www.linkedin.com/in/thesheryar/" target="_blank">
						<span class="elementor-screen-only">Linkedin-in</span>
						<svg aria-hidden="true" class="e-font-icon-svg e-fab-linkedin-in" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg>					</a>
				</span>
							<span class="elementor-grid-item" role="listitem">
					<a class="elementor-icon elementor-social-icon elementor-social-icon-x-twitter elementor-repeater-item-2504d32" href="https://x.com/thesheryarcom" target="_blank">
						<span class="elementor-screen-only">X-twitter</span>
						<svg aria-hidden="true" class="e-font-icon-svg e-fab-x-twitter" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></svg>					</a>
				</span>
							<span class="elementor-grid-item" role="listitem">
					<a class="elementor-icon elementor-social-icon elementor-social-icon-wordpress elementor-repeater-item-0d7d4c4" href="https://profiles.wordpress.org/thesheryar/" target="_blank">
						<span class="elementor-screen-only">Wordpress</span>
						<svg aria-hidden="true" class="e-font-icon-svg e-fab-wordpress" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M61.7 169.4l101.5 278C92.2 413 43.3 340.2 43.3 256c0-30.9 6.6-60.1 18.4-86.6zm337.9 75.9c0-26.3-9.4-44.5-17.5-58.7-10.8-17.5-20.9-32.4-20.9-49.9 0-19.6 14.8-37.8 35.7-37.8.9 0 1.8.1 2.8.2-37.9-34.7-88.3-55.9-143.7-55.9-74.3 0-139.7 38.1-177.8 95.9 5 .2 9.7.3 13.7.3 22.2 0 56.7-2.7 56.7-2.7 11.5-.7 12.8 16.2 1.4 17.5 0 0-11.5 1.3-24.3 2l77.5 230.4L249.8 247l-33.1-90.8c-11.5-.7-22.3-2-22.3-2-11.5-.7-10.1-18.2 1.3-17.5 0 0 35.1 2.7 56 2.7 22.2 0 56.7-2.7 56.7-2.7 11.5-.7 12.8 16.2 1.4 17.5 0 0-11.5 1.3-24.3 2l76.9 228.7 21.2-70.9c9-29.4 16-50.5 16-68.7zm-139.9 29.3l-63.8 185.5c19.1 5.6 39.2 8.7 60.1 8.7 24.8 0 48.5-4.3 70.6-12.1-.6-.9-1.1-1.9-1.5-2.9l-65.4-179.2zm183-120.7c.9 6.8 1.4 14 1.4 21.9 0 21.6-4 45.8-16.2 76.2l-65 187.9C426.2 403 468.7 334.5 468.7 256c0-37-9.4-71.8-26-102.1zM504 256c0 136.8-111.3 248-248 248C119.2 504 8 392.7 8 256 8 119.2 119.2 8 256 8c136.7 0 248 111.2 248 248zm-11.4 0c0-130.5-106.2-236.6-236.6-236.6C125.5 19.4 19.4 125.5 19.4 256S125.6 492.6 256 492.6c130.5 0 236.6-106.1 236.6-236.6z"></path></svg>					</a>
				</span>
							<span class="elementor-grid-item" role="listitem">
					<a class="elementor-icon elementor-social-icon elementor-social-icon-github elementor-repeater-item-472a732" href="https://github.com/thesheryar" target="_blank">
						<span class="elementor-screen-only">Github</span>
						<svg aria-hidden="true" class="e-font-icon-svg e-fab-github" viewBox="0 0 496 512" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>					</a>
				</span>
							<span class="elementor-grid-item" role="listitem">
					<a class="elementor-icon elementor-social-icon elementor-social-icon-wordpress elementor-repeater-item-4a501ec" target="_blank">
						<span class="elementor-screen-only">Wordpress</span>
						<svg aria-hidden="true" class="e-font-icon-svg e-fab-wordpress" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M61.7 169.4l101.5 278C92.2 413 43.3 340.2 43.3 256c0-30.9 6.6-60.1 18.4-86.6zm337.9 75.9c0-26.3-9.4-44.5-17.5-58.7-10.8-17.5-20.9-32.4-20.9-49.9 0-19.6 14.8-37.8 35.7-37.8.9 0 1.8.1 2.8.2-37.9-34.7-88.3-55.9-143.7-55.9-74.3 0-139.7 38.1-177.8 95.9 5 .2 9.7.3 13.7.3 22.2 0 56.7-2.7 56.7-2.7 11.5-.7 12.8 16.2 1.4 17.5 0 0-11.5 1.3-24.3 2l77.5 230.4L249.8 247l-33.1-90.8c-11.5-.7-22.3-2-22.3-2-11.5-.7-10.1-18.2 1.3-17.5 0 0 35.1 2.7 56 2.7 22.2 0 56.7-2.7 56.7-2.7 11.5-.7 12.8 16.2 1.4 17.5 0 0-11.5 1.3-24.3 2l76.9 228.7 21.2-70.9c9-29.4 16-50.5 16-68.7zm-139.9 29.3l-63.8 185.5c19.1 5.6 39.2 8.7 60.1 8.7 24.8 0 48.5-4.3 70.6-12.1-.6-.9-1.1-1.9-1.5-2.9l-65.4-179.2zm183-120.7c.9 6.8 1.4 14 1.4 21.9 0 21.6-4 45.8-16.2 76.2l-65 187.9C426.2 403 468.7 334.5 468.7 256c0-37-9.4-71.8-26-102.1zM504 256c0 136.8-111.3 248-248 248C119.2 504 8 392.7 8 256 8 119.2 119.2 8 256 8c136.7 0 248 111.2 248 248zm-11.4 0c0-130.5-106.2-236.6-236.6-236.6C125.5 19.4 19.4 125.5 19.4 256S125.6 492.6 256 492.6c130.5 0 236.6-106.1 236.6-236.6z"></path></svg>					</a>
				</span>
					</div>
						</div>
				</div>
		<div class="elementor-element elementor-element-1c773c1 e-con-full e-flex e-con e-child" data-id="1c773c1" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-099b003 elementor-widget elementor-widget-heading" data-id="099b003" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
					<h2 class="elementor-heading-title elementor-size-default">Email Contact</h2>				</div>
				<div class="elementor-element elementor-element-55083cf elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="55083cf" data-element_type="widget" data-e-type="widget" data-widget_type="icon-list.default">
							<ul class="elementor-icon-list-items">
							<li class="elementor-icon-list-item">
										<span class="elementor-icon-list-text">info@thesheryar.com</span>
									</li>
						</ul>
						</div>
				</div>
					</div>
				</footer>
		<footer class="elementor-element elementor-element-d3ffab7 e-flex e-con-boxed e-con e-parent" data-id="d3ffab7" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-1b89338 e-con-full e-flex e-con e-child" data-id="1b89338" data-element_type="container" data-e-type="container">
				<div class="elementor-element elementor-element-0aa3417 elementor-widget elementor-widget-heading" data-id="0aa3417" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
					<span class="elementor-heading-title elementor-size-default">Copyright © 2018-2026 TheSheryar LLC. </span>				</div>
				</div>
					</div>
				</footer>
				</footer>
		
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/hello-elementor/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
        <script id="independent-analytics-script"   >
            // Do not change this comment line otherwise Speed Optimizer won't be able to detect this script

            (function () {
                function sendRequest(url, body) {
                    if(!window.fetch) {
                        const xhr = new XMLHttpRequest();
                        xhr.open("POST", url, true);
                        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
                        xhr.send(JSON.stringify(body))
                        return
                    }

                    const request = fetch(url, {
                        method: 'POST',
                        body: JSON.stringify(body),
                        keepalive: true,
                        headers: {
                            'Content-Type': 'application/json;charset=UTF-8'
                        }
                    });
                }
                const calculateParentDistance = (child, parent) => {
                    let count = 0;
                    let currentElement = child;

                    // Traverse up the DOM tree until we reach parent or the top of the DOM
                    while (currentElement && currentElement !== parent) {
                        currentElement = currentElement.parentNode;
                        count++;
                    }

                    // If parent was not found in the hierarchy, return -1
                    if (!currentElement) {
                        return -1; // Indicates parent is not an ancestor of element
                    }

                    return count; // Number of layers between element and parent
                }
                const isMatchingClass = (linkRule, href, classes, ids) => {
                    return classes.includes(linkRule.value)
                }
                const isMatchingId = (linkRule, href, classes, ids) => {
                    return ids.includes(linkRule.value)
                }
                const isMatchingDomain = (linkRule, href, classes, ids) => {
                    if(!URL.canParse(href)) {
                        return false
                    }

                    const url = new URL(href)
                    const host = url.host
                    const hostsToMatch = [host]

                    if(host.startsWith('www.')) {
                        hostsToMatch.push(host.substring(4))
                    } else {
                        hostsToMatch.push('www.' + host)
                    }

                    return hostsToMatch.includes(linkRule.value)
                }
                const isMatchingExtension = (linkRule, href, classes, ids) => {
                    if(!URL.canParse(href)) {
                        return false
                    }

                    const url = new URL(href)

                    return url.pathname.endsWith('.' + linkRule.value)
                }
                const isMatchingSubdirectory = (linkRule, href, classes, ids) => {
                    if(!URL.canParse(href)) {
                        return false
                    }

                    const url = new URL(href)

                    return url.pathname.startsWith('/' + linkRule.value + '/')
                }
                const isMatchingProtocol = (linkRule, href, classes, ids) => {
                    if(!URL.canParse(href)) {
                        return false
                    }

                    const url = new URL(href)

                    return url.protocol === linkRule.value + ':'
                }
                const isMatchingExternal = (linkRule, href, classes, ids) => {
                    if(!URL.canParse(href) || !URL.canParse(document.location.href)) {
                        return false
                    }

                    const matchingProtocols = ['http:', 'https:']
                    const siteUrl = new URL(document.location.href)
                    const linkUrl = new URL(href)

                    // Links to subdomains will appear to be external matches according to JavaScript,
                    // but the PHP rules will filter those events out.
                    return matchingProtocols.includes(linkUrl.protocol) && siteUrl.host !== linkUrl.host
                }
                const isMatch = (linkRule, href, classes, ids) => {
                    switch (linkRule.type) {
                        case 'class':
                            return isMatchingClass(linkRule, href, classes, ids)
                        case 'id':
                            return isMatchingId(linkRule, href, classes, ids)
                        case 'domain':
                            return isMatchingDomain(linkRule, href, classes, ids)
                        case 'extension':
                            return isMatchingExtension(linkRule, href, classes, ids)
                        case 'subdirectory':
                            return isMatchingSubdirectory(linkRule, href, classes, ids)
                        case 'protocol':
                            return isMatchingProtocol(linkRule, href, classes, ids)
                        case 'external':
                            return isMatchingExternal(linkRule, href, classes, ids)
                        default:
                            return false;
                    }
                }
                const track = (element) => {
                    const href = element.href ?? null
                    const classes = Array.from(element.classList)
                    const ids = [element.id]
                    const linkRules = [{"type":"extension","value":"pdf"},{"type":"extension","value":"zip"},{"type":"protocol","value":"mailto"},{"type":"protocol","value":"tel"}]
                    if(linkRules.length === 0) {
                        return
                    }

                    // For link rules that target an id, we need to allow that id to appear
                    // in any ancestor up to the 7th ancestor. This loop looks for those matches
                    // and counts them.
                    linkRules.forEach((linkRule) => {
                        if(linkRule.type !== 'id') {
                            return;
                        }

                        const matchingAncestor = element.closest('#' + linkRule.value)

                        if(!matchingAncestor || matchingAncestor.matches('html, body')) {
                            return;
                        }

                        const depth = calculateParentDistance(element, matchingAncestor)

                        if(depth < 7) {
                            ids.push(linkRule.value)
                        }
                    });

                    // For link rules that target a class, we need to allow that class to appear
                    // in any ancestor up to the 7th ancestor. This loop looks for those matches
                    // and counts them.
                    linkRules.forEach((linkRule) => {
                        if(linkRule.type !== 'class') {
                            return;
                        }

                        const matchingAncestor = element.closest('.' + linkRule.value)

                        if(!matchingAncestor || matchingAncestor.matches('html, body')) {
                            return;
                        }

                        const depth = calculateParentDistance(element, matchingAncestor)

                        if(depth < 7) {
                            classes.push(linkRule.value)
                        }
                    });

                    const hasMatch = linkRules.some((linkRule) => {
                        return isMatch(linkRule, href, classes, ids)
                    })

                    if(!hasMatch) {
                        return
                    }

                    const url = "https://thesheryar.com/wp-content/plugins/independent-analytics/iawp-click-endpoint.php";
                    const body = {
                        href: href,
                        classes: classes.join(' '),
                        ids: ids.join(' '),
                        ...{"payload":{"resource":"singular","singular_id":2550,"page":1},"signature":"087189ae664ce6b11302426796feab94"}                    };

                    sendRequest(url, body)
                }
                let hasSearched = false;
                function search() {
                    if(hasSearched) {
                        return;
                    }
                    hasSearched = true;

                    if (document.hasOwnProperty("visibilityState") && document.visibilityState === "prerender") {
                        return;
                    }

                                            if (navigator.webdriver || /bot|crawler|spider|crawling|semrushbot|chrome-lighthouse/i.test(navigator.userAgent)) {
                            return;
                        }
                    
                    let referrer_url = null;

                    if (typeof document.referrer === 'string' && document.referrer.length > 0) {
                        referrer_url = document.referrer;
                    }

                    const params = location.search.slice(1).split('&').reduce((acc, s) => {
                        const [k, v] = s.split('=');
                        return Object.assign(acc, {[k]: v});
                    }, {});

                    const url = "https://thesheryar.com/wp-json/iawp/search";
                    const body = {
                        referrer_url,
                        utm_source: params.utm_source,
                        utm_medium: params.utm_medium,
                        utm_campaign: params.utm_campaign,
                        utm_term: params.utm_term,
                        utm_content: params.utm_content,
                        gclid: params.gclid,
                        ...{"payload":{"resource":"singular","singular_id":2550,"page":1},"signature":"087189ae664ce6b11302426796feab94"}                    };

                    sendRequest(url, body)
                }
                document.addEventListener('mousedown', function (event) {
                                        if (navigator.webdriver || /bot|crawler|spider|crawling|semrushbot|chrome-lighthouse/i.test(navigator.userAgent)) {
                        return;
                    }
                    
                    const element = event.target.closest('a')

                    if(!element) {
                        return
                    }

                    const isPro = false
                    if(!isPro) {
                        return
                    }

                    // Don't track left clicks with this event. The click event is used for that.
                    if(event.button === 0) {
                        return
                    }

                    track(element)
                })
                document.addEventListener('click', function (event) {
                                        if (navigator.webdriver || /bot|crawler|spider|crawling|semrushbot|chrome-lighthouse/i.test(navigator.userAgent)) {
                        return;
                    }
                    
                    const element = event.target.closest('a, button, input[type="submit"], input[type="button"]')

                    if(!element) {
                        return
                    }

                    const isPro = false
                    if(!isPro) {
                        return
                    }

                    track(element)
                })
                document.addEventListener('play', function (event) {
                                        if (navigator.webdriver || /bot|crawler|spider|crawling|semrushbot|chrome-lighthouse/i.test(navigator.userAgent)) {
                        return;
                    }
                    
                    const element = event.target.closest('audio, video')

                    if(!element) {
                        return
                    }

                    const isPro = false
                    if(!isPro) {
                        return
                    }

                    track(element)
                }, true)
                document.addEventListener("DOMContentLoaded", function (e) {
                    search();
                });
                document.addEventListener("iawpSearch", function (e) {
                    search();
                });
            })();
        </script>
        <script src="https://thesheryar.com/wp-content/themes/hello-elementor/assets/js/hello-frontend.js?ver=3.4.7" id="hello-theme-frontend-js"></script>
<script src="https://thesheryar.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=4.0.7" id="elementor-webpack-runtime-js"></script>
<script src="https://thesheryar.com/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=4.0.7" id="elementor-frontend-modules-js"></script>
<script src="https://thesheryar.com/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js"></script>
<script id="elementor-frontend-js-before">
var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Share on Facebook","shareOnTwitter":"Share on Twitter","pinIt":"Pin it","download":"Download","downloadImage":"Download image","fullscreen":"Fullscreen","zoom":"Zoom","share":"Share","playVideo":"Play Video","previous":"Previous","next":"Next","close":"Close","a11yCarouselPrevSlideMessage":"Previous slide","a11yCarouselNextSlideMessage":"Next slide","a11yCarouselFirstSlideMessage":"This is the first slide","a11yCarouselLastSlideMessage":"This is the last slide","a11yCarouselPaginationBulletMessage":"Go to slide"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile Portrait","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Landscape","value":880,"default_value":880,"direction":"max","is_enabled":true},"tablet":{"label":"Tablet Portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Landscape","value":1200,"default_value":1200,"direction":"max","is_enabled":true},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":true},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":true}},"hasCustomBreakpoints":true},"version":"4.0.7","is_static":false,"experimentalFeatures":{"e_font_icon_svg":true,"additional_custom_breakpoints":true,"container":true,"e_optimized_markup":true,"theme_builder_v2":true,"hello-theme-header-footer":true,"nested-elements":true,"global_classes_should_enforce_capabilities":true,"e_variables":true,"e_opt_in_v4_page":true,"e_components":true,"e_interactions":true,"e_widget_creation":true,"import-export-customization":true,"e_pro_atomic_form":true,"e_pro_variables":true,"e_pro_interactions":true},"urls":{"assets":"https:\/\/thesheryar.com\/wp-content\/plugins\/elementor\/assets\/","ajaxurl":"https:\/\/thesheryar.com\/wp-admin\/admin-ajax.php","uploadUrl":"https:\/\/thesheryar.com\/wp-content\/uploads"},"nonces":{"floatingButtonsClickTracking":"14a8794e91","atomicFormsSendForm":"9432046998"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"body_background_background":"classic","active_breakpoints":["viewport_mobile","viewport_mobile_extra","viewport_tablet","viewport_tablet_extra","viewport_laptop","viewport_widescreen"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description","hello_header_logo_type":"logo","hello_header_menu_layout":"horizontal","hello_footer_logo_type":"logo"},"post":{"id":2550,"title":"How%20to%20build%20a%20WordPress%20widget%20using%20the%20modern%20WP_Widget%20class%3F%20-%20TheSheryar","excerpt":"","featuredImage":false}};
//# sourceURL=elementor-frontend-js-before
</script>
<script src="https://thesheryar.com/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=4.0.7" id="elementor-frontend-js"></script>
<script src="https://thesheryar.com/wp-content/plugins/elementor-pro/assets/lib/smartmenus/jquery.smartmenus.min.js?ver=1.2.1" id="smartmenus-js"></script>
<script src="https://thesheryar.com/wp-content/plugins/elementor-pro/assets/lib/sticky/jquery.sticky.min.js?ver=4.0.4" id="e-sticky-js"></script>
<script src="https://thesheryar.com/wp-content/plugins/elementor-pro/assets/js/webpack-pro.runtime.min.js?ver=4.0.4" id="elementor-pro-webpack-runtime-js"></script>
<script src="https://thesheryar.com/wp-includes/js/dist/hooks.min.js?ver=dd5603f07f9220ed27f1" id="wp-hooks-js"></script>
<script src="https://thesheryar.com/wp-includes/js/dist/i18n.min.js?ver=c26c3dc7bed366793375" id="wp-i18n-js"></script>
<script id="wp-i18n-js-after">
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
//# sourceURL=wp-i18n-js-after
</script>
<script id="elementor-pro-frontend-js-before">
var ElementorProFrontendConfig = {"ajaxurl":"https:\/\/thesheryar.com\/wp-admin\/admin-ajax.php","nonce":"6374a8c2ee","urls":{"assets":"https:\/\/thesheryar.com\/wp-content\/plugins\/elementor-pro\/assets\/","rest":"https:\/\/thesheryar.com\/wp-json\/"},"settings":{"lazy_load_background_images":false},"popup":{"hasPopUps":false},"shareButtonsNetworks":{"facebook":{"title":"Facebook","has_counter":true},"twitter":{"title":"Twitter"},"linkedin":{"title":"LinkedIn","has_counter":true},"pinterest":{"title":"Pinterest","has_counter":true},"reddit":{"title":"Reddit","has_counter":true},"vk":{"title":"VK","has_counter":true},"odnoklassniki":{"title":"OK","has_counter":true},"tumblr":{"title":"Tumblr"},"digg":{"title":"Digg"},"skype":{"title":"Skype"},"stumbleupon":{"title":"StumbleUpon","has_counter":true},"mix":{"title":"Mix"},"telegram":{"title":"Telegram"},"pocket":{"title":"Pocket","has_counter":true},"xing":{"title":"XING","has_counter":true},"whatsapp":{"title":"WhatsApp"},"email":{"title":"Email"},"print":{"title":"Print"},"x-twitter":{"title":"X"},"threads":{"title":"Threads"}},"facebook_sdk":{"lang":"en_US","app_id":""},"lottie":{"defaultAnimationUrl":"https:\/\/thesheryar.com\/wp-content\/plugins\/elementor-pro\/modules\/lottie\/assets\/animations\/default.json"}};
//# sourceURL=elementor-pro-frontend-js-before
</script>
<script src="https://thesheryar.com/wp-content/plugins/elementor-pro/assets/js/frontend.min.js?ver=4.0.4" id="elementor-pro-frontend-js"></script>
<script src="https://thesheryar.com/wp-content/plugins/elementor-pro/assets/js/elements-handlers.min.js?ver=4.0.4" id="pro-elements-handlers-js"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://thesheryar.com/wp-includes/js/wp-emoji-release.min.js?ver=6.9.4"}}
</script>
<script type="module">
/*! This file is auto-generated */
const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))});
//# sourceURL=https://thesheryar.com/wp-includes/js/wp-emoji-loader.min.js
</script>

</body>
</html>

How to build a WordPress widget using the modern WP_Widget class?

What is a WordPress Widget?

The Power of `WP_Widget`

Where to Put Your Widget Code

Building Your First Custom Widget: The Core Essentials

Understanding the Widget Class Structure

Creating Your Widget Class

Populating the Widget: Displaying Content (`widget()` method)

The `widget()` Method Explained

Adding Content to the `widget()` Method

or
). `esc_html( $title )` ensures the title is displayed safely.

). `esc_html( $title )` ensures the title is displayed safely.

Configuring the Widget: The Admin Form (`form()` method)

The `form()` Method Explained

Creating Form Fields

How to build a WordPress widget using the modern WP_Widget class?

What is a WordPress Widget?

The Power of WP_Widget

Where to Put Your Widget Code

Building Your First Custom Widget: The Core Essentials

Understanding the Widget Class Structure

Creating Your Widget Class

Populating the Widget: Displaying Content (widget() method)

The widget() Method Explained

Adding Content to the widget() Method

or ). esc_html( $title ) ensures the title is displayed safely.

). esc_html( $title ) ensures the title is displayed safely.

Configuring the Widget: The Admin Form (form() method)

The form() Method Explained

Creating Form Fields

The Power of `WP_Widget`

Populating the Widget: Displaying Content (`widget()` method)

The `widget()` Method Explained

Adding Content to the `widget()` Method

or
). `esc_html( $title )` ensures the title is displayed safely.

). `esc_html( $title )` ensures the title is displayed safely.

Configuring the Widget: The Admin Form (`form()` method)

The `form()` Method Explained