The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Putting a span inside a widget title

  • # March 8, 2010 at 6:52 pm

    I want to change a widget title from instead of just one solid color, to the first word one color, and the rest of the text a second color by using a span. My css is like this.

    h2 { color:#000;}
    h2 span { color:#B8530C;}

    I want to go from:

    Widget Title


    Widget Title


    Widget Title is Here

    Is there a way to do this? hopefully dynamically. If not, how would I go about this.

    # August 11, 2010 at 11:08 pm

    Wanted an update. Any have any ideas?

    # August 12, 2010 at 11:40 am

    I can’t think of any way of stopping the WP filter from removing your html from widget titles without changing the wordpress source files.

    I think the best bet is to leave the title blank and add the h2 / h2 span in the template file above where the widget is being called.

    # August 12, 2010 at 10:48 pm

    This reply has been reported for inappropriate content.

    I’ve done this with jQuery. I used the example here as a starting point last time I wanted to do it. Let me know if you need more help than that.

    # August 13, 2010 at 12:51 am

    Thank you. That was very helpful.

    # August 13, 2010 at 10:29 am


    # January 3, 2013 at 1:26 pm

    I had this problem, too. The jQuery solution seems the way to go, but in my case I also experimented with using a pseudo :after element, which I could style differently. This only worked in my case because the :after element was not integral to the Widget Title; it was simply a graphic embellishment.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed