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() {
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


  • 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
Blog Rating
Notify of
Newest Most Voted
Inline Feedbacks
View all comments

Very good description!


Thanks Nastya

Howard Milstein

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?


Jouke Willem Nienhuis

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

nice guide


Thank you! Very useful 🙂


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.”


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.

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

Thank you very much.


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

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

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.


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


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

Amanda James

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()
        ‘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 but its not working for my theme


    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

    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!


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


    Thank you!!!! GREAT!

    Tarun Rawat


    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=]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


    Excelente ! Me ayudó muchísimo !!!


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


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

    Would love your thoughts, please comment.x