Add Custom Sidebar On Home Page of Any StudioPress Theme

There’s several different ways to add custom sidebars to your theme.

  1. You can use a plugin like Genesis Simple Sidebars
  2. Or you can hand code a custom sidebar for your home page

In 2 simple steps, i’ll show you how to add a custom sidebar to the front page of the Metro Pro theme by StudioPress using the Genesis Simple Sidebars plugin.

Step 1 – Create Custom Sidebar

Install the Genesis Simple Sidebars plugin and create a new sidebar adding the unique i.d for the slug front.

Genesis Simple Sidebars

Step 2 – Add PHP Code To functions.php

Please copy the PHP code and paste it at the end of your child themes functions.php file.

Optional Step – Change Content & Sidebar Widths

You might also like to change the width of both the content area and sidebar on your front page which you can do using this CSS code in your child themes style.css file.

.home .sidebar {
width: 380px;
}

.home .content {
width: 660px;
}

Use On Other Themes

This solution should work on any StudioPress theme using a home.php or front-page.php file.

Based on testing, the above solution will work regardless of whether your child theme includes the code to force a full width or content sidebar layout.

Some themes may require you to modify the CSS for your front or home page.

This post is based on this question from the StudioPress community forums:

Hello, I am customizing the Metro Pro theme and would like to know how to replace the Primary Sidebar on the Home page with a Custom Sidebar that appears on the Home page only.

Related Tutorials

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.