Create a Space theme for WordPress – 2021 – Part 9, Sidebars

Table Of Contents

Introduction

Adding sidebars to a WordPress theme. Sidebars are a common feature in themes, Bootstrap makes it easy to re-order columns for different screen sizes.

Adding sidebars to a WordPress theme, Space Theme

Bootstrap is a mobile first framework so for sidebars on the left, on large screens, the content should be first. Bootstrap order classes are then used to display the sidebar first. For example order-lg-1 will display the sidebar column in the first position on large screens. Refer to the code below, note the order of the columns.

 .....
<section class="row">
/*  content column  */
         <div class="col-lg-9 order-lg-2 ">
                <h1> <?php the_title()?></h1>
                <?php if (has_post_thumbnail()):;?>
                <img src="<?php the_post_thumbnail_url('large')?>" alt="<?php the_title();?>" class="img-fluid mb-3 img-thumbnail"/>
                <?php endif;?>
                <?php get_template_part('includes/section', 'content')?>
            </div> 
/*  sidebar column  */ 
             <div class="card col-lg-3 order-lg-1">
                <?php
                if(is_active_sidebar('page_sidebar')):;
                ?>
                    <?php
                    dynamic_sidebar('page_sidebar');
                    ?>
                <?php endif; ?>
            </div>  
         </div>
        </div>
    </section>
.......

In other words the class, order-lg1 is used on the sidebar column, which is second in the HTML order on the page. This will then show the sidebar on the left as the first column. On small screens the content will display first with the sidebar underneath.

Add theme support,Enable support for sidebars (widgets)

Adding sidebars to a WordPress theme is easy with theme support.For example add the code below to functions.php, under the other theme support requests.

add_theme_support('widgets');

Adding sidebars to a WordPress theme, register sidebars

Next create a function named my_sidebars(), later, this function is called by an add_action function that triggers just before the theme loads, using init.

The register_sidebar() function does the obvious. It takes an array of values that name the sidebar, it then adds some HTML tags to the title that is displayed by every widget.

// sidebars ..................................
function my_sidebars(){
register_sidebar(
 array(
'name'=> 'Page Sidebar',
'id'=> 'page_sidebar',
'before_title'=> '<h4 class="widget-title">',
'after_title'=> '</h4>',
    )
    );
register_sidebar(
   array(
    'name'=> 'Blog Sidebar',
    'id'=> 'blog_sidebar',
    'before_title'=> '<h5 class="widget-title">',
    'after_title'=> '</h5>',
        )
        );
}
add_action('widgets_init','my_sidebars');

Add sidebars to single.php, page.php,author.php and archive.php

Use the dynamic_sidebar() function to display sidebars in a theme. This just requires the registered name in the brackets. For example, dynamic_sidebar(‘page_sidebar’). Additionally, it is good to test that the sidebar actually exists. Consequently use an if statement. Remember to add sidebars to all the pages used by the theme.

Add the code below where you want the sidebar to appear.

<div class="card col-lg-3 order-lg-1">
                <?php
                if(is_active_sidebar('blog_sidebar')):;
                ?>
                    <?php
                    dynamic_sidebar('blog_sidebar');
                    ?>
                <?php endif; ?>
 </div>

Sidebar Widget styling

How to style widgets is often missed from theme design courses.

If you view the page code you can see the classes used by widgets. All widgets have the class widget. Additionally, each widget has a specific class denoting its purpose. This makes targeting specific elements easy.

In this case, we are just using the widget class to style the heading and remove padding and margins. Add the code below to main.css.

/*  widget styling*/
.widget{
    list-style-type: none;
    padding-top: 0.5em;
   
}
.widget ul{
    list-style-type: none;  
    margin: 0;
    padding: 0;
}
.widget-title{
    color: white;
    background-color: black;
    padding: 0.2em;
}