How To Customize Widget Areas In WordPress

Have you ever found the perfect WordPress theme – only to discover that you can’t place a widget where you wanted to?

One of the biggest strengths of WordPress is its flexibility, and widget areas are no exception.

If you’d like to:

• Add an opt-in form after each blog post
• Remove your sidebar and place your content center stage instead
• Add some footer widgets – or remove them

…then you’re in the right place.

Luckily, WordPress makes it simple to add, remove, or modify widget areas with just a few lines of code. You don’t have to switch themes to get just the look you need – just follow the tutorial below!

(Just a quick note before we get started: This tutorial is a little more advanced than many posts on this site, so it helps if you already understand the basics of editing WordPress theme files and understanding some basic HTML/PHP code. If you can create a child theme or your own shortcodes, though, this’ll be a piece of cake.)

How to add or remove widget areas in WordPress

WordPress widget areas are created in three simple steps:

1. First, you create (“register”) the new widget area with a couple lines of PHP code in your functions.php file.
2. Then, you include a bit of code in the template file where you want it to show up (such as in footer.php), again with a few lines of PHP.
3. Finally, the widget area’s layout and look are customized using CSS.

In this tutorial, we’ll go over the first two steps in order to add or remove a widget area.

Warning: before making any theme changes

It’s a good idea to create a child theme before making any significant changes to your theme. That way, your changes won’t be lost forever when your theme updates.

You might also consider creating a maintenance page with the SeedProd Coming Soon Plugin while you’re making changes on your site, so that your readers won’t be confused or frustrated by moving widgets or potential error messages.

Step 1: register or deregister widget areas in functions.php

As mentioned above, the first step to adding a widget area is to register it in functions.php.

Go ahead and create a new functions.php file in your child theme’s directory, which will load before the parent theme’s functions.php.

To register a new widget area

At the bottom of your child theme’s functions.php file, you can paste the following code:

/**
 * Register a new widget area
 **/
function arphabet_widgets_init() {
register_sidebar( array(
'name'          => 'After post widget area',
'id'            => 'after_post_widget',
'before_widget' => '<div>',
'after_widget'  => '</div>',
'before_title'  => '<h2 class="rounded">',
'after_title'   => '</h2>',
) );
}
add_action( 'widgets_init', 'arphabet_widgets_init' );

You can customize your widget by replacing any of the bolded text:

• You can replace the name and ID of the widget are in the first two lines. (These are for internal reference and won’t make any difference to the look or function of your widget area.)
• The “before widget” and “after widget” lines are to wrap the area in div tags, setting it apart and making it easier to style.
• The “before title” and “after title” lines are for any code you want to place before and after the individual widget titles. In the example, this code makes the widget titles into headings (h2).

To unregister an existing widget area

Add the following code to the bottom of your child theme’s functions.php file:

function remove_a_widget_area(){

	// Unregister a widget area
	unregister_sidebar( ‘ID' );
}
add_action( 'widgets_init', ‘remove_a_widget_area’, 11 );

You must replace the bolded ID above with the ID of the widget area you’re getting rid of. You can find out the ID by going to the parent theme’s functions.php file and searching for where the widget area is registered (as in the code example above for registering a widget area – the ID is in the second line, after the widget area name).

Check to see how your site is displaying once you’ve made these changes.You may not need to do anything else if your widget area is now gone! But if there’s any sort of error message showing up, you’ll want to continue to step 2. (If the site’s layout is adversely affected, you can likely fix it with CSS – no need to change any other code in your functions.php file.)

Step 2: add or remove a widget area in your theme files

Your new widget area is now registered with WordPress, but you still need to tell it where to appear on your site.

Next, you’ll want to open up the part of the template where you’re adding or removing a widget area. This will depend entirely on the structure of the theme you’re using, but you can start with the following guidelines:

• For an after-post widget, you’ll probably add your widget area to the single.php file somewhere after the_content() function, which displays the post content.
• Header widgets will usually go in the header.php file – make sure you add it after the <body> opening tag.
• Sidebar widgets are usually in the sidebar.php file.
• Footer widgets will usually go in the footer.php file – make sure you add it before the </body> closing tag.

You can check out the hierarchy of WordPress templates in the codex to find out which template is displaying which content. Consider asking the developer of your theme if you’re unsure which file needs to be edited.

If you’re using a child theme, just copy the template file (including all its contents) from the parent directory, and create a new copy in the child theme directory. The file in the child theme will be used instead of the original.

Adding a widget area to your theme

Once you’ve located the file and area where you’d like your widget to appear, just copy and paste the following code:

<?php if ( is_active_sidebar( 'after_post_widget' ) ) : ?>
	<?php dynamic_sidebar( 'after_post_widget' ); ?>
<?php endif; ?>

(Be sure to replace the bold text with your own widget ID you created in the previous step.)

This code first checks to see if the widget area exists. Then, if it does exist, it will display the widget area. This extra code prevents any error messages from popping up just in case something went wrong in the first step or the ID isn’t correct.

Removing a widget area from your theme

To remove a widget area, you’ll need to open up the correct template file (again, check the hierarchy of WordPress templates in the codex and consider checking with the developer of your theme if you don’t know which file to edit), and find where the widget area code is.

Then find the “dynamic_sidebar” code, as in the previous example above.

You can then remove that bit of code above as shown in the above example. Keep in mind, it may look a little different in your template files if the developer has added anything around it. Depending on the layout of your theme, you may need to get rid of surrounding <div> tags as well.

Conclusion

Changing your widget areas is a great way to customize your theme and set it apart from other sites using the same theme. It gives you a lot of flexibility in the look and functions of your site.

If you’re not comfortable editing code, it’s well worth checking in with a developer first. If you need some extra help, the developers of your theme may have some tutorials on how to do this with your theme.

The post How To Customize Widget Areas In WordPress appeared first on WP Superstars.