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]<?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;
}[/php]