It becomes difficult for users to notice author’s comments on posts with many comments. This sometimes results into users asking same question in comments, even though the author has already answered in an earlier comment. This is why most popular blogs highlight author comments in WordPress. It is really simple, and in this article I am going to show you how to highlight author comments in WordPress.

WordPress adds CSS classes to many elements in the HTML output it generates. These default CSS classes can be used or by themes or plugins. WordPress also adds a CSS class to comments added by a post’s author. This CSS class is .bypostauthor and you can see it by right clicking on your own comments for posts you have written.

Now all you have to do is to use this class to highlight author comments differently. Lets change the background color of author comments in WordPress. Add this CSS to your theme or child theme’s stylesheet.

.bypostauthor { 
background: #eee;
} 

Here is another example, this one just adds a border to highlight author’s comment:

.commentlist .bypostauthor {border-top: 10px solid #e18728;}
.commentlist li ul.children li.bypostauthor {border-top: 10px solid #e18728;}

The easiest and quickest way to learn how to modify themes is by studying other themes. Lets see how the default Twenty Twelve theme adds ‘Post Author’ label to highlight author comments in WordPress.

Twenty Twelve uses a function called twentytwelve_comment. Defined in the theme’s functions.php file, this function acts as the callback function for wp_list_comments() function. Adding a callback function to wp_list_comments allows themes to control the display of comments.

In Twenty Twelve’s functions file you find these lines which add the Post Author label to comments added by the post’s author:

printf( '<cite><b class="fn">%1$s</b> %2$s</cite>',
	get_comment_author_link(),
	// If current post author is also comment author, make it known visually.
	( $comment->user_id === $post->post_author ) ? '<span>' . __( 'Post author', 'twentytwelve' ) . '</span>' : ''
);

After adding the Post Author label, it styles the label using this CSS:

.bypostauthor cite span {
color: #fff;
background-color: #21759b;
background-image: none;
border: 1px solid #1f6f93;
border-radius: 2px;
box-shadow: none;
padding: 0;
}

We hope this article helped you highlight author comments in WordPress.

If you liked this article, then join ThemeLab on Twitter and Google+.

The post How to Highlight Author Comments in WordPress appeared first on ThemeLab.

It becomes difficult for users to notice author’s comments on posts with many comments. This sometimes results into users asking same question in comments, even though the author has already answered in an earlier comment. This is why most popular blogs highlight author comments in WordPress. It is really simple, and in this article I am going to show you how to highlight author comments in WordPress.

WordPress adds CSS classes to many elements in the HTML output it generates. These default CSS classes can be used or by themes or plugins. WordPress also adds a CSS class to comments added by a post’s author. This CSS class is .bypostauthor and you can see it by right clicking on your own comments for posts you have written.

Now all you have to do is to use this class to highlight author comments differently. Lets change the background color of author comments in WordPress. Add this CSS to your theme or child theme’s stylesheet.

.bypostauthor { 
background: #eee;
} 

Here is another example, this one just adds a border to highlight author’s comment:

.commentlist .bypostauthor {border-top: 10px solid #e18728;}
.commentlist li ul.children li.bypostauthor {border-top: 10px solid #e18728;}

The easiest and quickest way to learn how to modify themes is by studying other themes. Lets see how the default Twenty Twelve theme adds ‘Post Author’ label to highlight author comments in WordPress.

Twenty Twelve uses a function called twentytwelve_comment. Defined in the theme’s functions.php file, this function acts as the callback function for wp_list_comments() function. Adding a callback function to wp_list_comments allows themes to control the display of comments.

In Twenty Twelve’s functions file you find these lines which add the Post Author label to comments added by the post’s author:

printf( '<cite><b class="fn">%1$s</b> %2$s</cite>',
	get_comment_author_link(),
	// If current post author is also comment author, make it known visually.
	( $comment->user_id === $post->post_author ) ? '<span>' . __( 'Post author', 'twentytwelve' ) . '</span>' : ''
);

After adding the Post Author label, it styles the label using this CSS:

.bypostauthor cite span {
color: #fff;
background-color: #21759b;
background-image: none;
border: 1px solid #1f6f93;
border-radius: 2px;
box-shadow: none;
padding: 0;
}

We hope this article helped you highlight author comments in WordPress.

If you liked this article, then join ThemeLab on Twitter and Google+.

The post How to Highlight Author Comments in WordPress appeared first on ThemeLab.

It becomes difficult for users to notice author’s comments on posts with many comments. This sometimes results into users asking same question in comments, even though the author has already answered in an earlier comment. This is why most popular blogs highlight author comments in WordPress. It is really simple, and in this article I am going to show you how to highlight author comments in WordPress.

WordPress adds CSS classes to many elements in the HTML output it generates. These default CSS classes can be used or by themes or plugins. WordPress also adds a CSS class to comments added by a post’s author. This CSS class is .bypostauthor and you can see it by right clicking on your own comments for posts you have written.

Now all you have to do is to use this class to highlight author comments differently. Lets change the background color of author comments in WordPress. Add this CSS to your theme or child theme’s stylesheet.

.bypostauthor { 
background: #eee;
} 

Here is another example, this one just adds a border to highlight author’s comment:

.commentlist .bypostauthor {border-top: 10px solid #e18728;}
.commentlist li ul.children li.bypostauthor {border-top: 10px solid #e18728;}

The easiest and quickest way to learn how to modify themes is by studying other themes. Lets see how the default Twenty Twelve theme adds ‘Post Author’ label to highlight author comments in WordPress.

Twenty Twelve uses a function called twentytwelve_comment. Defined in the theme’s functions.php file, this function acts as the callback function for wp_list_comments() function. Adding a callback function to wp_list_comments allows themes to control the display of comments.

In Twenty Twelve’s functions file you find these lines which add the Post Author label to comments added by the post’s author:

printf( '<cite><b class="fn">%1$s</b> %2$s</cite>',
	get_comment_author_link(),
	// If current post author is also comment author, make it known visually.
	( $comment->user_id === $post->post_author ) ? '<span>' . __( 'Post author', 'twentytwelve' ) . '</span>' : ''
);

After adding the Post Author label, it styles the label using this CSS:

.bypostauthor cite span {
color: #fff;
background-color: #21759b;
background-image: none;
border: 1px solid #1f6f93;
border-radius: 2px;
box-shadow: none;
padding: 0;
}

We hope this article helped you highlight author comments in WordPress.

If you liked this article, then join ThemeLab on Twitter and Google+.

The post How to Highlight Author Comments in WordPress appeared first on ThemeLab.

One of the most common problem that new WordPress users comes across is displaying code in posts. The problem occurs when a user tries to share a code snippet into their posts. By default WordPress filters out the code and it becomes impossible to read. In this article, I will show how to display code in WordPress posts.

Using HTML Entities to Display Code in WordPress Posts

HTML entities are special code that is parsed by browsers to display the character associated with that particular entity. For example:

• & becomes &
• &lt; becomes <
• &gt; becomes >

Using HTML entities you can display code inside your WordPress posts.

<div class="awesome"> will be displayed in browser like this:

<div class="awesome">

This method is particularly useful if you just want to display a couple of lines of code. However, this method can be difficult to apply manually for multiple lines of code.

To solve this problem you can use an online HTML Entities encoder, like this one. Simply put the code you want to convert and hit the encode button. It will convert your code into HTML entities and you can safely paste that code inside <code></code> tag.

Using Plugin To Display Code in WordPress Posts

If you frequently share code snippets in your posts, then the above mentioned methods are not going to work for you. First thing you need to do is install and activate the SyntaxHighlighter Evolved plugin. It will save you from the hassle of converting code into HTML entities. Not only that it will highlight the code to display it in a much more readable format.

It works out of the box, all you need to do is wrap your content around specific language tags. For example, if you are sharing a code that is mainly in PHP, then you would wrap your code like this:

[php]
<?php
function themelab_demo_code() {
$i = 1;
while ($i <= 10):
echo $i."<br />";
$i++;
endwhile;
}
themelab_demo_code();
?>
[/php]


It will appear on your site, like this:

<?php
function themelab_demo_code() { 
$i = 1;
while ($i <= 10):
    echo $i."<br />";
    $i++;
endwhile;
}
themelab_demo_code();
?>

For different languages there are different aliases that you can use. Some of the most commonly used aliases are:

• To display HTML code use [html] [/html]
• For CSS use this: [css][/css]
• For MySQL use this: [sql][/sql]
• For Javascript use this: [javascript][/javascript]

I hope this article helped you display code in WordPress posts and pages.

If you liked this article, then join ThemeLab on Twitter and Google+.

The post How to Display Code in WordPress Posts appeared first on ThemeLab.

One of the most common problem that new WordPress users comes across is displaying code in posts. The problem occurs when a user tries to share a code snippet into their posts. By default WordPress filters out the code and it becomes impossible to read. In this article, I will show how to display code in WordPress posts.

Using HTML Entities to Display Code in WordPress Posts

HTML entities are special code that is parsed by browsers to display the character associated with that particular entity. For example:

• &amp; becomes &
• &lt; becomes <
• &gt; becomes >

Using HTML entities you can display code inside your WordPress posts.

<div class="awesome"> will be displayed in browser like this:

<div class="awesome">

This method is particularly useful if you just want to display a couple of lines of code. However, this method can be difficult to apply manually for multiple lines of code.

To solve this problem you can use an online HTML Entities encoder, like this one. Simply put the code you want to convert and hit the encode button. It will convert your code into HTML entities and you can safely paste that code inside <code></code> tag.

Using Plugin To Display Code in WordPress Posts

If you frequently share code snippets in your posts, then the above mentioned methods are not going to work for you. First thing you need to do is install and activate the SyntaxHighlighter Evolved plugin. It will save you from the hassle of converting code into HTML entities. Not only that it will highlight the code to display it in a much more readable format.

It works out of the box, all you need to do is wrap your content around specific language tags. For example, if you are sharing a code that is mainly in PHP, then you would wrap your code like this:

[php]
<?php
function themelab_demo_code() {
$i = 1;
while ($i <= 10):
echo $i."<br />";
$i++;
endwhile;
}
themelab_demo_code();
?>
[/php]


It will appear on your site, like this:

<?php
function themelab_demo_code() { 
$i = 1;
while ($i <= 10):
    echo $i."<br />";
    $i++;
endwhile;
}
themelab_demo_code();
?>

For different languages there are different aliases that you can use. Some of the most commonly used aliases are:

• To display HTML code use [html] [/html]
• For CSS use this: [css][/css]
• For MySQL use this: [sql][/sql]
• For Javascript use this: [javascript][/javascript]

I hope this article helped you display code in WordPress posts and pages.

If you liked this article, then join ThemeLab on Twitter and Google+.

The post How to Display Code in WordPress Posts appeared first on ThemeLab.