Add sidebar to blog page only (Icon Stack)

Support
#1

Hello there,

I’m trying to find the best solution to add a 1/3+2/3 configuration for our blog page (sidebar left, content right).

We use a full width configuration globally and we don’t use a sidebar on our blog posts

I do not want to use Icon fixed sidebar on the right, which I was able to add following the instructions here: https://theme.co/apex/forum/t/add-sidebar-to-blog-page-only/32035

The problem is that this sidebar takes the entire page height and breaks our UX. I want to maintain the menu bar with 100% of the viewport width. I’m too scared to choose a different stack now that the theme has been heavily customized and relies on some of Icon’s markup.

Could you please guide me to add a sidebar directly next to blog posts inside x-main?

Thank you!

#2

Hello @thisisbbc,

Thanks for writing in!

The code given in the other thread will only work for Integrity, Renew and Ethos stack. Icon stack has a different layout. It does not offer any sidebars which is why when you use the Layout - Left Sidebar, Content Right or Layout - Content Left, Sidebar Right.

The icon stack has a fixed left sidebar or a fixed right sidebar only. You cannot add a sidebar next to the x-main area. You will need to switch to a different stack if you want to have a sidebar.

Hope this helps.

#3

I was afraid you were going to say that. Switching stacks breaks too many things.

Can’t I hook onto a function to force a different layout on the blog page?

Another option… Couldn’t I add wp-index.php to our child-theme and add a conditional check for the blog page? Something like that seems to be working fine but I’m not sure how to pull the ups-sidebar for the blog index from there:

<?php

// =============================================================================
// VIEWS/ICON/WP-INDEX.PHP
// -----------------------------------------------------------------------------
// Index page output for Icon.
// =============================================================================

get_header();

?>

<div class="x-main full" role="main">
	<?php if ( is_home() ) : ?>
		<div class="x-container offset-bottom">
			<div class="x-column x-sm x-1-3">
				<?php //Display Sidebar ?>
				<div class="sidebar">My lovely sidebar</div>
			</div>
			<div class="x-column x-sm x-2-3">
	<?php else : ?>
		<div class="x-container offset-bottom">
	<?php endif; ?>
		<?php x_get_view( 'global', '_index' ); ?>
	<?php if ( is_home() ) : ?>
			</div>
	<?php endif; ?>
		</div>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

If you could just help me to pull the sidebar from here that would be fantastic.

Thank you!

#4

@RueNel,

Made some more research and it doesn’t look like we’ll be able to easily have ajax filters with this approach.

The better way is probably to just replace the blog archive with a page using Essential Grid.

So my question now is, SEO-wise, if we do not set any blog archive page in WP Settings and use a custom regular page, is there any adverse effect to that?

Also, stability-wise, since a regular page would return FALSE to the is_home() function, could that potentially prevent plugins like Yoast to do blog-related optimizations?

I feel like our best option is probably to use Toolset to replace the Blog Archive programmatically with our custom template. I should be able to use Essential Grid and manipulate the query in a separate sidebar with this approach and maintain the blog archive page configured in WP.

I’m still curious to know how we can pull a sidebar in PHP, but I don’t think that’s the approach we’ll use.

Thank you!

#5

Hello @thisisbbc,

Your code was incorrect. It should be like this:

<?php

// =============================================================================
// VIEWS/ICON/WP-INDEX.PHP
// -----------------------------------------------------------------------------
// Index page output for Icon.
// =============================================================================

get_header();

?>

  <div class="x-main full" role="main">
    <div class="x-container offset-bottom">
    	<?php if ( is_home() ) : ?>
    		<div class="x-container offset-bottom">
				<div class="x-column x-sm x-1-3">
					<?php //Display Sidebar ?>
					<div class="sidebar">My lovely sidebar</div>
				</div>
				<div class="x-column x-sm x-2-3">
					<?php x_get_view( 'global', '_index' ); ?>
				</div>
			</div>
    	<?php else : ?>
      		<?php x_get_view( 'global', '_index' ); ?>
      	<?php endif; ?>

    </div>
  </div>

<?php get_footer(); ?>

If you do not assign any page as your blog index, you will have issues later on. Since you want to add ajax filters to the blog and would like to use Essential Grid, you might want to check this out:

Hope this helps.

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.