Skip to Main Content

How to create a custom widget on WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Do you want to create your own custom widgets on WordPress?

Widgets allow you to drag and drop items into any ready sidebar or widget area on your website. In this article, therefore, we will show you how to easily create a custom WordPress widget.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

Create a custom widget on wordpress

What is a WordPress widget?

WordPress widgets contain pieces of code that you can add to your website sidebars or widget-friendly areas. Think of it as modules that you can use to add different elements using a simple "Drag and Drop" interface.

By default, WordPress comes with a standard set of widgets that you can use with any WordPress theme. 

See also our best premium WordPress themes.

Wordpress dashboard widget

WordPress also allows developers to create their own custom widgets. Many themes and WordPress plugins come with their own custom widgets that you can add to your sidebars.

For example, you can add a contact form, a login form custom or a photo gallery in a sidebar without writing any code.

That said, let's see how to easily create your own custom widgets on WordPress.

How to create a custom widget on WordPress

This tutorial is for people who have knowledge of web development.

Before starting, it would be better to create a specific plugin on the website where you paste the widget code for this tutorial.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

You can also paste the code into the "functions.php" file of your WordPress theme. However, it will only be available when that particular WordPress theme is active.

In this tutorial, we will create a simple widget that will simply greet visitors. Look at this code, then paste it into your specific plugin to see it in action.

// Register and load the widget function wpb_load_widget () {register_widget ('wpb_widget'); } add_action ('widgets_init', 'wpb_load_widget'); // Creating the widget class wpb_widget extends WP_Widget {function __construct () {parent :: __ construct (// Base ID of your widget 'wpb_widget', // Widget name will appear in UI __ ('BPC Widget', 'wpb_widget_domain') , // Widget description array ('description' => __ ('Simple WordPress Widget', 'wpb_widget_domain'),)); } // Creating public front-end widget function widget ($ args, $ instance) {$ title = apply_filters ('widget_title', $ instance ['title']); // before and after widget arguments are defined by themes echo $ args ['before_widget']; if (! empty ($ title)) echo $ args ['before_title']. $ title. $ args ['after_title']; // This is where you run the code and display the output echo __ ('Simple Widget', 'wpb_widget_domain'); echo $ args ['after_widget']; } // Widget Backend public function form ($ instance) {if (isset ($ instance ['title'])) {$ title = $ instance ['title']; } else {$ title = __ ('New title', 'wpb_widget_domain'); } // Admin form widget?> get_field_id( 'title' ); ?>" name="get_field_name( 'title' ); ?>" type="text" value="" />

After adding the code, you must go to " Appearance> Widgets ". You will notice the new widget " BPC Widget In the list of available widgets. You must drag and drop this widget into a sidebar.

Wordpress custom widget

Now by visiting your blog, you will see a widget on the sidebar where you added the widget in question.

Now let's take a look at this code.

First we recorded “ wpb_widget And loaded our custom widget. Next, we defined what this widget does and how to display it on the dashboard.

Finally, we defined how to handle the changes made to the widget.

Now, there are a few things you may want to know. For example, what is the objective " wpb_text_domain »?

WordPress uses "gettext" to manage translation and localization. Therefore " wpb_text_domain "and __e tells gettext how to retrieve a translation string if it exists.

If you create a custom widget for your WordPress theme, you can replace "wpb_text_domain" with the text of the domain of your theme.

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. Galaxy Funder

Galaxy Funder is a feature-packed crowdfunding system designed for any WooCommerce website. By using the premium Galaxy Funder WordPress plugin you will be able to manage your own crowdfunding website or add fundraising campaigns on the header of your WooCommerce online store.

Galaxy funder woocommerce crowdfunding system plugin wordpress

You can also use any payment gateway supported by WooCommerce. Please note that “Galaxy Funder” works directly on the online store page, which makes the user contribution process easier.

Download | DemoWeb hosting

2. Click to WhatsApp Chat

The premium WordPress plugin Click to WhatsApp Chat allows WordPress customers to easily connect with the website owner or customer support using their WhatsApp account. 

Click to whatsapp chat for wordpress plugin

Just a click on the WhatsApp account and it will be directed directly to the mobile WhatsApp account with a default message. And if the client is on desktop or laptop, he will be redirected to WhatsApp Web.

This plugin requires the WhatsApp number and time and day, which the website owner or support team will use to discuss. Chat button can be added to WooCommerce product detail page, which is directly related to this product.

Download | Demo | Web hosting

3. Download Image Watermark

This premium WordPress plugin allows you to easily add watermarks to your images Easy Digital Downloads.easy-digital-file-download-image watermark

All of this watermarks can be a copyright symbol image, a company logo, or part of the branding as a transparent PNG image.

Download | Demo | Web hosting

Other recommended resources

We also invite you to consult the resources below to go further in the grip and control of your website and blog.

Conclusion

Here is ! That's all for this tutorial, I hope it will allow you to create custom widgets on your WordPress blog. If you have some Comments or suggestions, do not hesitate to let us know in the reserved section.

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks

...  

This article features 0 comments

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
10 shares
Share8
tweet1
Save1