2 Sidebar Layout

tedheywood
(@tedheywood)

7 years ago
Hi,

Great theme!

And one of the few that supports a 2 sidebar layout.

I noticed that when the 2 sidebar layout for posts is enabled the html renders as follows:
```
<div id="content-wrap" class="container clr">
       <div id="primary" class="content-area clr"></div>
       <aside id="left-sidebar"></aside>
       <aside id="right-sidebar"></aside>
</div>
```
This creates a lot of positioning errors since the content div goes before the left sidebar.

Is there a way to change the layout to the following:
```
<div id="content-wrap" class="container clr">
       <aside id="left-sidebar"></aside>
       <div id="primary" class="content-area clr"></div>
       <aside id="right-sidebar"></aside>
</div>
```
That way the the left sidebar goes first in code?

Thanks

Viewing 3 replies - 1 through 3 (of 3 total)

(@apprimit)

Hello,

Unfortunately, at present, there is no option to change it. If you want to do it by editing the theme file using a child theme, then you need to also add the css code to make it work.

This reply was modified 7 years ago by Amit Singh.

Thread Starter

tedheywood

(@tedheywood)

7 years ago

Hi Amit,

Thanks for your response.

That’s fine!

I think I solved it but if you have better suggestions let me know.

I took the code from the sidebar-left.php and pasted it inside singular.php right after the <?php do_action( ‘ocean_before_primary’ ); ?> hook.

so my singular.php looks like this now:

 <?php
/**
 * The template for displaying all pages, single posts and attachments
 *
 * This is a new template file that WordPress introduced in
 * version 4.3.
 *
 * @package OceanWP WordPress theme
 */

get_header(); ?>

	<?php do_action( 'ocean_before_content_wrap' ); ?>

	<div id="content-wrap" class="container clr">

		<?php do_action( 'ocean_before_primary' ); ?>
		

<?php do_action( 'ocean_before_sidebar' ); ?>

<aside id="left-sidebar" class="sidebar-container widget-area sidebar-secondary"<?php oceanwp_schema_markup( 'sidebar' ); ?>>

	<?php do_action( 'ocean_before_sidebar_inner' ); ?>

	<div id="left-sidebar-inner" class="clr">

		<?php
		if ( $sidebar = oceanwp_get_second_sidebar() ) {
			dynamic_sidebar( $sidebar );
		} ?>

	</div><!-- #sidebar-inner -->

	<?php do_action( 'ocean_after_sidebar_inner' ); ?>

</aside><!-- #sidebar -->

<?php do_action( 'ocean_after_sidebar' ); ?>		
		

		<div id="primary" class="content-area clr">

			<?php do_action( 'ocean_before_content' ); ?>

			<div id="content" class="site-content clr">

				<?php do_action( 'ocean_before_content_inner' ); ?>

				<?php
				// Elementor <code>single</code> location
				if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'single' ) ) {
					
					// Start loop
					while ( have_posts() ) : the_post();

							// EDD Page
							if ( is_singular( 'download') ) {
								get_template_part( 'partials/edd/single' );
							}

							// Single Page
							elseif ( is_singular( 'page' ) ) {

								get_template_part( 'partials/page/layout' );

							}

							// Library post types
		    				elseif ( is_singular( 'oceanwp_library' )
		    						|| is_singular( 'elementor_library' ) ) {

		    					get_template_part( 'partials/library/layout' );

		    				}

							// All other post types.
							else {

		    					get_template_part( 'partials/single/layout', get_post_type() );

		  					}

					endwhile;

				} ?>

				<?php do_action( 'ocean_after_content_inner' ); ?>

			</div><!-- #content -->

			<?php do_action( 'ocean_after_content' ); ?>

		</div><!-- #primary -->

		<?php do_action( 'ocean_after_primary' ); ?>

	</div><!-- #content-wrap -->

	<?php do_action( 'ocean_after_content_wrap' ); ?>

<?php get_footer(); ?>

Then it needs a couple lines of CSS but that’s the easy part

Amit Singh

(@apprimit)

7 years ago

Yes, it is good and will work as per your need. I don’t think, it can be achieved by other methods since it has only css code for left/right or other layouts.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘2 Sidebar Layout’ is closed to new replies.

Tags