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

Was This Tutorial Helpful?

Free

$0

Access only to all free tutorials per month.



Monthly

$75

Access to 10 premium tutorials per month.


Tutorial Request


Includes code guarantee and coding support.

Yearly

$500

Access to 15 premium tutorials per month.


Monthly Tutorial Request


Includes code guarantee and priority coding support.