How to Create Custom Widget Area in WordPress

In this Article I will tell you How to Create New Widget Area in WordPress.Creating a new Widget Area doesn’t required any deep knowledge of WordPress Codex and PHP.

Widget Area is Part of WordPress theme Structure where Widgets can be Added.Generally Widget area are on Right or Left Side of your WordPress theme.You can add Custom Widget Area in footer of your site,header of your site, after single post/page of your blog,homepage or for any Custom page.You can Almost add it anywhere where you want.

However, this article is also for those curious users who want to learn how to add dynamic widget ready sidebars or widget ready areas in WordPress themes.

Note: Please make a complete backup of your WordPress theme before editing your files.I’m saying this because if you did any fault in implementing the code,that may cause error and deteriorate the look of your website.

Code to Create New Widget Area in WordPress

In this section I will Provide you the code and the explanation of Creating new Widget Area in WordPress.

Widget Area in WordPress

Register the New Widget Area

Your First task is to register the New Custom Widget area.You can add the Below Code to your WordPress Theme functions.php file or your Custom WordPress Plugin file.

<?php
/**
 * Register your sidebars and widgetized areas.
 */
function mct_widget_init() {
	register_sidebar( array(
		'name'          => 'Header Right',
		'id'            => 'header_right_1',
		'before_widget' => '<div>',
		'after_widget'  => '</div>',
		'before_title'  => '<h2 class="header_right_title">',
		'after_title'   => '</h2>',
	) );

}
add_action( 'widgets_init', 'mct_widgets_init' );
?>

Note: I have added prefix mct_ to function name at two places (function mct_widget_init() and ( 'widgets_init', 'mct_widgets_init' ) ).You can edit change them to your choice.

The register_sidebar() ‘id’ must be unique.

[moptin id="3098"]

Displaying the New Widge Area

As we have created the New Widget area,we have to display it.Use the Below code to display your New Widget Area where you want.

<?php
if(function_exists('dynamic_sidebar')){
  dynamic_sidebar( 'header_right_1' );
}
?>

Let’s see some example of How to add Custom Widget Area in footer of your site,header of your site, after single post/page of your blog,homepage or for any Custom page.

Add Widget Area in WordPress Theme Sidebar

Let’s add the New Widget Area in Sidebar of your WordPress theme.

First Create a New Widget Area for Sidebar:


<?php
/**
 * Register your sidebars and widgetized areas.
 */
function mct_widget_init() {
	register_sidebar( array(
		'name'          => 'Custom Sidebar',
		'id'            => 'custom_sidebar_1',
		'before_widget' => '<div>',
		'after_widget'  => '</div>',
		'before_title'  => '<h2 class="widget_title">',
		'after_title'   => '</h2>',
	) );

}
add_action( 'widgets_init', 'mct_widgets_init' );
?>

Go to your WordPress Theme Editor and then navigate to sidebar.php file.

Now add this Code in your sidebar.php file.

<?php if ( is_active_sidebar( 'custom_sidebar_1' ) ) : ?>
	<div id="custom-sidebar" class="custom-sidebar widget-area" role="complementary">
		<?php dynamic_sidebar( 'custom_sidebar_1' ); ?>
	</div><!-- #custom-sidebar -->
<?php endif; ?>

Add widget area above header in WordPress

Let’s take another example.In this Example we will add widget area above header.Typically these can be used to place advertisement but some folks use to place welcome place.

Do the Same as above, create a new widget area with a id above_header_1 and Then Navigate to header.php file from WordPress Theme Editor.

<?php
/**
 * Register your sidebars and widgetized areas.
 */
function mct_above_header_widget_init() {
    register_sidebar( array(
        'name'          => 'Above Header',
        'id'            => 'above_heder_1',
        'before_widget' => '<div>',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget_title">',
        'after_title'   => '</h2>',
    ) );
 
}
add_action( 'widgets_init', 'mct_above_header_widgets_init' );
?>

Your header.php file will Look like:

<!doctype html>
	<!--[if !IE]>
	<html class="no-js non-ie" <?php language_attributes(); ?>> <![endif]-->
	<!--[if IE 7 ]>
	<html class="no-js ie7" <?php language_attributes(); ?>> <![endif]-->
	<!--[if IE 8 ]>
	<html class="no-js ie8" <?php language_attributes(); ?>> <![endif]-->
	<!--[if IE 9 ]>
	<html class="no-js ie9" <?php language_attributes(); ?>> <![endif]-->
	<!--[if gt IE 9]><!-->
<html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<!-- favicon -->

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">

	<header id="masthead" class="site-header" role="banner">
					<div id="logo">
						<span class="site-name"><a class="mct-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span>
					</div><!-- end of #logo -->
	</header><!-- #masthead -->

Edit your header.php file and then Add the Code to show your New Widget Area where you want.

After adding the Code your header.php file will look like:

<!doctype html>
	<!--[if !IE]>
	<html class="no-js non-ie" <?php language_attributes(); ?>> <![endif]-->
	<!--[if IE 7 ]>
	<html class="no-js ie7" <?php language_attributes(); ?>> <![endif]-->
	<!--[if IE 8 ]>
	<html class="no-js ie8" <?php language_attributes(); ?>> <![endif]-->
	<!--[if IE 9 ]>
	<html class="no-js ie9" <?php language_attributes(); ?>> <![endif]-->
	<!--[if gt IE 9]><!-->
<html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<!-- favicon -->

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<?php if ( is_active_sidebar( 'above_header_1' ) ) : ?>
	<div id="above-header" class="above-header widget-area" role="complementary">
		<?php dynamic_sidebar( 'above_header_1' ); ?>
	</div><!-- #above-header -->
<?php endif; ?>

<div id="page" class="hfeed site">

	<header id="masthead" class="site-header" role="banner">
					<div id="logo">
						<span class="site-name"><a class="mct-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span>
					</div><!-- end of #logo -->
	</header><!-- #masthead -->

Add New Widget Area Below Content

Let’s take an other example.In this Example we will add Add New Widget Area After Content.
Add the given code in your WordPress Theme functions.php file or Your Custom WordPress Plugin:

<?php
/**
 * Register your sidebars and widgetized areas.
 */
function mct_after_content_widget_init() {
    register_sidebar( array(
        'name'          => 'After Content',
        'id'            => 'after-content-1',
        'before_widget' => '<div>',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="after-content-title">',
        'after_title'   => '</h2>',
    ) );
 
}
add_action( 'widgets_init', 'mct_after_content_widgets_init' );

function mct_get_after_content() {
	ob_start();
	dynamic_sidebar( 'after-content-1' ); 
	$sidebar = ob_get_contents();
	ob_end_clean();
   return $sidebar;
}

function add_sidebar_below_content($content){
	if(is_singular()){ //You can add your Conditions Here
	  $content .= mct_get_after_content();
	}
}

add_filter('the_content','add_sidebar_below_content');
?>

I Hope that you like this Article, So please Share it.

Did we miss anything?

Resources

Shubham Kumar

Hey, I am Shubham and i love Blogging, Coding and exploring new things and obviously sharing my experience with you.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *