How to Add a Subtitle to WordPress Post and Page Titles

Subtitles can be quite handy for revealing more content to your reader for a better explanation of your post. Adding a subtitle to your WordPress posts seems like a small thing, but when you find out that it’s not built in, you’ll have to come up with a quick solution for site.

Of course you could always create a new custom field for subtitles and then add something like this to post loop after the title:

1
2
3
4
<?php
{ $subtitle = get_post_meta
($post->ID, 'subtitle', $single = true); 
if($subtitle !== '') echo $subtitle;} ?>

However, if you’re not comfortable modifying files, then you’ll want to install a plugin. Up until today there were several plugins out there for subtitles, none of which had been updated recently.

Visual Subtitle is a new plugin that handles the creation of subtitles in an entirely visual way, as opposed to keeping it as a separate entity. Here’s how it works: It allows you to include a string of text that will still be part of the post title, except it’s wrapped in a span tag, like this:

1
<h1>This is the title<span class="subtitle">This is the wrapped "subtitle"</span></h1>

The subtitle is separated with a pipe (|) character in the post screen and appended to the title part of the document title with a colon (:) character.

This gives you the freedom to style the subtitle with your theme and make it appear to be separate from the main title. Make sure to add .subtitle { display: block; } to your CSS plus any other style you want to apply to the subtitle.

The end result gives you something similar to the screenshot above. You’ll even be able to view your subtitle in the post management and quick edit screens:

The Visual Subtitle plugin is available for free from the WordPress plugin repository. Download it and start adding some styles to get fancy post titles in under five minutes.

Tags

Comments (10)

  1. I really like the concept, but I had no luck with this plugin. The title of my post would become: “This is the subtitle”>This is the titleThis is the subtitle”

    Adding the required “block” to the css didn’t fix it.

  2. Hi Sarah

    I came across your post when I was searching for a way to insert a subtitle into a post or page. I downloaded the plugin but can’t find how to use it now that it’s installed. I wonder if you could make a short video to show barely competents like me how to use it properly?

    Cheers.

    Walid

  3. Thanks a lot. For somebody who doesn’t dare to play with the files, it’s risky “to add .subtitle { display: block; } to your CSS plus any other style you want to apply to the subtitle.” “Add .subtitle” where? I was hoping plugin would usually make file editing redundant. Any advice? Best, Ch.

  4. In my previous comment, the h1s are not read. The comment should read:

    My understanding is that the default WordPress title is an h1 tag. If this plugin’s subtitle is also an h1 tag, what will be the SEO effect with Google and company?

  5. Thanks for this Sarah, very helpful.

    For anyone struggling with adding the CSS to make the subtitle drop down to the next line, just go

    Dashboard>Appearance>Editor and paste .subtitle {display: block;} after the last entry in:

    ===============================================================================================================
    01. GENERAL TYPOGRAPHY
    =============================================================================================================== */

    /* Global Reset

  6. Hi Sarah,
    I found this post useful and I’m now using the plugin featured here.
    I have just one question. You mention in your post the following: “…and appended to the title part of the document title with a colon (:) character.”
    What exactly do you mean by this?

    Thanks,
    Sean

Participate