Add Bootstrap‘s page header subtext to WordPress titles

The times they are a-changin’.

This post seems to be older than 5 years—a long time on the internet. It might be outdated.

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

<?php

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 ) )
 return;

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

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

 return $title;
}