Now, go into header.php where we have the unordered list:

<div class="w3-row">
  <div class="w3-col m3 l3">
  <ul class="w3-ul">
    <li><a href="#">Nature</a></li>
    <li><a href="#">Animals</a></li>
    <li><a href="#">Objects</a></li>
    <li><a href="#">People</a></li>
    <li><a href="#">Abstract</a></li>
  </ul>
</div>
<div class="w3-col m9 l9">
  <div class="w3-row">

We will just get rid of this list and replace it with the following highlighted code:

<div class="w3-row">
  <div class="w3-col m3 l3">
    <?php if(is_active_sidebar('sidebar')) : ?>
      <?php dynamic_sidebar('sidebar'); ?>
    <?php endif; ?>
  </div>
  <div class="w3-col m9 l9">
   <div class="w3-row">

This is how we add a widget to our code. The first thing we do is check whether sidebar is active by using the is_active_sidebar Boolean function. If it is active, then we will call dynamic_sidebar and pass in the sidebar position. This could be anything you wanted it to be, but in our case we named it sidebar. Let's reload the home page, and there we go, there's the Categories widget:

If we click on one of the categories, it will show us the images that are in that particular category.