Position sidebar below content on mobile

So far, I love this theme. One thing I would like to be able to do, however, is to have the sidebar display above the page content in the mobile view. Is that possible? Thanks.

Hello there,

Basically, for SEO score purpose, the sidebar always be placed after the main content as usually main content contains the most important information. To change its default order, you need change the code structure on the following files:

  • archive.php
  • home.php
  • index.php
  • page.php
  • search.php
  • single.php

Since editing the template file is prohibited due to all files will be overwritten after update, you should use a child theme, and copy those files into child theme’s folder. Please read this codex which explains the why and how to create your own child theme. To make you easier to start working with Sydney, I’d recommend you use our premade Sydney child theme which can be downloaded from this page.

Once you’ve copied those files into sydney-child theme folder, open them in your code editor program. Find and cut this code block:


<?php
	if ( get_theme_mod('blog_layout','classic') == 'classic' ) :
	get_sidebar();
	endif;
?>

and then paste it right after get_header(); ?> line. So it will look like this:


get_header(); ?>

	<?php
		if ( get_theme_mod('blog_layout','classic') == 'classic' ) :
		get_sidebar();
		endif;
	?>

Save changes, then install activate the child theme.

If you loose customization you’ve done in the customizer, use this plugin to do manual synchronization.

Regards,
Kharis

I am sorry, I forgot one thing. You will need this CSS code to keep the sidebar position to always at the right side.


@media only screen and (min-width:992px) {
  
  #secondary {
    float: right;
  }
  
  #primary {
    float: left;
  }
  
}

Add it into Appearance > Customize > Additional CSS in your site dashboard.

Regards,
Kharis

Thank you so much for the quick reply. I will give this a try.