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.
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 also allows developers to create their own custom widgets. Lots of 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.
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.
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 appearance and to optimize the handling 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. Using the WordPress Plugin premium Galaxy Funder you will be able to manage your own crowdfunding website or add fundraising campaigns on the header of your WooCommerce online store.
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 | Demo | Web hosting
2. Click to WhatsApp Chat
Le WordPress Plugin premium Click to WhatsApp Chat makes it easy for WordPress customers to connect with the website owner or customer support using their WhatsApp account.
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 WordPress extension premium lets you easily add watermarks to your images Easy Digital Downloads.
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.
- 7 WordPress plugins to evaluate blog comments
- 5 WordPress plugins to better manage your newsletter
- 8 WordPress plugins to create a contact form
- How to open a Youtube video in a popup on WordPress
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.
...
