How to Create a Custom Widget in WordPress
Posted on 20th June 2023
As a WordPress developer, you may be asked to create a custom widget for a client or a project. Widgets are a great way to add functionality to a WordPress site without having to write a lot of code. In this article, we will show you how to create a custom widget in WordPress.
Creating a Custom Widget in WordPress
To create a custom widget in WordPress, you will need to use the WordPress Widgets API. The Widgets API allows you to register new widgets and control how they are displayed on the front-end of your WordPress site.
To get started, you will need to create a new file in your WordPress plugin or theme. For this tutorial, we will be creating a file named widget-name.php.
You will then need to add the following code to your new file:
__( ‘A custom widget for WordPress’, ‘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 ) {
extract( $args );
echo $before_widget;
if ( ! empty( $instance[‘title’] ) ) {
echo $before_title . apply_filters( ‘widget_title’, $instance[‘title’] ). $after_title;
}
echo __( ‘Hello, World!’, ‘text_domain’ );
echo $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’ );
}
?>
<label for="get_field_name( ‘title’ ); ?>”>
<input class="widefat" id="get_field_id( ‘title’ ); ?>” name=”get_field_name( ‘title’ ); ?>” type=”text” value=”” />
In the code above, we first created a new file named widget-name.php. We then added a plugin header and created a new widget class. The widget class extends the WP_Widget class and it provides all the necessary functions to create a widget.
Next, we registered our widget using the widgets_init hook.
Lastly, we created a function to display our widget on the front-end. This function is called widget(). It accepts two arguments. The first argument is an array of parameters and the second argument is an array of saved values.
The display function will first check if there is a title set for our widget. If there is, it will display the title. Next, it will echo a “Hello, World!” message. Lastly, it will call the $after_widget variable which contains the closing HTML tags for our widget.
You can now go to the Widgets page under the Appearance menu in the WordPress admin area and you should see your new widget. You can add it to any sidebar on your WordPress site.
If you want to learn more about the WordPress Widgets API, we recommend checking out the following resources:
https://codex.wordpress.org/Widgets_API
Assuming you have basic knowledge of HTML, CSS, and JavaScript, let’s move on to the fun stuff. In this section, we’ll cover how to:
1. Choose and download a WordPress widget plugin
There are tons of great widget plugins available for free in the WordPress plugin repository. For this example, we’ll be using the WPForms plugin.
2. Install and activate your WordPress widget plugin
Once you’ve downloaded the plugin, head over to your WordPress dashboard and go to Plugins » Add New.
Click on the Upload Plugin button at the top of the page and select the plugin ZIP file you just downloaded. After installing and activating the plugin, you should see a new WPForms menu item in your WordPress dashboard.
3. Create a new WordPress widget
Now that the plugin is installed and activated, it’s time to create a new widget. Go to WPForms » Add New in your WordPress dashboard to create a new form.
For this example, we’ll be creating a simple contact form. Once you’ve created your form, click on the Embed tab and copy the shortcode for your form.
4. Add your WordPress widget to a sidebar
Now that you have your form shortcode, you can add your widget to any sidebar or widget-ready area in your WordPress theme.
Head over to Appearance » Widgets in your WordPress dashboard and drag and drop a new Text widget into your sidebar. Paste your form shortcode into the widget content area and save your changes.
5. Customize your WordPress widget’s appearance
The final step is to customize your widget’s appearance to match your site’s design. You can do this by adding some custom CSS to your WordPress theme.
If you’re not familiar with CSS, we recommend using the Simple Custom CSS plugin. Once you’ve installed and activated the plugin, go to Appearance » Custom CSS and add your CSS code.
For this example, we’ll be adding some basic styling to our contact form widget.
.wpforms-widget-form {
background: #fafafa;
padding: 20px;
border: 1px solid #e5e5e5;
}
.wpforms-widget-form h3 {
margin: 0 0 15px;
}
.wpforms-widget-form .wpforms-field {
margin-bottom: 15px;
}
.wpforms-widget-form .wpforms-field input[type=”text”],
.wpforms-widget-form .wpforms-field input[type=”email”],
.wpforms-widget-form .wpforms-field textarea {
width: 100%;
padding: 10px;
border: 1px solid #dddddd;
}
.wpforms-widget-form .wpforms-field input[type=”submit”] {
background: #00a0d2;
border: 0;
color: #ffffff;
padding: 10px;
cursor: pointer;
}
.wpforms-widget-form .wpforms-field input[type=”submit”]:hover {
background: #0085ba;
}
Now that you know how to create a custom WordPress widget, you can add any type of content to your sidebar or other widget-ready areas in your theme.
