There are plenty of tutorials and resources available online dedicated to help you learn about the process of creating custom WordPress widgets and how you can add them up to your theme. But, you may find those materials hard to understand. Especially, newbies often find them insufficient to implement, so as to add custom widgets to their website.
So, to help you out, I will be discussing about a basic tutorial on creating a custom sidebar widget that even the novices can understand easily. But, before that let’s first discuss about the most common concern among users!
What are WordPress Widgets?Widgets allows you to add static and dynamic content to your WordPress posts and page. They are also called executable scripts that you can drag and drop in your theme’s sidebar or other widget-ready areas to embed custom content and functions. The available widgetized areas will vary from one theme to another. You can find several types of widgets. WordPress comes packed with built-in widgets like post categories, tag clouds, navigation menu etc.
Adding a Custom Widget to Your Pages/Post
register_sidebar(array( 'name' => __('My first Custom Widget'), 'description' => __('You describe your widget here.'), 'id' => 'first-custom-widget', 'before_widget' => '', 'after_widget' => '', 'before_title' => ' ', 'after_title' => ' ' ));
As you can see in the above code, we’re registering only a single sidebar “my first Custom Widget”. Next, an array is declared with different values that are needed to create the custom widget. Let's talk about those values one by one:
Name: This helps to assign name to our custom widget. You can change this name to your Widget name.
Description: This is another parameter that helps to identify what will come in your theme’s sidebar.
id: This parameter is used to call the custom widget that you would like to display in your WordPress widgetized area.
before_widget: It places HTML before your custom widget.
after_widget: It places HTML after your custom widget.
before_title: This argument places your HTML before your custom widget title.
after_title: This argument positions your HTML after your custom widget title.
Once your custom widget is registered, you just need to drag and drop that widget into your WP theme. For this purpose, you will have to go to Appearance -> Widgets screen. Remember that your custom Widget won’t be visible on your theme until it is being called from the place you want to display it.
In order to use your custom widget in your WordPress website, simply copy and paste the following function in your functions.php file:
//my-first-custom-widget is the id of your widget
Next, go to your widgets panel and you’ll notice that your newly created “My first Custom Widget” will be visible in your WordPress back end (as you can see in the screenshot below). Finally, you can drag-and-drop the elements in your custom widget area that you want to display in your theme
Summing Up!Widgets are powerful tools that help to embed additional functionality into your WP theme. You can add them to your WordPress posts/page, however usually they get added to WordPress theme’s widget-ready areas including sidebar, header or any other widgetized regions. WordPress comes with default widgets, but you might feel the need to create a custom one tailored to fit your needs.
Reading this post will help you learn how you can create and add custom Widgets to your WordPress pages or posts.