If you're familiar with WordPress themes, you know that
many themes come with a widgetized sidebar. This means that you
can add, remove, and rearrange widgets on your WordPress website
using the "Widgets" section of your WordPress
dashboard.
Having a widgetized sidebar is very useful, but
you may also want to widgetize other parts of your WordPress
theme. It's quite easy to do, and once your theme is modified, it
will be simple for you or the WordPress administrator to rearrange
this dynamic content area.
We are going to add a widget area in our main template, and ensure
that this area only displays on the homepage.
Firstly, we
add the call to our sidebar template in the theme's
index.php.
if(is_front_page()){
get_sidebar('widget-homepage');
}
We check if we are on the homepage, and call our sidebar which we name "widget-homepage".
We then create a template file for our widget. It should be at the
root of your theme and named "sidebar-{widget-id}" (here the ID of
our widget is "widget-homepage").
In this file, we use the
WordPress function "dynamic_sidebar" which creates our
zone.
Here is the content of our
sidebar-widget-homepage.php file
<?php dynamic_sidebar( 'widget-homepage' ); ?>
Nothing more, nothing less.
We then need to tell WordPress how this area is going to be
managed. And incidentally, let it know that it exists.
In our
functions.php file, we are going to add this:
function add_widget_area($id, $name, $description) {
register_sidebar([
'name' => __( $name ),
'id' => $id,
'description' => $description,
'class' => '',
'description' => esc_html__( 'Add widgets here.', 'partitech' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="np-block-title">',
'after_title' => '</h2>',
]
);
}
add_widget_area('widget-homepage', 'Homepage widget zone', 'zone widget homepage');
Then simply go to your theme's widget manager or WordPress and add
the widgets you want.