[Support request] How to add and format blog post subtitles

[Stephanie]

I would like to add subtitles below the titles of my blog posts, and edit them to ensure appropriate font style/size/weight. There does not seem to be a way to do this using my GP Premium theme. Is that right?

I have tried three plugins for adding subtitles:
– Two did not work at all, as nothing was displayed;
– The third displayed the subtitles but in an inappropriate font size/weight, and it corrupted the display of post summaries.

Is there a way to do this that’s simple and compatible with SEO plugins such as Yoast? I miss having subtitles.

[This is my (fledgling) blog in question: http://shrinkwrap.blog ]

Thanks 🙂

[Leo]

Hi Stephanie,

Someone suggested this plugin: https://en-ca.wordpress.org/plugins/subtitles/
Is this one of the three you tried? Keep in mind that we can help you style the subtitle with some CSS.

If you did then take a look at topic: https://generatepress.com/forums/topic/adding-subtitle-to-blog-page/

Let me know if this is helpful

[Stephanie]

Yes, I think ‘Subtitle’ was the one that sort of worked but didn’t look right and corrupted the display of post summaries on the Home page.

Thanks for the topic link. Sounds a bit complicated – more effort than return for an amateur like me.

I think it might be better for me to wait for subtitles to be included in a GP Premium update. Is that on the cards?

Thanks Leo.

[Leo]

Are you able to link me to the page where Subtitles corrupted the display of post summaries?

I just tried the plugin and it seems to work well without any obvious bugs and I can style it easily with some CSS.

I also don’t see people mentioning that problem in the plugin support forum..

Let me know.

[Stephanie]

As mentioned, it was the Home page. That’s the main page that displays post summaries. I didn’t check the category pages, but imagine they would be the same.

I removed the plugin because I could not leave it looking like that…
– The title and subtitle were each displayed three times
– Some HTML code was showing
– The image and text positioning were distorted

[Leo]

Ok well there is definitely something going on there as I didn’t encounter any of those problems when I tried it.
Perhaps conflict with other plugins? Make sure you don’t have all three subtitles plugins activated at the same time when you test.
A simple subtitle plugin shouldn’t create this much chaos I don’think…

Also Jean’s method shouldn’t be that difficult either.

Anyways I will ask Tom to consider this feature for the future.

[Stephanie]

Thanks Leo, that would be good.

(I might post screen shots later, so you can see…)

[Lyle]

Stephanie, Leo,

Here is one way to do it with just CSS. Mind you, it’s a “manual” operation as CSS will have to be inserted and edited for each post, but with Tom’s handy, dandy Simple CSS plugin, it’s “easy” 🙂

– in GP Hooks, add this empty div into the After Entry Title area and Save Hooks

<div class="mysubtitle"></div>

– then in the Simple CSS meta box in the post, add this CSS:

.mysubtitle:before {
   content: "This is post subtitle";
}

That’s it 🙂 Note that you can style the subtitle in the Simple CSS editor so that it applies to all of the subtitles, e.g:

.mysubtitle {
    font-size: 24px;
    color: blue;
}

Not quite as handy as a plugin, just have to keep that post CSS handy and edit accordingly when you create (or edit) a post 🙂

Cheers!
Lyle

[Stephanie]

Ooh, thanks Lyle. So many fun options 🙂

[Stephanie]

Hi Lyle

When I use your code (thanks again for that) it positions the subtitles below the post-date+author information, rather than below the title itself, on post pages like this one: https://shrinkwrap.blog/psychology-blog/ (I’ve deleted it; please imagine the subtitle just above the photo.)

How can I fix that please?

Also, in an ideal world I’d also like to have the subtitles, in an appropriately smaller font, show up in the post summaries on the home page, here: https://shrinkwrap.blog/

Is that doable?

Thanks 🙂

[Lyle]

Hi Stephanie,

I’m a bit confused (doesn’t take much 😉 ).

“please imagine the subtitle just above the photo.)” But that would make it the way it is now, wouldn’t it?

Title
Post Meta
Sub Title
Photo/Post

… or, do you want it:

Title
Sub Title
Post Meta
Photo/Post

As for in the posts listing, that I’m not sure of … would be one for Tom or Leo 🙂

Cheers!
Lyle

[Stephanie]

Hi Lyle

Yes, what I’m after is the second one:

Title
Sub Title
Post Meta
Photo/Post

🙂

[Lyle]

Stephanie,

That’s what I was afraid of 🙂

Looks like one for Tom/Leo as that will take some PHP wrangling. I had a look through the second link that Leo had posted to your OP, but the contents of that file must have changed since Jean wrote the post and I could not figure out where to put what 🙂

Cheers!
Lyle

[Leo]

Hi Stephanie,

Are you using any special plugin for displaying blog posts?
If not then I would recommend giving the plugin “Subtitles” another shot as I just tested again, it works perfectly with GP’s default settings and we can style it easily.

I made sure that activate the plugin does not effect the existing posts and added subtitle on a test post. It displays well in both single post and main blog page.

If you are still seeing some bugs, can you provide a screenshot?

Let us know.

[Stephanie]

Hi Leo

I’ve re-tested the Subtitles plug-in. Same outcome. Yes, I am using an excerpt plug-in Rich Text Excerpts, though from the below code I don’t see any obvious relationship.

What do you think? The HTML here is clearly broken. The Subtitles code is being inserted within the featured image somehow:

This is the code:

[IMG]http://i732.photobucket.com/albums/ww325/finchesca/Subtitles%20broken%20HTML_zpsatazzcx1.png[/IMG]

This is the result:

[IMG]http://i732.photobucket.com/albums/ww325/finchesca/Subtitles%20distortion%20of%20excerpt_zpstxpfpubu.png[/IMG]

To see how it ought to look (Subtitles deactivated) see the bottom of this page: https://shrinkwrap.blog

I know I should now be talking to the Subtitles developers, but I’m very interested in your views. It’s odd that you are not seeing the same thing. What do you make of that?

Thanks 🙂

EDIT after posting: Oh, right. The forum shrinks images to an unreadable size. What to do?

[Author]

Posts