CSS Selectors: No first word? Use PHP (WP example)

by 6 replies
8
Heyo,

Here's a server side method of wrapping your first word with a span. You can use the above function, or copy & paste the whole thing to your functions.php

function fancy_title($title) {
$clean = explode(" ", $title);
return "<span class='first'>".$clean[0]."</span>". $clean[1];
}



add_filter('widget_title', fancy_title);
#programming #css #php #selectors #word
  • Also here's a jQuery implementation:

    $('.widgettitle').each(function(){
    var me = $(this);
    me.html( me.text().replace(/(^\w+)/,'<span class="first">$1</span>') );
    });
    • [1] reply
    • And if your care for the first letter only, use this css pseudo class:

      Code:
      p:first-letter{
font-weight:bold;
}
  • Yuppers. Thanks for sharing! :0

    Also, one thing to be VERY aware of; IE does NOT support :last-child. If you are dealing with 3 elements, and just margins/padding, you'll be fine with some intelligent CSS design. If you need 3 unique colors/bgs, etc. then you'll want to rely on jQuery or conditional statements.
    • [1] reply
    • Thanks goes right back - that WP function is really helping me out a lot - I have agreed to work on a customer´s wordpress blog, allthough I got like 0 experience with this kind of cms - first thoughts on wordpress: i hate it

      just wondering: you know for sure that "last-child" is not being supported by the latest IE9? i will probably try to google the answer right now on myown anyways
  • i wanna learn to program lol

  • What if there's more than 2 words in the string $title? I think you need a loop to add the rest of the words after the span.
Join the discussion

Next Topics on Trending Feed