Widget areas may be added within a WordPress theme by the addition of a reference within the relevant theme layout files, according to the desired location, and handling support in the file functions.php.
Widget areas are not confined to the sidebar. It’s easy to add widgets to the header and footer of a WordPress website too!
I like to add 3 or 4 widget areas across the footer, allowing links, social media and contact details to be easily changed by the website owner.
A single header widget area, spread across the page may be used to add a message to visitors. Again easily administered by the website owner.
The widget area content will be visible across the website, dependant upon the file within which the code has been added. WordPress has files covering the header and footer, together with a number of different purposes as well as the templates selected in a page’s settings.
There are two references for the widgets: within the relevant HTML (php) code of the file, for example footer.php and the associated definitions in the file functions.php.
To Add Widget Areas in the Footer
It’s common for the footer of a website to include 3 columns with groups of links: policies; contacts; links of interest/promotion.
It’s good to spread the widget content across the bottom, assigning a percentage of the width.
More recently the content of the widgets incorporates a subset of the Gutenberg blocks. Allowing one widget are with a columns block added.
Here’s a simplified single widget area allocated to the footer. I would look to adding it appropriately in the layout, within the file footer.php within the child theme.
<?php if ( is_active_sidebar( 'footer' ) ) : ?> <div class="widget-area" role="complementary"> <?php dynamic_sidebar( 'footer' ); ?> </div> <!-- .widget-area --> <?php endif; ?>
You may wish to implement 3 widget areas making it easier for content editors to maintain the content within the separate areas.
We’ll spread the areas evenly across the page with a layout based upon Bootstrap.
<div class="wrapper" id="wrapper-prefooter">
<div class="container">
<div class="row footer-widget">
<div class="col-md-4 ">
<?php if ( is_active_sidebar( 'footer-left' ) ) : ?>
<?php dynamic_sidebar( 'footer-left' ); ?>
<?php endif; ?>
</div>
<div class="col-md-4">
<?php if ( is_active_sidebar( 'footer-centre' ) ) : ?>
<?php dynamic_sidebar( 'footer-centre' ); ?>
<?php endif; ?>
</div>
<div class="col-md-4">
<?php if ( is_active_sidebar( 'footer-right' ) ) : ?>
<?php dynamic_sidebar( 'footer-right' ); ?>
<?php endif; ?>
</div>
</div><!-- footer-widget -->
</div><!-- container -->
</div><!-- wrapper end -->
To populate content into these areas and to support presenting the areas on the appearance/widgets page we edit the file functions.php
If you are using a child theme its possible that your file functions.php, if need be create the file functions.php in the root of your theme.
If you are adapting an existing file take a look to see if there is a section
function_exists(‘register_sidebar’))
If it does already exist the additional widget areas can be added to it.
Assuming that you are adding to a fresh file I’ve included details for the addition of for widgets below:
function VNTweb_widgets_init() {
register_sidebar(array(
'name' => __('Footer left widget area', 'vntweb'),
'id' => 'footer-left',
'description' => __('Footer left widget area', 'vntweb'),
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => __('Footer centre widget area', 'vntweb'),
'id' => 'footer-middle',
'description' => __('Footer centre widget area', 'vntweb'),
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => __('Footer right widget area', 'vntweb'),
'id' => 'footer-right',
'description' => __('Footer right widget area', 'vntweb'),
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
));
}
add_action( 'widgets_init', 'VNTweb_widgets_init' );
Additional widget areas can be added to a WordPress theme by the addition of code within the php layout file(s) and related named references in the functions.php file.
