Join 9,000+ Readers

Tips for Styling your own WP Comments Form Area

by Jake Rocheleau

on June 2, 2013

in Wordpress

WordPress developers love to get into the system and hack away at their own function codes. Both JavaScript and PHP gurus are notorious for building some really amazing plugins. And since WordPress is open source it allows for greater accomplishments in much less time. I think one interesting area of the WP blogging platform is within user comments.

wordpress paper comments featured image articles

I want to offer some tips for customizing your own WordPress comments area. This includes both the comment form and displaying comments. There are a surprising number of features to consider just for a small bit of user discussion. But as the Internet grows to be more dynamic you can expect to see these features as commonplace in most websites.

Getting Started

Obviously the first place to build your codes would be inside your own theme. Typically developers start with a file named comments.php for displaying the WP comment form. It would include all the normal fields for the user’s name, email, web address(optional), along with their full comment. Check out the comment_form() function reference for more details.

One thing you may consider changing is the default HTML code inside your form. Input fields have grown with more support of updated page elements. The HTML5 input fields allow for new types such as email and URL, notably useful in this scenario.

wordpress form input fields design styles

I found an excellent article about styling WordPress’ comment form published on WP Beginner. It has a lot of great code samples useful in your own layouts. Definitely spend a bit of time copying/pasting into your theme and see how you like the changes. Or even search through Google and pinpoint a list of similar resources for designing comment forms.

Using Custom Fonts

One unique feature which many people don’t consider is a custom typeface. The fonts used on your website will influence the design aesthetic, so it is worth attempting different ideas. The easiest solution would be to pick out a family name from Google Web Fonts and see how it looks inside an input field. Sometimes fonts will not always look as good as you would expect.

google webfonts homepage choices custom css3 typography

Consider including other design facets like CSS3 transition properties. Text fades and box shadow effects are common, plus text shadows can look nice when added to the right fonts. Overall the process of designing comments will be a challenge because each code block will be different for various themes. But don’t be afraid of experimenting and trying out new ideas!

Editing User Comments

Normally inside the comments.php file you will find a line that looks like this:

<ol class="commentlist">
   <?php wp_list_comments(); ?>
</ol>

It basically forces developers to work inside an ordered/unordered list of comments. Not the best method for customization, and even with your own CSS it can be annoying to reposition avatars and timestamps. But an easier way to handle this feature is through a comments callback function. You can write your own function inside your theme’s functions.php and it will handle the markup output for each comment in the loop.

<?php wp_list_comments('type=comment&callback=format_comment'); ?>

In the example tutorial link above on DigWP the code is still working within an ordered list element. Of course you may keep this structure if you like the nesting, especially with threaded comments. But I have also been happy redesigning user comments with div containers along with appending a clearfix class to float user avatar photos. You can find a similar example on CSS Tricks which is using the same callback method technique.

Related Posts

Final Thoughts

Other webmasters may agree that WordPress is one of the easiest CMS platforms to manage. There are lots of security updates and the code is stable enough to build off your own themes and plugins. Namely the comments area is not always of great importance, but it is nice to allow such in-depth customization. I hope this article may prove as a useful resource for coders who are just getting interested in WordPress. If we have skipped over any great ideas please share your thoughts in the post discussion area below.

About Jake Rocheleau

Jake is a freelance writer and web developer. He writes articles for numerous blogs on freelancing, Wordpress, CSS3, and jQuery. You can find him all throughout Google and follow his tweets @jakerocheleau. Connect with Jake on Google +