[Resolved] Moving Comments

[Andy]

Hi,

I’m using a custom single post template so that I can add custom fields to the sidebar. In mobile view, currently the sidebar sits below the comments section (I believe the default template does the same), how would I move the comments section so it sits below the sidebar in mobile view?.

My custom template code:

<?php
/*
 * Template Name: Custom Single Post
 * Template Post Type: post
 */
  
 get_header();  ?>

 <div id="primary" <?php generate_content_class();?>>
		<main id="main" <?php generate_main_class(); ?>>
			<?php
			/**
			 * generate_before_main_content hook.
			 *
			 * @since 0.1
			 */
			do_action( 'generate_before_main_content' );

			while ( have_posts() ) : the_post();

				get_template_part( 'content', 'single' );

				// If comments are open or we have at least one comment, load up the comment template.
				if ( comments_open() || '0' != get_comments_number() ) :
					/**
					 * generate_before_comments_container hook.
					 *
					 * @since 2.1
					 */
					do_action( 'generate_before_comments_container' );
					?>

					<div class="comments-area">
						<?php comments_template(); ?>
					</div>

					<?php
				endif;

			endwhile;

			/**
			 * generate_after_main_content hook.
			 *
			 * @since 0.1
			 */
			do_action( 'generate_after_main_content' );
			?>
		</main><!-- #main -->
	</div><!-- #primary -->

	<div id="right-sidebar" itemtype="https://schema.org/WPSideBar" itemscope="itemscope" class="widget-area grid-30 tablet-grid-30 grid-parent sidebar">
		 <div class="inside-right-sidebar">
		    <aside class="widget"> 
		      <h2 class="widget-title">Route Details</h2>
		      	<ul class="post-meta">
			      <li>Distance: <?php echo get_post_meta($post->ID, 'Distance', true); ?></li> 
			      <li>Time: <?php echo get_post_meta($post->ID, 'Time', true); ?></li>  

			      <li><?php echo get_post_meta($post->ID, 'Download', true); ?></li>  
			    </ul>  
		    </aside>	
		    <aside class="widget">
		    	<h2 class="widget-title">Further Reading</h2>
		    	<?php echo get_post_meta($post->ID, 'Amazon Link', true); ?>
		    	<hr>
		    </aside>

		    <aside class="widget">
		       	<ul>
				    <?php wp_list_categories( array(
				        'title_li' => '<h2 class="widget-title">' . __( 'All Categories', 'textdomain' ) . '</h2>'
				    ) ); ?> 
				</ul>
		    </aside>	
		    <aside class="widget inner-padding widget_recent_entries">
		    	<ul>
		      <h2 class="widget-title">Recent Posts</h2>	
				<?php
					$args = array( 'numberposts' => '5', 'tax_query' => array(
							array(
								'taxonomy' => 'post_format',
								'field' => 'slug',
								'terms' => 'post-format-aside',
								'operator' => 'NOT IN'
							), 
							array(
								'taxonomy' => 'post_format',
								'field' => 'slug',
								'terms' => 'post-format-image',
				 				'operator' => 'NOT IN'
							)
					) );
					$recent_posts = wp_get_recent_posts( $args );
					foreach( $recent_posts as $recent ){
						echo '<li><a href="' . get_permalink($recent["ID"]) . '">' .   ( __($recent["post_title"])).'</a> </li> ';
					}
					wp_reset_query();
				?>
</ul>

		    </aside>

   		  </div><!-- .inside-right-sidebar -->
	</div>

<?php

get_footer();

[Leo]

Hi there,

I think the same idea here should work:
https://generatepress.com/forums/topic/change-order-on-mobile/#post-157121

Can you try and see if you can work it out?

Let me know if you need more info 🙂

[Andy]

Thanks Leo. Unfortunately I’m already using .site-content { display:flex; } in desktop view (min-width:769px;) to make the sidebar full-height, I then have to change .site-content back to display:block at 768px to get the sidebar to stack underneath as normal.

Maybe I’m trying to do too much, but I have a custom ‘summary’ type widget in the sidebar which I think would work better directly underneath the end of the post, not after the comments section.

I’ve edited my original post with a link to the dev site, front-end pass is gpaccess18

[Leo]

Sorry I’m bit confused. Looks like Tom’s code is also using display: flex; for mobile.

Wouldn’t that just mean both desktop and mobile are the same?

What about adding the widget in a div in generate_after_entry_content hook and make them show on mobile only?

There is also the generate_before_comments_container as well.

Let me know if I’m missing something 🙂

[Andy]

If I use display:flex; on mobile I have found the site-content and sidebar columns do not stack, they stay next to each other. To stop this happening I had to set site-content back to display:block;

The summary widget in the sidebar is actually a custom field, so I tried your suggestion of adding the code to the generate_before_comments_container using the code snippets plugin as below:

add_action( 'generate_before_comments_container ','insert_summary_before_comments' );  
function insert_summary_before_comments() { ?> 
    <ul class="post-meta">
			      <li>Distance: <?php echo get_post_meta($post->ID, 'Distance', true); ?></li> 
			      <li>Time: <?php echo get_post_meta($post->ID, 'Time', true); ?></li>  
			      <li style="font-weight:500;"><?php echo get_post_meta($post->ID, 'Download', true); ?></li>  

			    </ul>  
<?php }

Unfortunately nothing is displaying.

[Leo]

Hmm did you try to apply Tom’s code with the order?

Using the order should stack them.

If you go with the other way I believe you have to turn those into shortcode like this example:
https://generatepress.com/forums/topic/page-header-for-search-results/#post-403642

[Andy]

ok I have them stacking and ordering works when it’s just .content-area and #right-sidebar, but the .comments-area div is nested inside .content-area so I’d tried the following code:

@media (max-width: 768px) {
		
.site-content {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
 	}	
	
		
  #article {
		-webkit-box-ordinal-group: 1;
		-moz-box-ordinal-group:1;
		-ms-flex-order:1;
		-webkit-order: 1;
		order: 1;
	}	
	
 #right-sidebar	 {
		-webkit-box-ordinal-group: 2;
		-moz-box-ordinal-group: 2;
		-ms-flex-order: 2;
		-webkit-order: 2;
		order: 2;
		
	}
	
	.comments-area {
		-webkit-box-ordinal-group: 3;
		-moz-box-ordinal-group: 3;
		-ms-flex-order: 3;
		-webkit-order: 3;
		order: 3;
	}	
	
	
}

Unfortunately this isn’t working either, the sidebar is still sitting last on the page.

[Tom]

You would have to move the comments code inside your template outside of the content area to do this.

However, I’m not 100% sure that it will work, as that will put it outside the loop.

So you would do this:

Primary container
Sidebar container
Comments container

[Andy]

Yeh I had tried that already but it didn’t work unfortunately. I moved the following code below the sidebar container:

// If comments are open or we have at least one comment, load up the comment template.
				if ( comments_open() || '0' != get_comments_number() ) :
					/**
					 * generate_before_comments_container hook.
					 *
					 * @since 2.1
					 */
					do_action( 'generate_before_comments_container' );
					?>

					<div class="comments-area">
						<?php comments_template(); ?>
					</div>

					<?php
				endif;

I think I may have to just leave it as it is.

[Tom]

What about it didn’t work? The comments didn’t show up? If so, that could be because it needs to be within the content loop unfortunately.

[Andy]

Yeh I either got PHP errors or they just didn’t display. As you say they have to be part of the loop.

What I might do is output the custom field before the comments too and just hide/display as necessary with CSS.

[Andy]

I don’t think I can do that actually because the php would need to be within the while loop.

[Andy]

Going back to Leo’s other suggestion, I’m not sure how to turn the following code into a shortcode:

add_action( 'generate_before_comments_container ','insert_summary_before_comments' );  
function insert_summary_before_comments() { ?> 
    <ul class="post-meta">
			      <li>Distance: <?php echo get_post_meta($post->ID, 'Distance', true); ?></li> 
			      <li>Time: <?php echo get_post_meta($post->ID, 'Time', true); ?></li>  
			      <li style="font-weight:500;"><?php echo get_post_meta($post->ID, 'Download', true); ?></li>  

			    </ul>  
<?php }

I did look at the example he linked too but still not sure.

[Leo]

Try replacing Search results for: <?php echo get_search_query(); ?> in Tom’s code with whatever code you are trying to do.

[Andy]

Tried this but nothing displayed:

add_shortcode( 'search', 'insert_before_comments' );
function insert_before_comments() {
    ob_start(); ?>
        add_action( 'generate_before_comments_container ','insert_summary_before_comments' );  
function insert_summary_before_comments() { ?> 
    <ul class="post-meta">
			      <li>Distance: <?php echo get_post_meta($post->ID, 'Distance', true); ?></li> 
			      <li>Time: <?php echo get_post_meta($post->ID, 'Time', true); ?></li>  
			      <li style="font-weight:500;"><?php echo get_post_meta($post->ID, 'Download', true); ?></li>  

			    </ul>  
    <?php
    return ob_get_clean();
}

[Author]

Posts