Using Right Sidebar Area

By Chris Piekarz

August 11, 2022, 3:37 pm EDT

Hi -

We are not using the primary or secondary sidebars and we want to expand our page content into that white space. We also want to keep the left sidebar navigation active, so using the full width page template is not an option. I created a new page template (code below) removing the sidebar( ) call, but the text doesn't move into that space. Manipulating the col-md and col-md-push values either causes the left sidebar to get overwritten or moves it from the left margin. So, is there a way to keep the left sidebar "anchored" to the left margin while allowing the main page content to expand?

UUA Theme 1.33, Wordpress 6.01, PHP 8.0

---------- Page template -------------

<?php
/**
* Template Name: No Right Sidebar
*
* Chris Piekarz
* Unitarian Universalist Fellowship of Northern Nevada
* 20220810
*/

get_header(); ?>

<?php
while ( have_posts() ) : the_post();

get_template_part( 'partials/content', 'page' );

// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;

endwhile; // End of the loop.
?>

</main>
</div>

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

<?php get_footer(); ?>

Comments (7)

Hi Chris,

Try changing the classes on the body column to:

And for the left sidebar:

I think that changes the width of the body column from 7 to 10, and changes the "pull left" value for the sidebar from 7 to 10, to match.

Well, that got us 90% there with some tweaking of your suggested col-md values. Now the problem is the left sidebar is squashed. Compare this page with the default template (note - we use a self-signed cert on our development website so your browser may grouse about security):

https://www.prov-uufnn.dreamhosters.com/about-us/

To this with the new template:

https://www.prov-uufnn.dreamhosters.com/about-us/visiting-us/

As you can see, the new template now flows into the right side white space and the left sidebar starts where we want it, but the left sidebar content is now compressed into what appears to be a single column vs. two.

---------Page source ----------

<?php

/**

* Template Name: No Right Sidebar

* Chris Piekarz

* Unitarian Universalist Fellowship of Northern Nevada

* 20220816

get_header(); ?>

<?php

while ( have_posts() ) : the_post();

get_template_part( 'partials/content', 'page' );

// If comments are open or we have at least one comment, load up the comment template.

if ( comments_open() || get_comments_number() ) :

comments_template();

endif;

endwhile; // End of the loop.

</main>

</div>

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

</div>

<?php get_footer(); ?>

On Visit Us I see:

Your main column is set to 9 instead of 10: <div class="primary-content col-md-9 col-md-push-2">

That should be <div class="primary-content col-md-10 col-md-push-2">

And your left sidebar seems to have almost duplicate classes on nested divs - I see: <div class="left-sidebar col-md-2 col-md-pull-8">
<div class="col-md-2 col-md-pull-7 left-sidebar">

That should be <div class="left-sidebar col-md-2 col-md-pull-10"> and if you can't get rid of the nested div with similar classes, at least remove its class attribute.

I'm not sure where you're picking up the second div class for the sidebar. When I look at my source code, this is all I see:

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

</div>

As far as changing primary content col-md-10, col-md-pull-10 the left sidebar now gets pushed entirely off the page into the page's purple margin. That's the reason I tweaked the valued to 9 to pull the menu back onto the page. This is the page with the primary content col-md-10 and left-sidebar col-md-pull-10:

https://www.prov-uufnn.dreamhosters.com/about-us/visiting-us/

I'm afraid all I can see is what's published to your site - I don't work in Wordpress at all; I just know a little about CSS grids. So when I view-source on that page and Ctrl+F for "left-sidebar" I find two instances of that right in a row:

If you remove the classes from that second div, your page looks just right to me. Unfortunately, I don't know where that's coming from in your source code, so I can't help you track it down.

Ciphered it out - there's a standalone snippet of PHP code called left-sidebar.php that has it's own embedded <div> clause, which in turn brings in the second class="col-md-2 col-md-pull-7 left-sidebar statement that you picked up in the page source. Since the call to left-sidebar.php is nested in the first <div> statement the left-sidebar.php <div> clause overrides the desired changes in the page template. Thanks for the css help and for pointing me in the right direction.

Glad to hear it! 🙂