Quick Tip: Author Comment Styling in WordPress


An often-used feature in WordPress blogs is the ability to style comments made by the post's author differently from the others - helping replies to stand out. Here, we will edit the default WordPress to add some subtle styling to author comments.

Step 1 - If Command

Open the comments.php file located in the Default's theme directory: \wp-content\themes\default. Directly below the line:

<?php foreach ($comments as $comment) : ?>

There is:

<li id="comment-">

Edit this to say:

<li class="<?php echo $oddcomment; ?> 
<?php if ($comment->comment_author_email == get_the_author_email()) { echo 'author_comment'; } ?>" 
id="comment-<?php comment_ID() ?>">

On the second line, we have included an 'If' statement, which in English says: "If the email address of the comment author matches that of the post's author (meaning it's the same person) - then insert the text 'author_comment'".

Also note that we opened a class on the first line. This is because by default, the theme automatically does this for it's '$oddcomment' variable. We shall fix this now.

Step 2 - Fixing the $oddcomment

If we left our code as it is, on every 'odd' comment, the classes would mess up. To fix this, towards the top of the file (usually line 17), look for:

$oddcomment = 'class="alt" ';

Edit this to:

$oddcomment = 'alt';

Then further down the page (usually line 48), look for:

$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';

Edit to:

$oddcomment = ( empty( $oddcomment ) ) ? 'alt' : '';

From the past two edits, we simply removed the class=" " text to stop any conflicts with odd comments.

Step 3 - Style It!

Open style.css in the theme directory. At the bottom, add the lines:

ol.commentlist .author_comment {
border-bottom: 1px solid #0066CC;
border-top: 1px solid #0066CC;

This will change the border colors on author comments (note that we're editing the author_comment class) to a light-blue color. You may edit this however you wish, but we are simply going for a very subtle approach.

That's It!

Related Posts
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Code
    Theme Development
    Custom Controls in the Theme CustomizerTheme customizer custom control 400
    In the last article, we explored the advanced controls available in the Theme Customizer, and how to implement them. We’re going to look at how to create our own custom control, allowing you to choose which Category of Posts are displayed on the home page. To get started, download version 0.6.0 of our Theme Customizer Example.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Adding a LoopCreating wordpress theme from html 400
    In the first three parts of this series, you learned how to prepare static HTML for WordPress and to create a theme by splitting your HTML file into a set of template files and editing the stylesheet. You then uploaded your theme to WordPress and activated it. The theme still isn't displaying any content you add via the WordPress admin however; to do that you need to add a loop to your template files.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    Creative Coding
    Working with Classes and IDs Generated By WordPressWordpress generated classes ids preview image 400
    A helpful feature of WordPress is the way it generates classes and IDs. Some of these are generated by the system itself, while in other cases you insert some PHP in your theme and WordPress uses that to add classes and IDs to the page markup.Read More…
  • Code
    Creative Coding
    Show Yourself Off With a Custom Author BoxCreateanauthorbox
    Multi-Author blogs are becoming increasingly popular and with good reason. Creating regular, engaging content can often be a challenge for an individual blogger. With multiple authors it can be a lot easier and also allows you to cover a greater range of topics pulling from the knowledge of several people. On sites like Wptuts+ you get to read articles from a massive team of writers and bloggers, we all have our own writing style and personalities. Like Wptuts+, on most multi-author sites, you will find a nice little author information box somewhere on the page. Today I'm going to show you how you can create one for your very own site.Read More…