Resources     Blog  

  1. Home
  2. WordPress Tutorials
  3. How to Create a Stylish Comment Section in WordPress

How to Create a Stylish Comment Section in WordPress

Do you want to create a stylish comment section for your website? The comment section is where all of your visitors will discuss your content and leave feedback. The default comment section is extremely plain and has no style. For this reason, it is important for web developers to take the time to fully customize their comment sections.

As with all forms of styling in WordPress, this method will revolve around CSS and HTML, but don’t worry it is approachable for beginners as well. If you have your comments section disabled, you may want to consider enabling it again. Today, I will demonstrate how to style your comment section and different designs you can use in WordPress.

Why is Styling My Comment Section Important

You may be a new website that has only had a handful of comments and does not quite see the value of the section or simply does not know how to handle them. You may also be one of the many websites that disable their comment section to avoid the negative comments that are a problem for most comment sections. Regardless, comment sections are an important part of any website and help build a community environment.

If you are not receiving many comments, then it may be due to your comment section not looking good. Yes, people actually care about what the area looks like. Creating a design that matches the rest of the website and helps make all of the comments stand out is extremely important. Not only is styling important, but allowing more avatars is another way to improve the comment section.

How to Create a Stylish Comment Section in WordPress

Today, I will demonstrate how to style your comment section and different designs you can use in WordPress. The designs you pick should blend in with your current theme and you can fully customize the color options. Keep in mind there are hundreds to choose from and I will just be sharing some popular ones from around the web.

If you are not experienced in coding, don’t worry. There are two things to keep in mind. The first is that copying and pasting code that is not written for your theme will most likely not work. For example, taking comment styles for the Twenty Twelve theme and using them on a website that has Poseidon will have zero results. This is because each theme has different naming conventions. You need to be aware of what your theme’s naming convention is. The second is that you will only need to edit the color options and font options once you get it working.

For reference, all of the examples will be written for the Twenty Twelve theme.

Alternating Comment Background Colors

One of the more popular comment design choices is to have alternating colors in the background. This helps visitors distinguish the comments from one another. It is a good rule of thumb to pick colors that are present in your theme.

On the left-hand admin panel, click on Appearance and select the Edit CSS option.

click on Appearance and select the Edit CSS option.

Click on the Additional CSS option.

Click on the Additional CSS option.

Copy and Paste the following code into the appropriate text box:

.commentlist .even .comment {
background-color:#c0c0c0;
}
.commentlist .odd .comment {
background-color:#ffd700;
}

Keep in mind that if you are not using the same theme, it will not work. If you need extra support, check out your theme’s support page. You should be able to see the changes as you add the code.

Your new Pattern

You can change the colors to whatever you want. Here is a list of the CSS color codes. Make sure that you can still read the comment after the color is applied. Click on the “Publish” button to save the changes.

Styling the Author Name Field

Another improvement for the comment section is to make it easy to tell who wrote the comment. Adding a different colored background for the comment’s author information can do that.

Copy and paste the following code into the appropriate text box:

.comments-area article header {
margin: 0 0 48px;
overflow: hidden;
position: relative;
background-color:#006400;
color:#FFFFFF;
padding: 10px;
}

Make the Author clear

Once again make sure the author name and information is visible. Click on the Publish button to save your work.

Styling Buttons on Your Comments

Most comment sections have multiple buttons in them. They generally include an Edit, Reply, and a Cancel Reply Button. The Cancel Reply button would only be visible when leaving a reply.

Here is the code for the Reply button:

.reply {
float:right;
margin:0 10px 10px 0;
text-align:center;
background-color: #000000;
border:1px solid #55737D;
border-radius:3px;
padding:3px;
width:50px;
box-shadow: 1px 1px 2px 2px #4f4f4f;
}

.comment article {
padding-bottom:2.79rem;
}

a.comment-reply-link,
a.comment-edit-link {
color: #FFFFFF;
font-size: 13px;
font-size: 0.928571429rem;
line-height: 1.846153846;
text-decoration:none;
}

a.comment-reply-link:hover,
a.comment-edit-link:hover {
color: #f6e7d7;
}

Here is the code for the Edit button:


a.comment-edit-link {
float:left;
margin:0 0 10px 10px;
text-align:center;
background-color: #000000;
border:1px solid #55737D;
border-radius:3px;
padding:3px;
width:50px;
box-shadow: 1px 1px 2px 2px #4f4f4f;
}

Here is the code for the Cancel Reply button:

#cancel-comment-reply-link {
text-align:center;
background-color: #000000;
border:1px solid #55737D;
border-radius:3px;
padding:3px;
width:50px;
color:#FFFFFF;
box-shadow: 1px 1px 2px 2px #4f4f4f;
text-decoration:none;
}

New button designs.

Click on the Publish button to save your work.

Make Sure Everything Matches

The point of styling your comment section is to make it look awesome. The issue is when it doesn’t match the rest of your website. It might seem out of place or maybe the rest of your website needs to be styled. In either case, you need to make sure everything matches and that nothing stands out or looks bad.

The biggest factor that can lead to this is color choice. I recommend only using colors from your theme or similar ones. It also cannot be stressed enough, make sure all text is visible. This is one of the most common errors on websites today and should not happen.

Which designs have you uses? Do you think your comment section looks better now?

Author: Robert Giaquinto

Robert has been writing tutorials about WordPress and other CMS for over 3 years since joining the GreenGeeks marketing team. Thanks to this, he has had the opportunity to research and master several areas of WordPress including plugin usage, SEO, website design, and social media integration. When he is not creating content for WordPress, Robert is digging up new content ideas for environmental pieces. These range from the pollution in our air to the danger’s wildlife face. And with a bachelor’s degree in electrical engineering, he is always eager to discuss the way our technologies are affecting the environment, especially when it comes to solar energy.

Was this article helpful?

Related Articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.