How to split up the_title and insert a span tag

Question

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

Answer 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):

---

Then you can fetch your subtitle easily:

<?php
$sub_title=get_post_meta($post->ID,'subtitle',true);
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

---

HOW TO:

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

<h1><?php the_title(); ?></h1>

Answer 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!

Answer 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.