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 = &#x27;&lt;span class=&quot;yoast_intro&quot;&gt;&#x27;.$content;
    $content = str_replace(&#x27;&lt;span id=&quot;more&#x27;,&#x27;&lt;/span&gt;&lt;span id=&quot;more&#x27;,$content);
    return $content;			
  }
}

add_filter(&#x27;the_content&#x27;,&#x27;yoast_style_intro&#x27;,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.

Tags:


Yoast.com runs on the Genesis Framework

Genesis theme frameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides you with the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Read our Genesis review or get Genesis now!

10 Responses

  1. Henri van den HoofBy Henri van den Hoof on 21 December, 2008

    Smart and easy solution for a question I also had, but wasn’t able to solve myself :-)

    Have a great Xmass!

  2. RyanBy Ryan on 22 December, 2008

    Simple but elegant solution, thanks for this :)

  3. Chris AbernethyBy Chris Abernethy on 22 December, 2008

    Looks pretty cool… could you use a static variable inside the yoast_style_intro() function to prevent problems when the_content is called multiple times?

  4. AbeonBy Abeon on 22 December, 2008

    Great information!

    I have been looking for a way to do this (got here by google).

    Very simple solution to an annoying little problem, thanks :)

  5. achotBy achot on 24 December, 2008

    thx for ur info.. :)

  6. NiharBy Nihar on 25 December, 2008

    Its a very simple tip but very effective. Thanks for the tip.

  7. Roger (frontaal.net)By Roger (frontaal.net) on 31 December, 2008

    On my blog I use a simple CSS pseudo class selector to accomplish the same effect:
    body.single div.entry-content p:first-child {font-weight:bold;}
    No need to edit php-files or add HTML-elements… Except when you also want bold text in IE6.

  8. Bobbink - 11 InternetBy Bobbink - 11 Internet on 5 January, 2009

    Thanks for sharing!

  9. ParadoxBy Paradox on 19 March, 2009

    This does not seem to work on my blog. On the main page, no content appears under the headlines.

    Yet on the full view, it appears as it normally should.

  10. dimaksBy dimaks on 24 October, 2009

    being a novice in blogging, what could be the best possible benefits from making the intro part bold? just curious.. who knows i might use it. thanks!