Add Bootstrap‘s page header subtext to WordPress titles

One thing I love about Bootstrap is its page-header class. It utilizes a <small> element within the <h1> tag and displays a neat subtext for the page or post title. I thought that‘d be nice to wear for WordPress titles (page, post, widget). So I went and wrote a filter function to easily implement the <small> element without having to write actual HTML into the title field.

Beautiful page headers served by Twitter‘s Bootstrap
Beautiful page headers served by Twitter‘s Bootstrap. Subtext created by a <small> tag within <h1>.

The function would go into functions.php (obviously). To create the exact output from above, write

Example page header | Subtext for header

into your post title and preview the result. (The delimiter is alt+7 on a Mac keyboard.) To actually see the same design, it helps if you have a Bootstrap based theme up and running. 😉


add_filter( 'the_title', 'yourprefix_filter_subtitle', 10, 2 );
add_filter( 'widget_title', 'yourprefix_filter_subtitle', 10, 2 );
function yourprefix_filter_subtitle( $title ) {

    if( empty( $title ) )

    $substrings = explode( ' | ', $title );

    if( !empty( $substrings[1] ) )
        $title = $substrings[0] . ' <small>' . $substrings[1] . '</small>';
        $title = $title;

    return $title;