Add a Custom Sidebar to a WordPress Theme

How to Add a Custom Sidebar to WordPress Themes

Sidebars allow you display widgets inside your theme.

And yes, despite the name, you can use “sidebars” to display widgets anywhere you want.

By default, themes come with at least one sidebar.

In this post, I’m going share with you a quick way to add a custom sidebar to your WordPress theme.

Step #1. Create a child theme

If you’re using a custom theme, skip this step. However if you’re using a theme maintained by someone else that may be updated in future, I recommend you create a child theme to leave the original intact.

Install the Child Theme Configurator plugin and copy the required template files such as single.php and page.php into the child theme. The step 4 explains this part.

Step #2. Edit the functions.php file

  • Go to Appearance > Editor > functions.php.
  • Choose functions.php from your child theme.

custom sidebar wordpress

Add this code into functions.php in order to register your custom sidebar:

{codecitation php}function my_custom_sidebar() {
register_sidebar(
array (
‘name’ => __( ‘Custom’, ‘your-theme-domain’ ),
‘id’ => ‘custom-side-bar’,
‘description’ => __( ‘Custom Sidebar’, ‘your-theme-domain’ ),
‘before_widget’ => ‘<div class=”widget-content”>’,
‘after_widget’ => “</div>”,
‘before_title’ => ‘<h3 class=”widget-title”>’,
‘after_title’ => ‘</h3>’,
)
);
}
add_action( ‘widgets_init’, ‘my_custom_sidebar’ );{/codecitation}

  • Click the “Update file” button when you’re done.

Step #3. Edit the template files

I want to render the custom sidebar in single posts only, so I’ll edit the “Single post” file.

{codecitation php}<?php if ( is_active_sidebar( ‘custom-side-bar’ ) ) : ?>
<?php dynamic_sidebar( ‘custom-side-bar’ ); ?>
<?php endif; ?>{/codecitation}

I placed the code above in the location where I want the sidebar to be visible, then I save the changes.

custom sidebar wordpress

Step #4. Check the end result

  • Go to Appearance > Widgets to see if the new sidebar available.
  • Add the widgets you need.

custom sidebar wordpress

  • Preview a single post to see your sidebar in action. The widgets loads as expected in our custom sidebar. Note, some CSS design tweaks will probably be required.

custom sidebar wordpress

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Article Rating
Subscribe
Notify of
24 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Nastya
Nastya
7 years ago

Very good description!

daniel-pickering
7 years ago
Reply to  Nastya

Thanks Nastya

Howard Milstein
Howard Milstein
7 years ago

Are there themes that come with OPTION of putting another sidebar to the other side of homepage so as to have it formatted on both sides with content in middle?

Thanks

Jouke Willem Nienhuis
Jouke Willem Nienhuis
6 years ago

A sidebar only is shown if you have content to show. Follow the same steps, only now edit the index.php of your child theme the same way as you can do with your single.php page as Valentin (the author) explained. Place the code of step 3 before and after the loop. In the Admin page you can put content in your widgets.

King GeneraL
King GeneraL
6 years ago

nice guide

Alessandro
Alessandro
6 years ago

Thank you! Very useful 🙂

johannes
johannes
6 years ago

When I created the child theme, everything looked intact, but when I edit the functions.php it says “Unable to communicate back with site to check for fatal errors, so the PHP change was reverted. You will need to upload your PHP file change by some other means, such as by using SFTP.”

AlienGIrl
AlienGIrl
6 years ago

BUT how to add to all pages, the global sidebar. I have happened to created a website for wordpress today, and it does NOT have a sidebar (it has two columns instead which is not the same thing). I want to put calendar and tags in there.

Hectorplus.ca
Hectorplus.ca
5 years ago

Worked as expected, rather than using it as a side bar, i customized it as a top bar/block/region, a-la-drupal!

Ali Elkhaiat
Ali Elkhaiat
5 years ago

Thank you very much.

Danni
Danni
5 years ago

What is the CSS class for customizing the sidebar? is it .my_custom_sidebar {width:160px !important;} or .custom-side-bar {width:160px !important;}? Thanks

Nirav Patel
Nirav Patel
5 years ago

Thanks for a great description.

But I am not able to display the widget on my website.

function twentyfifteen_widgets_init(){
register_sidebar( array(
‘name’ => __( ‘Footer Sidebar1’, ‘twentyfifteen’ ),
‘id’ => ‘footersidebar1’,
‘description’ => __( ‘Add widgets here to appear in your sidebar.’, ‘twentyfifteen’ ),
‘before_widget’ => ‘

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
) );
}
add_action( ‘widgets_init’, ‘twentyfifteen_widgets_init’ );

To add In Page:


epic reality
epic reality
4 years ago

this is easy but does not work for twenty nineteen as it sits under the picture. i wanted the sidebar beside the post itself. thanks.

Riyaz
Riyaz
4 years ago

Thank you! It really helped, now looking to move the side bar to right of my Page. Lets see if could make it work with CSS

Yann
Yann
4 years ago

amazing! Finally I got put my social widget. Thank you, this is pretty useful!

Amanda James
Amanda James
4 years ago

I am adding a custom widget but having errors in the code. Can you please help me to resolve this issues. Here is the code that I have added in functions.php

function widget()
{
    register_sidebar(array(
        ‘name’ => __(‘Primary Sidebar’, ‘wpb’),
        ‘id’ => ‘primary_sidebar’
        ‘description’ => ”,
        ‘class’ => ”,
        ‘before_widget’ => ‘

  • ‘,
            ‘after_widget’ => ‘
  • ‘,
            ‘before_title’ => ‘

    ‘,
            ‘after_title’ => ‘

    ‘,
        ));

    }

    add_action(‘widgets_init’, ‘widget’);

    I have seen this code here https://www.wpblog.com/wordpress-custom-widget-area/ but its not working for my theme

    Oleg
    Oleg
    4 years ago

    Thank you so much, you saved my day. The Mins template on GoDaddy used to have a sidebar but it was removed for some reason. With your help I was able to restore it. However, I had to enclose your template code into

    and then spent a few hours creating CSS styles for it, including the responsive media queries, so it stops floating to the right on phones and tablets, but becomes 100% wide. 

    With your help it turned out to be an easy task and it was also clearly and intelligently explained. Kudos!

    Alan Henness
    Alan Henness
    4 years ago
    Reply to  Oleg

    This is excellent – looks fairly straightforward.

    One question: placing the code in single.php renders the sidebar in a single post but where do I put it to render on the home page/posts page? Is this fairly universal in themes? As far as I can see, the options are single.php, index.php, home.php, singular.php and page.php depending on the theme.

    Any guidance on this would be useful!

    rahul
    rahul
    4 years ago
    Reply to  Alan Henness

    This is excellent Such A Realy Nice don’t have words to express

    Arsenii
    Arsenii
    4 years ago

    Thank you!!!! GREAT!

    Tarun Rawat
    Tarun Rawat
    3 years ago

    Hello

    Does it work in Twenty Twenty wordpress theme. I start a new blog. I love this theme because google page speed and gt matrix score am getting good.

    When i check sidebar in blog section. Am not to do it. [url=https://softaunt.com/]Softaunt[/url] my website. I try lot of code and specially  plugin. but it’s does not help me.

    What you suggest me to change wordpress theme else need to buy any paid plugin

    ervija123
    ervija123
    3 years ago

    Excelente ! Me ayudó muchísimo !!!

    phptechie
    phptechie
    3 years ago

    Great article and examples! It saved a lot of time. It is just what I needed.

    mikall
    3 years ago
    Reply to  phptechie

    Excellent! So glad OST was able to save you lots of time.  Thanks for posting here!

    24
    0
    Would love your thoughts, please comment.x
    ()
    x