Moving one sidebar

Hi @infolotnicze,

It is possible to make that sort of change to the theme’s layout via a child theme. The HTML, CSS, and PHP involved with adding a sidebar to the left side and removing one from the right is advanced, however. The specific code that’s needed goes beyond the scope of support that this forum is intended for and would require you to experiment.

If you’re comfortable experimenting, I recommend the following guide as a starting point for understanding how widget areas created in themes:

https://codex.wordpress.org/Widgetizing_Themes#How_to_display_new_Widget_Areas

Copy/paste Publication’s sidebar.php file to your child theme’s directory to get an idea of how the two sidebars (sidebar-1 and sidebar-2) are currently being called and displayed within one HTML container/<div>. The sidebars are then called via <?php get_sidebar(); ?> in the theme’s index.php and single.php files.

As a starting point, I recommend splitting the two sidebars up into different HTML containers in your child theme’s sidebar.php file:

<div id="left-sidebar" class="widget-area" role="complementary">
	<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
		<div class="widget-column">
			<?php dynamic_sidebar( 'sidebar-1' ); ?>
		</div><!-- .widget-column -->
	<?php endif; ?>
</div>

<div id="secondary" class="widget-area" role="complementary">
	<?php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
		<div class="widget-column">
			<?php dynamic_sidebar( 'sidebar-2' ); ?>
		</div><!-- .widget-column -->
	<?php endif; ?>
</div><!-- #secondary -->

You could then call them separately using <?php dynamic_sidebar( 'sidebar_1' ); ?> and <?php dynamic_sidebar( 'sidebar_2' ); ?> in your child theme’s index.php and single.php files.

Hope that helps point you in the right direction!

That would definitely be a bit more straightforward. 🙂 The following CSS would hide the first sidebar and then widen the width of the main content area:

.widget-column:first-child {
    display: none;
}

@media screen and (min-width: 1272px) {
    .widget-area {
        width: 33.33%;
    }

    .content-area {
        width: 66.66%;
    }
}

Give that a go and let me know how you get on.

Perfect! I’m glad that helped out. 🙂