Moving Comments

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 :)

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

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 :)

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.

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

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.

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

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.

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.

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.

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

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.

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

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();
}