How to add sidebar-right to homepage?

Hi, I am using “latest posts” option as my landing page. I tried to add the “second sidebar” to the right but I couldn’t. I want to have both sidebars on my homepage (and between the two sidebars 4columns of content.)
Any suggestions would be appreciated! Thanks in advance 🙂

3 Answers

Wilfred
answered 10 years ago

To add a second sidebar and have both of theme on your site, please follow my instruction here:
1. Open home.php in your site> wp-content > themes > your theme > home.php
2. Go to line 47 and add the following code:

 <?php get_sidebar('secondary'); ?>

3. Open header.php in your site> wp-content > themes > your theme > header.php
4. Go to line 29 and add the following code:

 <script type="text/javascript">
var contentWidth = jQuery('.blog #content.masonry').width();
jQuery('.blog #content.masonry').width(contentWidth - 240 + 'px');
</script>

5. Go to Dashboard > Appearance > Customize > Website Setup
6. Add the following code to Custom CSS

 #sidebar-secondary .item { min-width: 240px; }

@media (min-width: 1236px) {
.item {
    width: 25%; /* 4 cols */
}
.grid-double {
    width: 50%;
}
.grid-triple {
    width: 75%;
}
}

Hope this helps!

R Brad
replied 10 years ago

Tried this and didn’t move to the right, placed the bar below the content area. I am doing this through the editor in WP and the line numbers have changed a little with some small tweaks.

Wilfred
answered 10 years ago

Can you please provide me your site URL and admin account (via private question) for further checking?
Thanks

DominicStaff
answered 10 years ago

Hi @R Brad !

Please open the home.php file, add the following code to the line 37

<?php get_sidebar('secondary'); ?>

5-6: log in to Dashboard > Theme > Customize > Custom code then add the following code to the "Header Code"

#sidebar-secondary .item { min-width: 240px; }
@media (min-width: 1236px) {
.item { width: 25%; }
.grid-double { width: 50%;}
.grid-triple { width: 75%;}
}
#content.masonry { float: left;  max-width: 1000px !important;  width: 100% !important;}

Hope this helps !

acarri1
replied 9 years ago

Hello, How do I add this to the Wall Pin theme? When I switched to this theme the second sidebar no longer shows.

dominic Staff
replied 9 years ago

I have checked on our demo and it’s work fine, you send me username & password of your site via private answer for further checking.

acarri1
replied 9 years ago

Hi Dominic,
I do now see the second sidebar however it is under the main left sidebar and not on the right side of the screen. Is it an issue with the width of the 2nd sidebar. I tried modifying the columns and it didn’t fix the sidebar issue.

dominic Staff
replied 9 years ago

Have you tried add the following code to the style.css file:

#sidebar-secondary .item { min-width: 240px; }
@media (min-width: 1236px) {
.item { width: 25%; }
.grid-double { width: 50%;}
.grid-triple { width: 75%;}
}
#content.masonry { float: left;  max-width: 1000px !important;  width: 100% !important;}

If you still face there issue, please send me your URL site for further checking.
Regards,