Add a Custom Sidebar to a WordPress Theme
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.
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.
Step #4. Check the end result
- Go to Appearance > Widgets to see if the new sidebar available.
- Add the widgets you need.
- 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.
Very good description!
Thanks Nastya
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
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.
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!
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
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:
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!
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
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
With your help it turned out to be an easy task and it was also clearly and intelligently explained. Kudos!
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!
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
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!