I found some code online to allow me to put span tags in text widget title, so I could change the colour of some titles. It works, but the thing is that I need to make title half red half black color. If I close html tag in the middle of the title, then the rest of the title words have no spacing after the span tag. I tried tweaking the code and appending some spacing, but it makes no difference. If I use spans twice, still the same outcome. Here is the code:

function html_widget_title( $var) {
        $var =  " " . str_replace( '[', '<', $var ) . " " ;
        $var =  " " . str_replace( ']', '>', $var ) . " " ;
        return $var ;
    add_filter( 'widget_title', 'html_widget_title' );

This is how it looks and what I'm trying to fix:

enter image description here

As you can see there is no space after Refurbished because this is where my span tag is being closed. So how can I add spacing after each closed tag?

Widget title:

[span class=red_title_class ] New and Refurbished [/span ] Equipment

  • 2
    Try to insert &nbsp; after [/span] Feb 15 '18 at 9:24
  • @Pyramidhead Yeah that worked, thanks, but I still wonder how can I make this work in the code above. I think there is better solution that putting &nbsp; in source code or isn't there?
    – Limpuls
    Feb 15 '18 at 9:27
  • @Pyramidhead Updated the question with title
    – Limpuls
    Feb 15 '18 at 9:47
  • 2
    On new WP site with TwentySixteen theme this code works correctly. Deactivate all plugins and activate them one by one. Feb 15 '18 at 10:14
  • @Pyramidhead Yeah, it was just a diplay: flex problem. Solved.
    – Limpuls
    Feb 15 '18 at 12:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.