0

I need to know how to add a span to title post, not only for 1 word, but 2 or 3 words as I need.

For example I have a normal title like this:

Lorem ipsum dolor sitamet consectetur adipiscing

I need to add span to be like this:

<span>Lorem</span> ipsum <span>dolor sitamet</span> consectetur adipiscing

I change this:

 the_title();

With this:

$words    = explode( ' ', the_title( '', '',  false ) );
$words[0] = '<span>' . $words[0] . '</span>';
$title    = implode( ' ', $words );
echo $title;

But only give span to the first word. Any idea to give span on any place as I need?

8
  • Why not add the span elements directly into the title in the WordPress admin panel? I'm 90% sure it accepts HTML.
    – Howdy_McGee
    Mar 24, 2016 at 14:02
  • Firstly, yes, WordPress handles HTML in post titles, but could lead to problems with encoding in e.g. widgets, had it all before. So far it seems the problem is probably better handled through Javascript, if it is for styling purposes only?
    – physalis
    Mar 24, 2016 at 15:11
  • @howdy_McGee yes, it is, but that technique have problem for consistency for user.
    – Mailmulah
    Mar 24, 2016 at 15:55
  • @physalis Yes for styling purpose. Do you have idea with JQuery? Really appreciate for help.
    – Mailmulah
    Mar 24, 2016 at 15:57
  • How do you decide which words get spans? Is it always going to be word 1, word 3 + 4?
    – Howdy_McGee
    Mar 24, 2016 at 16:10

1 Answer 1

1

If your provided code (as you state) is wrapping the first word of your title with the <span>tag, then the following should also wrap the third word.

$words    = explode( ' ', the_title( '', '',  false ) );
$words[0] = '<span>' . $words[0] . '</span>';
$words[2] = '<span>' . $words[2] . '</span>';
$title    = implode( ' ', $words );
echo $title;

The words in the $words[] array would correspond to the numeric index. [0] being your first word, [1] being your second word, etc.


Edit: To wrap multiple words in your title there are multiple options. Here is the simplest, which involves prefixing the first word in the chain and suffixing the last word in the chain. In this example, we're wrapping the first, second and third word with a <span> tag.

$words    = explode( ' ', the_title( '', '',  false ) );
$words[0] = '<span>' . $words[0];
$words[2] = $words[2] . '</span>';
$title    = implode( ' ', $words );
echo $title;

To summarize, you are not wrapping each word with an open/close tag pair. Simply open the tag in front of the first word to wrap, and close the tag after the last word.

4
  • 1
    While this is a solid answer - in the example OP gave in his question it looks like they're also adding spans either around 1 word or multiple words which will mess up implode(). How OP ascertains how many words to encapsulate in spans is beyond. Also note that OP is referring to the_title() for pages and posts and not wp_title(). All in all +1
    – Howdy_McGee
    Mar 24, 2016 at 16:06
  • @jdm2112 It is work to add span for first and third word. It's use the_title, not deprecated wp_title. Can be the solution but still try to give span for more 1 word. Thank you.
    – Mailmulah
    Mar 24, 2016 at 16:08
  • My mistake. Working through multiple projects adding the new theme support for titles, therefore the wp_title() conflation! Will edit to remove deprecation notice. @mailmulah I will add an option for wrapping multiple words.
    – jdm2112
    Mar 24, 2016 at 16:14
  • @jdm2112 : ah, ya! Perfect solution for me. Thank you.
    – Mailmulah
    Mar 24, 2016 at 16:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.