Creating custom sidebar wordpress

In the previous article, we saw how to create custom header, Here we will be creating custom sidebar wordpress. The sidebar uses widget area to show content inside them. Actually creating custom sidebar wordpress is very easy once you understand how widget area works in WordPress which I will cover in next article Where I will show you how to add a widget area in your WordPress site.

Also, Read Create a responsive wordpress theme from scratch

 Download

 Demo

In this article, I will show you how we can create custom sidebar in WordPress. In order to customize WordPress sidebar, we have to play with CSS as I told you in the beginning of this WordPress series that you should have good knowledge of CSS.

How sidebar works in WordPress

Creating custom sidebar wordpress involves, Working with the sidebar.php, style.css, sidebar-content.css and content-sidebar.css. Below is the code for displaying sidebar which is written in the sidebar.php file. Now in this file functiondynamic_sidebar( 'sidebar-1' ); responsible for displaying the sidebar.

sidebar.php:

<aside id="secondary" class="widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->

Now open file functions.php and find your_theme_name_widgets_init() function, In that function WordPress defines all the widgetized area. By default, WordPress calls the widgetized area by using register_sidebar function.

register_sidebar( array(
    'name'          => esc_html__( 'Sidebar', 'my-theme' ),
'id'            => 'sidebar-1',
'description'   => '',
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget'  => '</section>',
'before_title'  => '<h2 class="widget-title">',
'after_title'   => '</h2>',
) );

Understanding register_sidebar function:

register_sidebar function except the array of parameters as you can see in above snippet.

1. name => specifies the name of a sidebar.
2. id => specifies the id of a sidebar.
3. description => By default is empty you can if you want to.
4. before_widget and after_widget=> Used to wrap the each widget inside aside tag.
5. before_title and after_title => Used to wrap the title of the widget inside H2 tag.

Creating custom sidebar wordpress:

Now you know how sidebar works in WordPress, So all we need to do is style the widgetized area. In the very the first article of this series I talked about WordPress Developer plugin now we will use that plugin. If you haven’t installed developer plugin yet Please install it and activate it and if you have already installed developer plugin than Go activate that Plugin.

When you activate developer plugin, it will ask three option as shown below image.

Now select option 1 (i.e. Plugin for a self-hosted WordPress installation) and click save changes. After that, WordPress will ask to install several plugins For this article we need only Monster widget. So install Monster widget as shown in below Image,

Now go to the Widgets section, you will find single widget area. Remove all the existing widgets, drag & drop monster widget that you just installed as shown in below image,

Now Open your wordpress site, you should see number widgets in the sidebar with no styling.

Now If you notice your sidebar is not floating to the left, It is below the entire page content. Now to avoid this we have to enqueue content-sidebar.css file. This file contains the styles for the sidebar, Now open functions.php, add the below line in your_theme_name_scripts() function.

functions.php:

// adding sidebar style
wp_enqueue_style('my-theme-content-sidebar', get_template_directory_uri() . '/layouts/content-sidebar.css');

After adding thecontent-sidebar.css file, You should see the sidebar floating to the of your content area. But If you resize your browser window you will notice that your site is not responsive In order to make it responsive add the below media queries in the content-sidebar.css file.

content-sidebar.css:

@media screen and (min-width: 1540px) {
    .content-area {
        float: left;
        width: 100%;
        margin-right: -380px;
    }
}

@media screen and (min-width: 1159px) and (max-width: 1539px) {
    .content-area {
        width: 100%;
        float: left;
        margin-left: -380px;
        padding-left: 380px;
    }
    
    .entry-header,
    .entry-content,
    .entry-meta,
    .entry-footer,
    .tag-links,
    .post-navigation,
    .comments-area,
    .paging-navigation { 
        margin-right: 0; 
    }
    
}

@media screen and (max-width: 1159px) {  
    .site-content .widget-area {
        width: auto;
        max-width: 780px;
        float: none;
        margin: 1em auto 0;
    }
}

Now you have to style each single widget according to your design. In this article, I will apply styles to few selected widget like Recent comments, Cloud Tags.

Each widget wraps around the SECTION tag having class.widget and .widget_name as I have explained above. So you can target each widget separately or you can target all widget using .widget class. Open style.css file and find Widgets section, add the below css.
style.css:

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/.widget {
    margin: 0 0 30px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
}

.widget input[type="submit"]{
    width:100%;
    background: #000;
    padding: 10px;
    color: #fff;
    font-size: 15px;
}

.widget input[type="submit"]:hover{
    background: #000;
}
.widget-title {
    margin-bottom: 1em;    
    font-size: 24px;
    font-weight: bold;
}

.widget-area section{
    padding-bottom: 30px;
    border-bottom: solid 1px #000;
}
.widget a {
    font-weight: 700;
    color: #000;
}
.widget a:hover {
    text-decoration: none;
    color:#666;
}
.widget ul,
.widget ol {
    padding: 0;
    margin: -1em 0 0;
    list-style-type: none;
}

.widget li { padding: 1em 0 0; }

.widget li ul,
.widget li ol { margin-top: 0; }

.widget li li { margin-left: 1.5em; }

/* Make sure select elements fit in widgets. */.widget select {
    max-width: 100%;
}

.widget_recent_entries a,
.widget_recent_comments a,
.widget_archive a{
    display: block;
} 

.widget_recent_entries li:before,
.widget_recent_comments li:before,
.widget_archive li:before {
    display: block;
    float: left;
    padding-top: 2px;
    margin-left: -2.5em;
    font-family: 'fontawesome';
    font-size: 14px;
} 

.widget_recent_entries li,
.widget_recent_comments li { margin: 0 0 .5em 2.5em; }

.widget_recent_entries li:before { content: "\f02c "; }

.widget_recent_entries .post-date{
    font-size: 12px;
}
.widget_recent_comments li:before { content: "\f075"; }

.widget_archive li { margin: 0 0 0 2.5em; }

.widget_archive li:before { content: "\f187"; }

.widget_nav_menu a,
.widget_pages a {
    display: block;
    padding: 1em 0;
    border-bottom: solid 1px hsl(0, 0%, 90%);
}

.widget_nav_menu li,
.widget_pages li { padding-top: 0; }

.widget_rss li { margin-bottom: .5em; }

.widget_rss .rss-date,
.widget_rss cite {
    display: block;
    font-size: 85%;
}

.tagcloud a{
    color: #000 !important;
    background-color: #DADADA;
    font-size: 12px !important;
    line-height: 100%;
    display: inline-block;
    padding: 6px 7px;
    margin-right: 0;
    margin-bottom: 4px;
    border-radius: 4px;
    border: solid 0.5px #DADADA;
}
.tagcloud a:hover {
  background-color: #fff;
  border: solid 0.5px #000 ;
}

Now add the CSS to the rest of the widgets according to your design. As I told earlier Creating custom sidebar wordpress is very easy as you have to work with only CSS. The only Limit remains here is your Imagination. So I would suggest you to create your theme’s design first then build the Theme using _S.

If you have any queries or suggestions, please do let me know in the comment section below.