Widgets in a WordPress website help to add content and features to the sidebar or any other widget-ready areas (like header, footer, etc.). The best aspect about using the widgets is that they let you drag-and-drop important elements into your site without taking up much space.
By default, WordPress comes packed with some widgets for tag clouds, search, navigation menu and so on. You can find all of the available widgets and widgetized regions simply by navigating to the Appearance → Widgets section of your WordPress website dashboard. In fact, you can find some built-in widgets in your WordPress plugins as well.
But, remember that the default widgets may not always match up to your needs. Moreover, as your website grows, you’ll probably feel the need to implement new features that cannot be obtained with the already existing widgets. In that case, choosing WordPress development services such as creating a custom widget to meet your specific needs will prove a viable solution for you.
Through this post, I would be discussing the process of how you can create a custom widget and a widget area for your WordPress site.
Creating a Custom Widget and Widget Area
Widget areas in a WordPress theme usually can be found in the sidebars. However, you can even choose to place your custom widget anywhere on a webpage. But, what if your theme doesn’t come with a pre-defined widget-area? If that’s the case, then before starting with the process of creating a custom widget, it would be better if you’ll create a widget-area where you’ll be adding the new widget.
In order to create a new widget-ready area for your WordPress website, you’ll need to register that widget area. Let’s assume you want to create a widget area for your theme sidebar with the name “My New Widget”, to get it registered, simply add the below given code snippet in your theme’s functions.php file:
__('My New Widget'),
'description' => __('Enter your widget description here.'),
'id' => 'first-widget',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h1>',
'after_title' => '</h1>'
) );
}
add_action( 'widgets_init', 'wordprax_widgets_init' );
?>
The code will register your newly created single widget area “My New Widget”. Besides this, an array is being declared containing a few different parameters along with some values. Each parameter value has a certain meaning:
• name: here you need to assign the name to your custom widget area (i.e. My New Widget).
• description: text description that help identifies where your theme’s sidebar widget area is.
• id: this is the unique id assigned to the new widget area.
• before_widget: places your HTML before your custom widget.
• after_widget: places HTML after your custom widget.
• before_title: positions your HTML before your custom widget title.
• after_title: places your HTML after your custom widget title.
So that your widget area has been created, it’s time to begin with the process of creating your custom widget. To do so, all you have to do is to extend the WP_Widget class and some of its functions. You can do so, by using the below given code that needs to be incorporated in your theme’s functions.php file:
class First_Widget extends WP_Widget {
function First_widget() {
$widget_ops = array('classname' => 'First_widget', 'description' => 'My New Widget' );
$this->WP_Widget('First_widget', 'My New Custom Widget', $widget_ops);
}
function widget() {
echo "Content of custom widget goes here";
}
}
add_action( 'widgets_init', create_function('', 'return register_widget("First_Widget");'));
For a beginner, the above code snippet may seem a little confusing. So, let’s break the code line by line to understand how it works:
• First off, we’re simply creating a class called “First_Widget” that extends our default WordPress class: WP_Widget. The class will contain our custom widget.
class First_Widget extends WP_Widget {
• And then, we’re defining a function (with the same name as that of class) for creating our custom widget.
function First_widget() {
• Next, we’re passing some parameters to the class “First_Widget” as follows:
$widget_ops = array('classname' => 'First_widget', 'description' => 'My New Widget' );
$this->WP_Widget('First_widget', 'My New Custom Widget', $widget_ops);
}
function widget() {
echo "My Test Widget Content";
}
}
• Now for getting the custom widget registered, we need to load the widget() using the widgets_init() function. The function contains a few arguments that will make a call to First_Widget() class:
add_action( 'widgets_init', create_function('', 'return register_widget("First_Widget");'));
That’s it! Hope you’ll have come to know how the code works, now let’s view the output you’ll get after executing the code:
So once you’ve completed the creation of custom widget, you just need to drag and drop it into your newly created widget area (i.e. My New Widget) in the dashboard as shown in the above screenshot. You can see how your custom widget “My New Custom Widget” has been added to the widget-area “My New Widget”.
Let’s Wrap Up!
A widget proves remarkably useful as it allows you to add some custom content or features to your WordPress theme – that doesn’t take much space – yet remains in front of your users. WordPress comes loaded with some default widgets most of which are typically added to the sidebar, or other widget-ready areas. However, with the increase of your website needs, you’ll most likely want to embed extra features to your website theme, something that the existing widgets doesn’t provide. This is where creating a custom widget comes in handy.
Going through this post will make you aware of the important aspects of WordPress widgets and will also help you understand the process of creating your own custom widget.
Author Bio :
Sophia Phillips has been working as a professional in custom WordPress development services provider company and loves sharing information about leveraging multiple benefits of WordPress CMS in the best possible manner. Currently, she has an impressive count of WordPress – related articles under her name.
{ 0 comments… add one now }