How To Create A Widget Area In WordPress Theme

As we Learn before, How to Use Custom Post Type in WordPress Theme, now let’s dig a bit further and start learning How to create a Widget area in Custom WordPress theme.

To best understand the code I personally think that you should know the complete fully functional code first and then I’ll explain the code line by line so that you can easily understand what actually every line of code is doing for you. Now you need to follow 2 steps to get widget area functional.

Enable widget area functionality in WordPress Theme (Step 1)

Look for the file name function.php in your WordPress Theme folder. Add the following code in function.php to enable/register widget area functionality in your custom WordPress Theme

if (function_exists('register_sidebar')) {
    register_sidebar(array(
        'name' => 'Sidebar Widgets',
        'id'   => 'sidebar-widgets',
        'description'   => 'These are widgets for the sidebar.',
        'before_widget' => '<div id="%1$s" class="widget "%2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2>',
        'after_title'   => '</h2>'
    ));
}

Display widgets in WordPress Theme (Step 2)

Mostly developer makes their sidebar as a widget area. So following their trend, we will also make our sidebar as a widget area but you are not restricted to use only the sidebar. You can display anywhere in the theme you want your widget to appear. To do so, look for the file name “sidebar.php” in your WordPress Theme folder and add the following code in it.

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar Widgets')) : else : ?>
 
<?php endif; ?>

An explanation for register_sidebar Parameters

name – You must name the sidebar so you can call multiple widgets for different areas Like I use “Sidebar Widgets”. See Highlighted Lines in Step1 and Step2.
(NOTE: name should be exactly the same in both Step1 and Step2)

id – id is generally assigned to the HTML elements but in the case widget, we do not write HTML for this id. We just need to apply the CSS without writing HTML Because Html is generated itself with the given id. Must be all in lowercase, with no spaces.

description – Whatever description is added to this parameter it is displayed to the user within WordPress panel i.e. In the above case Appearance > Widgets > Sidebar Widgets. It helps Users to know what and where this widget is.

class – class name is assigned to the widget HTML, which works exactly the same as id. Class is automatically applied to the HTML element to which the id is applied because HTML is generated itself when the id attribute is added to the widget function in “function.php”

before_widget’ & ‘after_widget – HTML to place before every widget and after every widget respectively. It can be any HTML element and not necessarily by a “div”
(Note: uses sprintf for variable substitution.)

before_title’ & ‘after_title – HTML to place before every title and after every title respectively. We can also add class and id to this element and can style in CSS.

Dec 10 2017 By Dr X