[Resolved] Moving Comments

Home Forums Support [Resolved] Moving Comments

Home Forums Support Moving Comments

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #587772
    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();
    GeneratePress 2.1.2
    GP Premium 1.6.2
    #587979
    Leo
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #588042
    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

    #588208
    Leo
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #588227
    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.

    #588358
    Leo
    Staff
    Customer Support

    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

    #588365
    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.

    #588408
    Tom
    Lead Developer
    Lead Developer

    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

    #588683
    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.

    #588996
    Tom
    Lead Developer
    Lead Developer

    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.

    #589010
    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.

    #589016
    Andy

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

    #589141
    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.

    #589257
    Leo
    Staff
    Customer Support

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

    #589428
    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();
    }
Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.