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

3 Answers 3


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>
  • +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. Commented Mar 14, 2012 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
    Commented Mar 14, 2012 at 22:35
  • chip is right ofcourse.. edited my code - thanks chip :) - @evan see my "HOW TO" in my answer..
    – Sagive
    Commented Mar 14, 2012 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
    Commented Mar 15, 2012 at 16:43
  • Sure... can you paste in you question the code you are trying to change? would gladly try to help
    – Sagive
    Commented Mar 15, 2012 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!

  • 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
    Commented Oct 28, 2012 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.

  • 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
    Commented Mar 14, 2012 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. Commented Mar 15, 2012 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
    Commented Mar 15, 2012 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. Commented Mar 15, 2012 at 17:02

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.