WordPress Guy

WordPress Guy designs and develops WordPress themes and plugins. WordPress Guy teaches you WordPress stuff.

You may have noticed that many people use the syntax @name in blog comments for addressing messages to a specific person. Maybe you’re one of them. In this tutorial we’ll learn how to style that piece of text differently so it stands out better.

The Function

First, we’re going to create a function in the functions.php file of our WordPress Theme. This function needs to find the specific piece of text ‘@name’, where name can be anything. Our best option here is using a regular expression. Here it is:

function atPeople($comment){
    return preg_replace("/@([^:]*):s/", "<span class="atPeople">@$1: </span>", $comment);
}

Pretty simple eh! What this does is finding an @ symbol followed by text and then a colon “:”. For example: “@john:”. Then it replaces that for a span object that we can easily style later.

The Hook

Creating the function is not enough, we need WordPress to call that function with every comment. That’s where the hook comes in:

add_filter('comment_text', 'atPeople');

That little piece of code just tells WordPress to apply our function to the comment text. It also needs to be in the functions.php file, by the way.

The Styling

Ok, now we’re ready to style our span object, which is the easier part. You can do whatever you want with it, you can make it bold, change it’s color, make it bigger, the possibilities are endless. We’re just going to make it bold and red. Here we go:

.atPeople{
    font-weight: bold;
    color: red;
}

And that, of course, needs to go at the end of the style.css file of your WordPress theme.

That’s it, hope you enjoyed this tutorial.

Comments

  • ... WordPress community has published an interesting tip that I think many people will find helpful. Styling the people’s name in your comment replies walks you through the steps to add a custom function to your functions.php file, then calling that ...

  • May 10th, 2008 at 5:12 pm

    Interesting idea.. wonder how this works out?

  • May 10th, 2008 at 5:13 pm

    p.s. thanks for sharing.

  • May 22nd, 2008 at 11:08 pm

    @Prof kienstra Let’s see if it works (if it’s insalled n here!)

    Its a great idea, any chance of amking it a plugin so it doesn’t get overwritten when you upgrade WP?

  • May 22nd, 2008 at 11:41 pm

    @Dawn: It is installed, but you forgot the colon ;-)
    About the plugin, I guess I could do that… I’ll let you know when I make one.

  • May 23rd, 2008 at 1:00 am

    @Wessley: Nice author styling! Anyway to make this work with and without the colon. For people like Dawn?

  • May 23rd, 2008 at 9:58 am

    @Danny: It’s complicated… I did this with the colon, thinking of people whose names aren’t just one word long. If the colon wasn’t there I can’t tell how many of the words after the @ are actually the person’s name. Plus Ozh’ Absolut Comments plugin inserts the @ and the colon, which is just awesome ;-)

  • May 27th, 2008 at 1:26 pm

    Thank you for this tutorial! I’ve just got around to implementing it on my non-live test site and it was easy as pie - I had been putting it off because I was nervous about breaking something in my theme… never hacked the PHP “myself” before. So thank you double!

    Ricky

  • January 23rd, 2011 at 11:23 pm

    useful tips thanks for sharing

Your Comment