Raddy The Brand Official Website

WordPress Theme Development – Comment Section and Replies

By Raddy in WordPress ·

The old code no longer works and I had to remove the video. The code in the article has now been updated and it should work as normal.

<?php

if ( post_password_required() ) {
  return;
}
?>

<div id="comments" class="comments-area minimalist_comments">

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

    <?php the_comments_navigation(); ?>

    <ol class="commentlist">
      <?php
      wp_list_comments(
        array(
          'style'      => 'ol',
          'short_ping' => true,
          'avatar_size' => '62'
        )
      );
    
      ?>
    </ol><!-- .comment-list -->

    <?php
    the_comments_navigation();

    if ( ! comments_open() ) :
      ?>
      <p class="no-comments"><?php esc_html_e( 'Comments are closed.', 'rad' ); ?></p>
      <?php
    endif;

  endif; // Check for have_comments().

  comment_form();
  ?>

</div>

/* Comments */
#commentform {

  textarea {
      min-height: 200px;
      width: 100%;
  }

  input {
      width: 100%;
  }

  input[type="submit"] {
      background-color: #000;
      color: #fff;
  }

  input[type="submit"]:hover {
      background-color: $primary-color-hover;
      color: #fff;
  }

  .comment-form-cookies-consent {
      input, label {
          display: inline-block;
          width: auto;
      }
  }

}

.comment-respond { 
  clear: both; 

  a:first-child {
      color: $accent-color
  }

  a:last-child {
      margin-left: 10px;
      color: $primary-color
  }

}

.nocomments {
  padding: 30px;
  text-align: center;
}

ol.commentlist {
  position: relative;
  padding: 0;
  list-style-type: none;
  list-style-position: inherit;


  .children {
      position: relative;
      list-style: none;
  }

  li.comment.depth-1  {
      border-bottom: 1px solid $secondary-color;
  }

  .comment-body { padding: 2em 0 1.2em 80px; }

  p.comment-text { margin: 0; }

  cite { text-transform: capitalize; font-weight: bold; font-style: normal;}

  .comment-meta {
      display: inline-block;
      font-size: smaller;
  }
  
  img.avatar {
      position: absolute;
      left: 0;
  }
  
  input[type="button"], input[type="submit"] {
      background-color: #000;
      color: $secondary-color;
  }

  form { margin-top: 4em; }
  .cm-name { text-transform: capitalize; }
  .comment-meta {
      a { color: rgb(151, 151, 151); }
  }

  .alert-approval {
      color: #155724;
      position: relative;
      padding: .75rem 1.25rem;
      margin-bottom: 1rem;
      border: 1px solid transparent;
      background-color: #d4edda;
      border-color: #c3e6cb;
  }
  
}

To insert your comments on blog posts:

            <?php 

                // If comments are open or we have at least one comment, load up the comment template.
                if ( comments_open() || get_comments_number() ) :
                    comments_template();
                endif;
            ?>

Follow my YouTube channel for more Tutorials like this one. Thank you for watching and reading this article.

Functions reference: https://codex.wordpress.org/Function_Reference/wp_list_comments

  1. testing the comment box!

Leave a Reply

Your email address will not be published. Required fields are marked *