Hello, I’m Nicole Manalo, a Front-end Team Lead for five years now. I’ve been a PHP developer since 2014 or 2015, but I only started working on customizing some templates and other functionalities on wordpress when I got here in the company. In this article I will be assisting you on how to customize the look of your comment layout on the front side.
The original comment’s visual look was like this. More information is visible on the screen, such as thumbnail, logged in account name, date and time, and the main content/comment. And the form has a lot of information needed to add, so our client requested only specific information such as public name since they’re using a single account per department, and the comment itself.
Default comment layout of wordpress for default theme Twenty Twenty-One
Client custom layout look
Here’s the sample solution when the client requested a custom look of the comment section.
1. Install a plugin to add a custom field of public name, since the client was using one account, and wordpress uses the default first name and last name of comment, we will make some workaround.
Plugin name: WP Comments Field
Plugin URL: https://ja.wordpress.org/plugins/wp-comment-fields/
Setup on plugin:
a. Include the post type / custom post type to use the wp comment fields
Add this image: https://gyazo.com/fe87380edd36b3d8e3029e4de2067034
b. Added field settings for public name
Add this image: https://gyazo.com/74ba31f18295b837a92ef7519fb6521c
2. Install another plugin to remove links/field in between comments
Plugin name: Comment Link Remove and Other Comment Tools
Plugin URL: https://wordpress.org/plugins/comment-link-remove/
Setup on plugin:
a. Tick the checkbox of “Remove WEBSITE field from comment form”
Add this image to blog: https://gyazo.com/a3083716a5f90f58cc4194d9834dfae7
3. Comment functionality was generated by wordpress, so it’s already built from the front-end. I added here some workaround using JS and CSS. It depends on the layout and structure but this works on my side.
Add image of JS code on blog: https://gyazo.com/be469044cced7167402faf940d11417a
Add image of CSS code on blog: https://www.awesomescreenshot.com/image/31465711?key=2482486f8c6c210327b9ac1f2873291d
- Some parts must be hard to understand since we’re using scss. css is just a workaround for the layout, some are hidden, some are adjusted depending on the client’s layout.
4. Add the comment functionality on your custom template single page.
Add image: https://gyazo.com/24f82e3e504082b9856e5c39059a4bcb
- The get_field code was originally from the ACF, we added an option on the custom post type itself to enable/disable the wordpress comment function, but ideally there’s a default option on the post itself, I just used it to match the layout with other custom fields.
There you have it, the comment function was already customized using the steps above. If you have more questions or clarifications, kindly contact me using this email [nicole_manalo@commude.ph]