How to add some Widget Area anywhere in WordPress Theme

It is really important to have some specific places to be used according to our needs. As most of the themes are prepared with some motive but still some web designers are never satisfied with the default appearance of WP-Themes.

Well you are at the right place, as even if you are familiar with the CSS and HTML Codes, you are prepared to add PHP Functions in WordPress Themes. Now, you will learn how to add a custom widget function in your current theme.

Note: Please back up your WordPress theme before editing anything or take a Whole Website Back Up

Step 1 – Adding Dynamic Function

Firstly, we are required to create a New Dynamic Function Widget(s) which is required to be added in the theme. (Note: we are talking about the function addition not the actual placement).

Please add the following piece of code into the Functions.php core file and please if you are not familiar with this then, please do not make any changes.

Code:

if (function_exists(‘register_sidebar’))

register_sidebar(array(

‘name’ => ‘Custom Widgets’,

‘id’ => ‘custom-widgets’,

‘description’ => ‘The description for custom widgets.’,

‘before_widget’ => ‘<div id=”%1$s”>’,

‘after_widget’ => ‘</div>’,

‘before_title’ => ‘<h2>’,

‘after_title’ => ‘</h2>’

));

Note: this piece of code won’t work in some functions file which ends with “?>” so the above code has to be added before “?>” in those cases.

After this is done you can check in the Widgets option that WordPress have added another widget option with name “Custom Widgets”. This is because we have named it as Custom Widgets and slug with custom-widgets which can be changed as per requirement along with the changes done in the placement code.

For example your theme doesn’t support Footer Widgets then, you can name it Footer Widgets and these will all Footer widgets option in your Widgets Section. (Note: this doesn’t means that Footer widgets are ready and/or they will automatically start appearing in Footer) but we are required to follow Step 2.

See: Adding Custom Footer Widgets to WordPress Theme

Step 2 – Placing the Widgets to be Added

Now we are required to add functions snippets to call the dynamic function and let Widgets created to appear. This code can be inserted anywhere to make Widgets visible by adding the below piece of code provided.

<?php if (!function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Custom Widgets’)) :

endif; ?>

Note: If you have changed the name (spaces also matter) of the Widget as mostly names according to their needs will have to manage name of the Widgets in this code also. You cannot use place a snippet anywhere in the theme with a name that doesn’t exists in the Functions.php and this can Stop Theme Functioning properly.

Enter this code into your theme files wherever required e.g. page.php, single.php, header.php, footer.php. It is understood that when you add this functionality in your Header or Footer file they automatically becomes common for all pages which loads Header file and Footer file.

But in case of Page.php or Single.php or any other file like that the functions become such a dynamic in nature that it will load and appear on that particular page that will load edit theme file. eg. You have added this snippet into the Page.php file then it will only show on Pages not on Posts or Categories. This way it will act similar like WordPress Plugin Dynamic Widgets.

How many Widgets can be added in WordPress Theme?

You can repeat this code as many times as you need to add another widgets section in your Theme but remember to replace “name” “id” and “Description” every time you adds another widget and do keep a latest Back Up of your WordPress Files and Database before making any changes.

Can I Customize the Visual Display of these Custom Widgets?

Yes, you can customize these widgets display and design them according by using correct CSS and HTML, where these options are managing their Class and ID’s

‘before_widget’ => ‘<div id=”%1$s”>’,

‘after_widget’ => ‘</div>’,

‘before_title’ => ‘<h2>’,

‘after_title’ => ‘</h2>’

i.e. Widget Title is in Heading 2 form and above you can change or add Class and ID according to your needs. Moreover you can add tags (can be any div or ul or p etc…) in the snippet i.e. before snippet and after snippet eg.

<div id=”custom-widgets”> <?php if (!function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Custom Widgets’)) :

endif; ?> </div>

What’s Next: Start Adding the widgets required to be placed and Happy Blogging!

If you have any queries or comments please drop them below and please feel free to share this via the social share icons.

@ Read Full Post

Posted by: Himanshu Goel