How to split up the_title and insert a span tag

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

Main title heading / Sub-title text

Read More

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

Related posts

Leave a Reply

3 comments

  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:

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

  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.