thaikolja

Hi @lionhunter,

That’s great to hear! If you’d like to contribute to the community and help whoever might have the issue use, please be so kind as to post your solution here, and I might even implement it in the FAQ of the documentation.

And as always: Reviews are also always welcome ??

Hi @carullamuehr,

Thanks for bringing this to my attention.

I’ve just tried to reproduce this issue by installing a fresh instance of WordPress 6.6.2 and the current version of Secondary Title, 2.1.0. I used your title format:

%title%<br><span style="color:#ffffff;font-size:14px!important;text-transform: none;">%secondary_title%</span>

The style as set in the style attribute of the <span> tag was stripped out of the HTML code in the front-end. I’m not sure why WordPress did this and will investigate it further.

For now, however, there’s a very easy fix for you:

1. Replace the title format with %title%<br><span class="secondary-title">%secondary_title%</span> and save it
2. Open your theme’s Customizer “Appearance -> Customize“
3. In the pane that opened on the left, scroll to “Additional CSS” on the bottom an open it
4. Insert the following code into it:

.secondary-title { 
    color: #ffffff;
    font-size: 14px !important;
    text-transform: none;
}

In my test, it worked and applied the style, just like before. I’ll update the documentation as soon as I’m able.

Let me know if that worked for you, and if yes, I’d be happy for a quick review!

Cheers,

Kolja

• This reply was modified 1 month, 3 weeks ago by thaikolja. Reason: Styling

Hi @samjoelnang,

I also appreciate your patience, your patience with me, but some of your explanations still seem contradictory to me. Or maybe I just stare at too much code at work and fail to see it.

I suggest we move this discussion to a messenger app. I’d be most comfortable with Telegram, but I can also do WhatsApp if that suits you better. Addressing things line by line, so to speak, seems to me to be a faster and better way to clarify things before I end up writing another useless piece of code ??

If you’re cool with that, please reach out to me via kolja (dot) nolte (at) gmail (dot) com. Then, we can share IDs/numbers and get you where you want to be a lot faster and, most importantly, without misunderstandings.

I’m not sure where you’re located, but just so you know, I live in Bangkok (GMT+7). But don’t worry, I can make time to resolve this quickly. Looking forward to hearing from you!

Hi @samjoelnang,

I went ahead and finalized the script. Please don’t tell me I got it wrong again; I might cry myself to sleep otherwise ?? No, really, I’m committed to helping you, and if it’s not what you had in mind, please do say so.

I’ve uploaded the script to my public GitLab profile with brief instructions, which is more for documentation purposes since I have a lot of scripts like these and sometimes forget how they work or what they actually do. Here’s the link:

https://gitlab.com/-/snippets/3739088

The “installation” is clear, as written in the description: Copy and paste the content of the script into the functions.php file of your active theme, and you should be good to go.

On a side note, I tested it thoroughly, but even after hours, I can’t anticipate every kind of use case. So, if you run into problems, please get back to me, assuming this is actually the solution to what you want to achieve.

Cheers!

Hi @samjoelnang,

Last and probably most crucial question: Are you still using the “Title Format” option in any way or does it contain only %title%?

And I saw that you’re using two secondary titles in your example. Where would you enter the two titles that are to be italicized? In the input field in the post editor, separated by a comma? And is the <i> format likely to change at some point, maybe into a <bold> (since the <i> styling tag is currently hard-coded in the snippet)?

Edit: This is the solution I came up with while waiting for your reply:

The input field for the secondary title on the add/edit post screen looks like this:

Master of Puppets, The Bends

Of course, this also works with just one or more words.

The original title, though, is the full title, without styling the specific words:

Listen to Metallica's?Master of Puppets?reimagined to the style of Radiohead's?The Bends

All this requires Secondary Title’s “Auto Show” function to be set to “On” and the “Title Format” to be simply:

%title%

However, as asked above, I’m not sure whether you expect a version of title on the front-page and a different version of the title when viewing a single post, i.e (italicization included):

Front page:

New version of Metallica's?Master of Puppets?released

Single post:

Listen to Metallica's?Master of Puppets?reimagined to the style of Radiohead's?The Bends

Please have a look and let me know.

• This reply was modified 3 months ago by thaikolja.
• This reply was modified 3 months ago by thaikolja.
• This reply was modified 3 months ago by thaikolja.
• This reply was modified 3 months ago by thaikolja.

Puh, now you made me write all that stuff, and it was completely useless? Just kidding, it’s me who keeps misunderstanding it ?? To be frank, I’m still not entirely sure if I get it right, so please bear with me.

As general info: You can use HTML tags to style the output; you know that part already. You can use it both on the settings page for the “Title Format” which will be applied to every post title (and therefore replaces it) as well as in individual posts via the input field. Note that some tags are stripped for security reasons, but <i> is definitely allowed.

If I understand you correctly, you want to have two different versions of a title that both have different title formats. To stay with our aging metal friends, the post titles on the front page look like this (I’ll leave out the styling for now):

Metallica - Master of Puppets

And when you visit that post, you want it to turn into this:

Metallica reissues Master of Puppets

where only the secondary title is styled.

I’m sorry, but this use case isn’t possible with the “Auto Show” function. You’d have to manually do this in your theme (or better: child theme). That’s what the manual mode is for.

Before I go on, please tell me if I got it correctly this time and if you’d like me to give you a code snippet that you can put into the functions.php file of your (child theme) to achieve that or if that’s too much hassle for you.

I’m also in the process of updating the documentation with a lot more information and examples, but as of right now, the only relevant section would be this. But your use case – assuming I got it right – is a good idea to address on the Exampels page.

• This reply was modified 3 months ago by thaikolja.

Unless I’m missing something or understand you completely wrong, you can always use <br> tags to create a line break.

You’re entering the secondary title within the input field on the right side of the post editor, correct?

Hi @ss3594,

Thanks for reaching out.

Line breaks are definitely possible. However, HTML and CSS know multiple ways to break lines which are all a little different. It’d help if you sent a real-life example on here so that I can better understand what you’re trying to achieve.

Cheers,

Kolja

Thanks, @samjoelnang. It sounds like you entered the <i> tag into the field when editing or adding a post, is that right?

This is absolutely possible as you can see in the official documentation I’m working on. I just tried to reproduce your issue with clean WP site and the plugin’s default settings, and it worked as it should.

This is how it looks in the post editor (I assume you do it the same way from what you’ve told me):

And, under “Settings” -> “Secondary Title”, I chose the following title format:

%secondary_title%: %title%

“Auto show” must be enabled for this to work. Also, make sure that you don’t restrict the display only show for posts in certain categories, specific post IDs, or post types. Leaving them all blank means they apply to all posts.

The result looks like this:

Now, if you still have this issue, it’s most definitely your theme that strips out HTML tags in titles for security reasons. While this is crucial and also implemented in Secondary Title (e.g., you can’t use <script> tags and others that may be abused for cross-site scripting (XSS), but I limited it to allow general formatting, including <i>.

What you can do if you’re still facing this problem:

1. Go to “Settings” -> “Secondary Title”
2. Wrap the secondary title (or which part you’d like to italicize it) inside a <span> tag and give it a distinctive CSS class, for example secondary-title. The full title format would look like this: %secondary_title%: %title%
3. Having done that, head over to “Appearance” -> “Customize” and use the CSS area to style this particular class.

In your HTML source code which you can view in your browser, the code surrounding your title should look like this then:

Here’s one example of what you could put in the CSS editor if you use the secondary-title as class:

.secondary-title {
    font-style: italic;
}

If that works, it’s a good idea to narrow down the scope since it now applies to every class that’s called secondary-title everywhere on your website.

I’ve had quick look on your website structure and this CSS code seems to be a good way to only show the secondary title in italic on post lists and single posts:

.wp-block-post, .wp-block-post-content {
    .secondary-title {
        font-style: italic;
    }
}

I hope this all makes sense. If you need more assistance, don’t hesitate to ask. And if it worked, please let me know so I can close this ticket. If you’re pleased with the plugin and my support, I’d also be very grateful if you’d give my plugin a little review ??

By the way, I’m working on a comprehensive, easy-to-understand documentation for Secondary Title that you can find here:

https://docs.kolja-nolte.com/secondary-title/

If you like, I’d be thankful if you had any feedback.

• This reply was modified 3 months, 1 week ago by thaikolja.
• This reply was modified 3 months, 1 week ago by thaikolja. Reason: Formatting

Hi @samjoelnang,

Thanks for your message.

Where exactly are you entering the <i> tags?

Hi @williamslyd,

The easiest way, assuming you’re using the plugin with “Auto show” enabled, would be to wrap the secondary title placeholder inside an HTML tag. For that, go to “Settings” → “Secondary Title” and use the “Title format” field.

For more detailed information, please check out the official documentation site.

This could look like this:

<span class="secondary-title">%secondary_title%: </span>%title%

Using this heading as an example, “I Used to Think That Going to War Was Romantic” would be the secondary title and “It Seemed Like Another World.” the actual title.

I Used to Think That Going to War Was Romantic. It Seemed Like Another World.

Then, you simply add custom CSS code via WP’s Customizer tool. Then, you can add a rule that hides the secondary title on search pages (if you check the source code of your page, you’ll see <body class="...">, and within, it shows what kind of page you’re currently on, in this case, search)

This would be the CSS code:

body.search {
   .secondary-title: {
       display: none;
    }
}

Give this a try, and let me know if it worked for you. If not, we’ll find another way, don’t worry ??

• This reply was modified 3 months, 2 weeks ago by thaikolja. Reason: Added links

Hi @rwilson,

Have you already used the “Title format” setting? Or do you want a different formal for only products?

Thanks, but I hope I’ll have it tested thoroughly and updated the plugin by then. But thanks for the offer. If you like my plugin and my service, feel free to write a review ??

In case you mean the input field for the secondary title when you create or edit posts, then I understand the issue.

If that’s the case, there’s currently no way around because I had to implement a strong XSS protection that strips out all HTML from the input field.

However, I’ve adjusted that part and made it to allow <a> tags while still protecting against any other XSS possibility (<script>, most importantly).

Please get in touch with me via kolja {{dot}} nolte {{at}} gmail {{dot}} com so I can send you the updated version that allows <a> tags. If this works for you, I’ll have it tested with a few other users, and if there are no bugs and the security evaluation turns out fine, I’ll update the plugin as soon as I can.

• This reply was modified 5 months ago by thaikolja.

Hi again,

I’d love to be able to reply even faster, but for some reason that I’m unaware of, the mods decided that my comments must first be approved before they can be published ˉ_(ツ)_/ˉ

This issues like this one, I always need a way to reproduce the issue. Can you walk me through where and what you’re doing and maybe a screenshot of your Secondary Title settings page? That’d help me a lot.

Thanks so far!

Edit: This comment didn’t need approval. I don’t know why and when my comments are being held back and when not. I’m just mentioning it for transparency.

• This reply was modified 5 months ago by thaikolja. Reason: Edit approval statement