My titles, site wide, will follow this theme all within a h1 tag:

Main title heading / Sub-title text

I'm trying to wrap a span tag around all text after and including the '/' so my markup will look like this:

<h1>Main title heading <span>/ Sub-title text</span></h1>

How do I accomplish this? I'm not great with PHP but I've tried playing with explode but can't get the end result all I end up doing is hiding everything after the '/'

EDIT: Code removed & Pastebin created, this is my whole page for index.php: http://pastebin.com/0T9mt7Fu


its best if you just use custom field type to create a sub title...
That way you leave the title un-touched and just add a field where you can insert a value like so (calling field sub title):

enter image description here

Then you can fetch your subtitle easily:

if($sub_title != '') {
echo '<h1>'. the_title() .'<span>'. $sub_title .'</span></h1>';
} else {
echo '<h1>'. the_title() .'</h1>';

i hope this a suitable solution for you... i use it on occasions

Cheers, Sagive


Replace (i hope it looks the same in your theme) with the code above..:

<h1><?php the_title(); ?></h1>
| improve this answer | |
  • +1. Two suggestions: 1) Use a fail-safe approach, and only output <span> . $sub_title . '</span>' if $subtitle is set; and 2) Use the the_title filter to modify the_title(), rather than having this code directly in the template. – Chip Bennett Mar 14 '12 at 20:51
  • Thanks for this. Do I put that code in my template file in the place where I want the_title to appear? – egr103 Mar 14 '12 at 22:35
  • chip is right ofcourse.. edited my code - thanks chip :) - @evan see my "HOW TO" in my answer.. – Sagive SEO Mar 14 '12 at 22:57
  • I've been trying to implement this code but for some reason the_title isn't registering and is being displayed outside of the <h1> tag. So my code looks like Page title<h1></h1> or Page title <h1><span>/ subtitle</span></h1>. Odd. Any ideas? – egr103 Mar 15 '12 at 16:43
  • Sure... can you paste in you question the code you are trying to change? would gladly try to help – Sagive SEO Mar 15 '12 at 17:18

This comes a bit late, but I don’t know where else it would make sense. I had a similar problem and created a solution.

As toscho has pointed out, the_title is used in nav menus, too. He has created a filter to switch the title filter on/off for nav menus—which I personally think is Einsteinesque. (Thanks a bunch!)

So I’ve just modified his filter a little to make it work here. Then added the actual filtering function. Wherever you use space-pipe-space (" | ") in a post title field, the part after it gets wrapped up in a <span> tag (including the slash the original post author asked for).

 * Append a sub-heading to WordPress post titles

add_filter( 'wp_nav_menu_args', 'gp121028_title_filter_switch' );
add_filter( 'wp_nav_menu', 'gp121028_title_filter_switch' );
 * Switch title filter off when menu class starts and on when it ends.
 * @param  mixed $input Array or string, we just pass it through.
 * @return mixed
function gp121028_title_filter_switch( $input ) {
    $func = 'wp_nav_menu_args' == current_filter() ? 'remove_filter' : 'add_filter';
    $func( 'the_title', 'gp121028_filter_title' );
    return $input;

 * The actual filter function for the_title()
function gp121028_filter_title( $title ) {
    $substrings = explode( ' | ', $title );
    $title = ( ! empty( $substrings[0] ) ) ? $substrings[0] . '<span>/' . $substrings[1] . '</span>' : $title;
    return $title;

Hope it helps somebody!

| improve this answer | |
  • 1
    thats gr8 @glueckpress :) - just keep in mind that the sub title as the title iteself might influence the way google defines that page... nevertheless - gr8 solution. thanks for sharing – Sagive SEO Oct 28 '12 at 21:35

I think the answer @Sagive SEO gave seems like the best approach from a semantic perspective. But if you prefer to keep both "titles" in the title field, a simple explode should work for you.

Try something like this:

add_filter( 'the_title', 'wpse45589_split_title', 10, 2 );

function wpse45589_split_title( $title, $post_id = null ) {
    if ( !$post_id ) 
        return $title;
    $post = get_post( $post_id );
    if ( $post->post_type !== 'page' )
        return $title;
    $parts = explode( '/', $title, 2 );
    $title_to_return = $parts[0];
    if ( !empty( $parts[1] ) )
        $title_to_return .= '<span>/'.$parts[1].'</span>';
    return $title_to_return;

ETA: following @toscho's suggestion below, I added a couple lines to check the post type before filtering the title. This function should now only add the <span>'s to the title on pages, not in nav menus, etc.

| improve this answer | |
  • This would be my preferred option to be honest but where do I add this code? Does this go into the template file itself or within functions.php? If its functions.php do I have to call anything within my template to make it work? – egr103 Mar 14 '12 at 22:33
  • This is a filter, the best place for it would be your functions.php, but if you only wanted to apply it to one template file, it could go at the top of that file as well. Once you've added this code, any template file that uses the functions the_title() or get_the_title() will have this span wrapped around the second part of the title. – goldenapples Mar 15 '12 at 1:46
  • Unfortunately, this matches titles in nav menus too. You have to check if you are on a real post title first. – fuxia Mar 15 '12 at 3:00
  • @toscho - Huh. You're right, I didn't even stop to think that wp_nav_menu was using that same filter. I'll update my answer for posterity. – goldenapples Mar 15 '12 at 17:02

Your Answer

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

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