Do Not Sideline Sidebars in WP themes: Leverage Them

It has been thirteen years that WordPress is in the web arena and yet stands undefeated with a colossal number of websites counting on it.

Its pre-built themes, be it paid or free, offers a lot of customization in the hands of the users. Wherefore, we have an ample lot of themes that can get us the most suited theme for our website or our blog.

However, it has happened many a times when different people choose one particular theme. This has happened with me just a few days ago, as I was working with two different clients but both were a kind of apparel selling agencies and coincidentally both of them chose the same theme. This was an odd situation and when I was checking out other sites (for inspiration), I realized that there are many who choose one particular theme and this will result in similarity. What to do in order to create a distinguished look for the users?

The answer to this question was to make requisite changes depending on the needs of the users.

As WordPress offers a high degree of customization which gives us the leverage to customize the theme as per the custom needs of a website or the way you like it to be. One of the most effective technique to add singularity to your WordPress sites is by using sidebars.

What is a sidebar?

Okay let’s, split the word ‘Sidebar’ into two – side and bar. A bar on the side of a website is known as the side bar or a widget- ready area which can contain some information . Moreover , there is no dictum that you need to display any particular type of information in the sidebars , such as many say that this part of the website comprises of content other than the main content. Likewise, it holds no such position or placement. You can place it vertically , horizontally , above or below the header, footer, content or any goddamn place on your website where you feel like.

Below is an image of a web page which comprises of a sidebar on the left hand side.

Or if you want to place it on the right hand side, you can check this out.

Now using a sidebar ingeniously is completely dependent on the designers and how they can use their creativity in order to make use of this widget ready space. There are themes which allow multiple widgets all you need to do it to utilize them to the fullest.

You can use this space to showcase your top posts, related posts, recent blogs or any other stuff which you consider to be engaging enough for your website.

Or if you do not have a blog, you can creatively use it for third party brand endorsements. Furthermore, it allows the users to drag and drop some items into the sidebar for this you need to move to the admin panel and then to Appearance → widgets . Moreover, there are numerous WordPress themes which come with great customization and configuration options of building dynamic layouts for give a distinct look to the different sections of your website. This allows users to add a sidebar of their own by making use of the drag and drop interface.

Step 1 – Register your sidebar :

In order to begin with your sidebar you have to register to custom sidebar with the help WordPress function which is present by default: register_sidebar().

Now open up the file for your them functions which functions.php() file if it already exist and if it do not, then you need to create one before moving on to the next step.

Note: If you cannot get a functions.php file, then you can add function call at any place where you wish to. Moreover, if your theme comprises of only one slidebar, then also there should be one functions.pho file which is needed.

Here is the code which you can look up to as an example for adding a sidebar in a WordPress theme:

/**
 * Being with the Registration process of the  two sidebars (widget-ready areas).
 *
 * @since WordPress version 1.0
 *
 * @return void
 */function myfirstwidget_widgets_init() {
 
  register_sidebar( array(
 
    'name'          => __( 'Main Widget Area', 'myfirstwidget' ),
 
    'id'            => 'sidebar-first',
 
    'description'   => __( 'Will be displayed in the footer section of the site.', ' myfirstwidget' ),
 
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
 
    'after_widget'  => '</aside>',
 
    'before_title'  => '<h3 class="widget-title">',
 
    'after_title'   => '</h3>',
 
  ) ); 
 
  register_sidebar( array(
 
    'name'          => __( 'Secondary Widget Area', 'myfirstwidget' ),
 
    'id'            => 'sidebar-second',
 
    'description'   => __( 'Applied to pages and post in the sidebar.', 'myfirstwidget' ),
 
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
 
    'after_widget'  => '</aside>',
 
    'before_title'  => '<h3 class="widget-title">',
 
    'after_title'   => '</h3>',
 
  ) );
 
}
 
add_action( 'widgets_init', 'myfirstwidget_widgets_init' );

Step 2 – Displaying a custom sidebar in your WP theme :

After successful registration to the sidebar, you then need to decide where to place the new sidebar in your WordPress theme.

Certainly there is no fixed position for placing a side bar and this also changes depending on your WordPress theme which you have installed. Here I am mentioning the code for adding a sidebar horizontally in your post.

<div id="secondary" class="mysidebar-block" role="complementary">
 <div class="widget-area1">
  <?php dynamic_sidebar( 'myfirst-sidebar' );?>
 </div><!-- .widget-area1 -->
</div><!-- #secondary -->

The Twenty Fifteen theme of WordPress will make use of the code written above in the “sidebar-main.php” file for featuring the sidebar: mysidebar-first. As mentioned in the code written above, A function named as dynamic_sidebar is made. This is because, by chance, even if a single widget is not assigned to your sidebar in your WP theme, then you can do it by using the following code:

<?php dynamic_sidebar($index);?> 

The index is the code mentioned above must carry the id or the name of the dynamic sidebar you created.

In order to view your newly created sidebar you need to go down to Appearance → Widgets menu.

How to add widgets in the widget ready space?

As we have already discussed that sidebar is a widget ready area which generally comprises of widget tools to drag and drop elements in the sidebar. Now, this is important to know how to add widgets in the sidebar.

With time a website also grows and so it the data which is to be depicted and along with the functionalities, as the widgets of WordPress keeps on evolving. For example, after sometime you might need to incorporate widgets in your sidebar which can display custom data on your website. This can be a method for resurrecting your old blog post on your website.

Once you have added a new widget ready space or a sidebar to your WP theme, the next step is to add widgets in that very place.

In order to do so you can take inspiration from the code mentioned below:

<?php
function dashboard_widget_function($post,$callback_args) {
echo "My First Custom Widget";
}
function add_dashboard_widgets() {
wp_add_dashboard_widget('dashboard_widget1','Dashboard Widget Example','dashboard_widget_function1');
}
add_action('wp_dashboard_setup1','add_dashboard_widgets1');
?>

Summing it up!

I used sidebars to intelligently to make two websites of the same genre in a different way. Well sidebars if used with utmost precision can serve numerous purposes as well.

All you have to do is to think and utilize it and not to sideline the purpose which sidebars can serve.

I hope this blog serves as a good resource for you!