Styling the intro paragraph

A few weeks back (actually 18 days), @karelgeenen asked me on Twitter how he could bold the text above the <!--more--> tag in WordPress, like the Dutch site Marketingfacts (which is actually built in Expression Engine).

I didn't know back then and this afternoon I decided to try and solve it for him. It turned out to be quite simple. I've made it into a simple plugin, called Yoast Style Intro, but you can also just add the code below to your themes functions.php.

The plugin wraps the intro in a span with class="yoast_intro", so you can style it by adding, for instance, the following code to your themes style.css:

.yoast_intro {
  font-weight: bold;
}

The code

Add this to your themes functions.php:

function yoast_style_intro($content) {
  if (is_single() || is_page()) {
    $content = '<span class="yoast_intro">'.$content;
    $content = str_replace('<span id="more','</span><span id="more',$content);
    return $content;			
  }
}

add_filter('the_content','yoast_style_intro',1,1);

Or you can download the plugin here.

Be aware that if you use the filter the_content multiple times on a page, this plugin might give you trouble.