Show WordPress comments in drop-down format in a Genesis theme

Learn in this tutorial how to display comments in accordion or drop-down format, i.e. they are not displayed until the user clicks on the button.

A subscriber told me that he managed a website where there were a lot of comments in the posts and that, in order to maintain a “cleaner” navigation, he preferred to hide them until the user decided to read them.

There are many ways to achieve this, but in this case we are going to take advantage of the fact that there is a block of comments to add some HTML around it and make it show as an accordion.

We’ll create a reusable block that wraps the comments and use Genesis hooks to hook it into the theme comments area.

This would be the final result:

Here is the code you need:

Instructions for displaying WordPress comments in accordion

1. Create a reusable block containing the comments block + HTML

The idea is to add some HTML before and after the comment block, to allow you to create an accordion by combining it with some CSS.

You can copy this HTML which contains everything you need:

<!-- wp:group {"className":"accordion-wrap","layout":{"type":"constrained"}} -->
<div class="wp-block-group accordion-wrap"><!-- wp:html -->
<input type="radio" id="display_comments" name="display_comments_check" value="Si"/>
<label for="display_comments"><span>View comments</span></label>
<div class="comments-wrap">
<!-- /wp:html -->

<!-- wp:comments {"className":"comments-accordion"} -->
<div class="wp-block-comments comments-accordion"><!-- wp:comments-title /-->

<!-- wp:comment-template -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"40px"} -->
<div class="wp-block-column" style="flex-basis:40px"><!-- wp:avatar {"size":40,"style":{"border":{"radius":"20px"}}} /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:comment-author-name {"fontSize":"small"} /-->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"flex"}} -->
<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px"><!-- wp:comment-date {"fontSize":"small"} /-->

<!-- wp:comment-edit-link {"fontSize":"small"} /--></div>
<!-- /wp:group -->

<!-- wp:comment-content /-->

<!-- wp:comment-reply-link {"fontSize":"small"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:comment-template -->

<!-- wp:comments-pagination -->
<!-- wp:comments-pagination-previous /-->

<!-- wp:comments-pagination-numbers /-->

<!-- wp:comments-pagination-next /-->
<!-- /wp:comments-pagination -->

<!-- wp:post-comments-form /--></div>
<!-- /wp:comments -->

<!-- wp:html -->
<div>
<!-- /wp:html --></div>
<!-- /wp:group -->

Once you have pasted the above code into your editor, go to the three dots on the block toolbar and choose “Create reusable block”.

Then give it a name and save it.

2. Examine the block ID

Once you have created the block, go to “code editor” mode and examine the HTML.

Pro tip: use the keyboard shortcut Cmd + Alt + Shift + M to go faster.

At the height of where you have created the block you will see something similar to:

<!-- wp:block {"ref":409} /-->

That number is the ID of your block and you will need it next.

2.1. [Bonus] Get the block ID in a simple way

If you are going to work with reusable blocks often and you want to have the ID more at hand I recommend you to apply these two tutorials:

• Display reusable blocks in the WordPress admin menu
• Adding a column with the posts and pages ID to WordPress admin

This way you can access the reusable blocks more easily and get the ID at a glance.

3. Display the reusable block in the comment area

Add the following snippet to the functions.php file:

In the first part of the code you remove the comments that Genesis Framework adds, by default, at the end of each entry.

And in the second you add in the same hook (genesis_after_entry) the reusable block. You can obtain and modify the ID of the block as you have seen in the previous steps.

4. Customize the CSS of the comments

Once you have replaced the default Genesis comments with the reusable block, you just need to take advantage of the CSS magic to hide or show the comments.

To do this, add this block to the end of style.css:

By inserting these CSS lines you make sure that by default the comments of the post are not displayed . And only by clicking on the “View comments” button they will be visible.

If you notice, you have used a bit of HTML and CSS to achieve an effect similar to what you would often achieve with JavaScript. The good thing is that this strategy is simpler and more efficient.

Conclusions

Now you know how to hide or show WordPress comments in a Genesis child theme in an drop-down format.

Would you prefer me to adapt this tutorial to another theme? Send me the details and the name of the child theme where you want to apply it through the contact form so I can create a custom tutorial with your request.

Benefits of being a subscriber. 🙂