This post forms part of our Science of Hosting campaign.

.

WordPress comment styling is often neglected, particularly with the increase of third-party theme installation. Whether you’re modifying a pre-made theme, creating your own from scratch, or simply working with a default, comment styling and functionality offer a lot to a website design and user experience and can help increase visitor engagement and interaction.If you design WordPress themes for professional websites, then thoughtful comment design adds that finishing touch and shows attention to detail.

This post is divided into separate sections so you can skip to bits which interest you. Each is designed as a standalone section so the article as a whole accommodates readers with different levels of expertise as well as those looking for a quick reference guide for code and plugins.

.

WordPress commenting from the visitors’ perspective

Although the default WordPress comment functionality and presentation is great, there are plenty of tweaks you can make to really get the maximum benefit and increase visitor interaction on your blog.

In terms of comment styling and functionality, there are two main aspects to consider:

1.Making commenting quick and easy for your visitors. Avoid spam plugins that add extra fields (e.g. CAPTCHA) to the comment form, and use form fields (particularly mandatory fields) sparingly to streamline the process. WordPress also provides functionality for user accounts to avoid retyping details, and centralised commenting systems such as Disqus are popular for the same reason.

2.Offering incentives to comment. For example, use CommentLuv, which posts a link to the commenter’s last blog entry, add a Twitter username field to your comment form, and display the number of comments of a commenter.

Balancing these elements will provide an enriched but streamlined commenting process for your visitors. If your comment form is stripped to the absolute minimum for ease of use, take a look at the ‘Expand the reach of WordPress comments’ section below to provide visitors with incentives.

.

Styling your WordPress comment form

This is the most straightforward part of comment design, and can be done using CSS (the preferred method) or with inline styles.

Below is some form CSS to paste into your WordPress theme’s style.css file (please note that in its current form, this code will be applied to all forms and fields on your site without specific CSS classes):

 

input

{

color: #000000;

background: #9999cc;

background-image:url(‘example.gif’);

font-size: 9pt;

border: 1px solid #333366

}

 

.submit input

{

color: #000;

background: #9999cc;

background-image:url(‘example.gif’);

font-size: 9pt;

border: 1px solid #333366

}

 

select {

color: #000;

background: #9999cc;

font-size: 9pt;

border: 1px solid #333366

}

 

textarea {

background-color: #9999cc;

color: #000000;

font-size: 9pt;

border: 1px solid #333366

}

The ‘input’ section refers to the single-line fields in your WordPress comment form (e.g. Name, Email), the ‘submit input’ to the button(s), and the ‘textarea’ to the message field.

Quick Guide:

color: #000000; – This is your form’s font colour – change #000000 to the hex colour of your choice.

background: #9999cc; – Change 9999cc to the colour you want for field backgrounds.

background-image:url(‘example.gif’); – Change ‘example.gif’ to display an image as the form field background (use the full URL if the image isn’t located in the theme’s folder). This can be used instead of a colour, but many people prefer to set options for both. Simple backgrounds or ‘faded’ effects are usually preferred to avoid making the text difficult to read.

font-size: 9pt; – The size of the text in the fields.

border: 1px solid #333366 – Changes your form’s border attributes. ‘1px’ is altered to change the thickness, 333366 can be changed to the hex colour of your choice, and ‘solid’ can be changed to ‘dotted’ or ‘dashed’ as preferred.

It’s best to make only one or two changes at a time, saving and viewing regularly to check the colours work well together and that text is easy to input and read. There are a variety of other CSS attributes you can apply, such as width and hover effects. Find out more at CSS Tricks or W3Schools.

Once you’re happy with your final design, make sure you test it both logged in and logged out for an accurate final impression. It’s also a good idea to test across different browsers and screen resolutions as well.

.

Styling your WordPress comments

Decide on what information will be displayed for each comment: name, website, date and comment text are all pretty obvious, but what about avatar, Twitter username, CommentLuv link and so on? Avatars can often be the most challenging aspect because of their size, so it can be easier to decide their position first.

A good starting point is to work with the existing comment code, which can be found in the comments.php file of your theme. You’ll also want to have your style.css file open for changes and additions. Always keep copies of the original files to hand – it’s useful as you work through.

If you’re feeling lost, start with simple changes such as background images and font customisation. Darren Hoyt also has some attractive examples (with code) for your convenience. Styling your WordPress comments can often be a case of trial and error, particularly if you’re making substantial presentation changes, so make sure you set plenty of uninterrupted time aside.

WordPress 3.0 uses a range of ‘hooks’ for comments, making it easier to style specific aspects of your comments and keep sections organised. You can find out more here.

Some extras you might find helpful:

• A tutorial to separate trackbacks from comments

• Add Gravatars to your theme if they aren’t currently enabled with the Easy Gravatars plugin.

• Style author/admin comments differently so visitors can quickly spot them with this handy tutorial.

.

Expand the reach of WordPress comments

Make your comments work harder by including them (and/or related information) on other areas of your site, such as your homepage or sidebar. As well as encouraging people to comment and increasing awareness of popular posts, you can thank loyal commenters and create more of a community feel.

Try a plugin for displaying the most popular posts, your top commenters or the most recent comments with Gravatar functionality. You may also want to check out the hundreds of comment-related plugins in the WordPress Plugin directory.

.

Final tips

Once you’re happy with the final results, test all aspects of commenting yourself (e.g. filling out the form, replying to comments, posting as a logged-in user, posting invalid information) to replicate exactly what your visitors might see. Also test your finished look and functionality extensively across different browsers, and get a friend to repeat the process to ensure everything works. You may also want to temporarily add a couple of sentences near the comments form to ask your visitors to report any issues.

.