How to display comments on different page

I am creating a reviews site and I want to display the customer reviews (comments) on a separate page from the single-restaurant.php. I’ll just have a link that says (Read reviews/ add yours).

I created a custom comments template and called it comments-side.php and this is what I have in it:

<?php
/**
 * Comments Template
 *
 */

?>

<div id="comments-template" class="comments-side">

    <div class="comments-wrap">

        <div id="comments">

            <?php if ( have_comments() ) : ?>

                <?php do_atomic( 'before_comment_list' );// supreme_before_comment_list ?>



                <ol class="comment-list">
                <?php $args = array(
    'walker'            => null,
    'max_depth'         => '10',
    'style'             => 'ul',
    'callback'          => 'mytheme_comment',
    'end-callback'      => null,
    'type'              => 'all',
    'reply_text'        => 'Reply',
    'length'            => '10',
    'page'              => '',
    'per_page'          => '3',
    'avatar_size'       => 32,
    'reverse_top_level' => null,
    'reverse_children'  => '',
    'format'            => 'xhtml', //or html5 @since 3.6
    'short_ping'        => false // @since 3.6
); ?>
                    <?php wp_list_comments( $args, $comments); ?>
                </ol><!-- .comment-list -->

                            <?php endif; ?>

        </div><!-- #comments -->

        <?php $comment_args = array( 'fields' => apply_filters( 'comment_form_default_fields', array(
                        'author' => '<div class="form_row clearfix">' .
                                    '<input id="author" name="author" type="text" value="' .
                                    esc_attr( $commenter['comment_author'] ) . '" size="30"' . @$aria_req . ' PLACEHOLDER="'.__('Your name','supreme').'"/>' .
                                    ( $req ? ' <span class="required">*</span>' : '' ) .
                                    '</div><!-- #form-section-author .form-section -->',
                        'email'  => '<div class="form_row clearfix">' .
                                    '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . @$aria_req . ' PLACEHOLDER="'.__('Email Address','supreme').'"/>' .
                                    ( $req ? ' <span class="required">*</span>' : '' ) .
                            '</div><!-- #form-section-email .form-section -->',
                        'url'    => '<div class="form_row clearfix">' .
                                    '<input id="url" name="url" type="text" value="' . esc_attr(  $commenter['comment_author_url'] ) . '" size="30"' . @$aria_url . ' PLACEHOLDER="'.__('Website','supreme').'"/>'.'</div>')),
                        'comment_field' => '<div class="form_row clearfix">' .
                                    '<textarea id="comments" name="comment" cols="45" rows="8" aria-required="true" PLACEHOLDER="'.__('Comments','supreme').'"></textarea>' .
                                    ( $req ? ' <span class="required">*</span>' : '' ) .
                                    '</div><!-- #form-section-comment .form-section -->',
                        'comment_notes_after' => '',
                        'title_reply' => __( 'Add a comment', 'supreme' ),
                    );
                    if(get_option('default_comment_status') =='open'){
                        comment_form($comment_args); } // Loads the comment form.  ?>

    </div><!-- .comments-wrap -->

</div><!-- #comments-template -->

However, when I try to go to the comments template (http://myurl.com/post-slug/comments-side/), the page throws a 404 error. I changed permalinks to the default setting and switched it back to /%postname%/ but I still get the 404.

How do I get this to work properly?

I don’t know if it is relevant but this is what I have in my functions.php for the comments:

function mytheme_comment($comment, $args, $depth) {
        $GLOBALS['comment'] = $comment;
        extract($args, EXTR_SKIP);

        if ( 'div' == $args['style'] ) {
            $tag = 'div';
            $add_below = 'comment';
        } else {
            $tag = 'li';
            $add_below = 'div-comment';
        }
?>
        <<?php echo $tag ?> <?php comment_class(empty( $args['has_children'] ) ? '' : 'parent') ?> id="comment-<?php comment_ID() ?>">
        <?php if ( 'div' != $args['style'] ) : ?>
        <div id="div-comment-<?php comment_ID() ?>" class="comment-body">
        <?php endif; ?>
        <div class="comment-author vcard">
        <?php if ($args['avatar_size'] != 0) echo get_avatar( $comment, $args['avatar_size'] ); ?>
        <?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
        </div>
<?php if ($comment->comment_approved == '0') : ?>
        <em class="comment-awaiting-moderation"><?php _e('Your comment is awaiting moderation.') ?></em>
        <br />
<?php endif; ?>

        <div class="comment-meta commentmetadata"><a href="https://wordpress.stackexchange.com/questions/105531/<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>">
            <?php
                /* translators: 1: date, 2: time */
                printf( __('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','' );
            ?>
        </div>

        <?php comment_text($comment_ID); ?> 

        <a href="comments-side/#comment-<?php comment_ID() ?>" class="comment-more">read more</a>

        <div class="reply">
        <?php comment_reply_link(array_merge( $args, array('add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
        </div>
        <?php if ( 'div' != $args['style'] ) : ?>
        </div>
        <?php endif; ?>
<?php
        }

This is what I have in single-restaurant.php to show the recent comments for that each single post from the “restaurants” post type

<div class="sidereviews clearfix"> 
<h3>Recent Reviews</h3>  
<?php comments_template( '/comments-side.php', true ); // Loads the comments-side.php template. ?>
</div><!--/sidereviews-->

You need to create a page from wp-admin->Pages and assign your template as the “Template”. Until you do that, WordPress won’t know where to find the “page”– won’t know what to do with the request– and you will get a 404. I think that is about it, really.

Think about where your file is actually located on the server– http://sitename.com/wp-contents/themes/themename/comments-side.php— but you are trying to access it at http://myurl.com/post-slug/comments-side/, exactly where it isn’t. WordPress and the server conspire to lie about file locations, so for this to work WordPress has to be told about the page. The rewrite mechanisms won’t work otherwise.

The bare minimum for getting your comments to work is to pass the post ID via a get parameter like this– http://sitename.com/wp-contents/themes/themename/comments-side.php?sac=123— and fetch comments like this:

if (isset($_GET['sac'])) {
  $comments = get_comments(array('post_id'=>$_GET['sac']));
  wp_list_comments('',$comments);
}

I can’t get function like have_comments to work though I’ve not tried before now. There may be a way to do it. So, until further notice remove the have_comments check. That will fail.

There is no data validation in that code. I’m just testing things. Don’t push the GET string through without validation.