Adding custom sidebar in wordpress

Adding custom sidebar in wordpress

In wordpress, sidebar is a great feature. It basically use to add additional data to wordpress sidebar. In wordpress theme, it  is usually placed on the right or left-hand side. On the sidebar you can add your recent post, popular post and so on. But sometimes we want to show the sidebar on some other place to make our theme more user friendly. So, then you need to create a custom sidebar. Now, you can easily add custom sidebar in wordpress following the below step:

 

First step:

First you need to register your sidebar on  your theme’s “functions.php” file which is located

wp-content/themes/your-theme/functions.php

Sometimes it also named as “theme-functions.php“. Now to register your sidebar add the below code on the after the last line of your “functions.php” file:

<?php if ( function_exists ('register_sidebar')) { 
    register_sidebar( array(
        'name' => __( 'Custom Sidebar', 'your-theme-name' ),
        'id' => 'custom_wedgets',
        'description' => __( 'The sidebar for the optional Showcase Template', 'Your-theme-name' ),
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );

} ?>

Then save the file and upload on your server. After that go to your site back-end and go through Appearance -> Widgets. There you can see your custom sidebar.

 

Second Step:

Now you need to call it on your frontend. For this you need to add below code on your  your template-files such as index.php, single.php, archives.php where you want to show the sidebar.

<?php if ( ! dynamic_sidebar( 'Custom Sidebar' ) ) : ?>
<?php endif ?>

Now add some content on your custom sidebar and refresh your front-end. Now check your site front-end, your custom sidebar is showing. Then apply CSS and give the look as you want.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>