How to split up the_title and insert a span tag

All we need is an easy explanation of the problem, so here it is.

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 ‘/’

Code removed & Pastebin created, this is my whole page for index.php:

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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>

Method 2

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!

Method 3

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.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply