Can someone help me with WordPress capitalisations code?

Dark Sky · Mar 12, 2021

I have a blog where I didn't focus on capitalising the titles and headings, as a result I just have a ton of blog posts with inconsistent capitalisations.

Inside the articles, I want all the H2, H3, H4, H5, H6 to have a capital letter at the start and lowercase throughout the rest.

Inside the articles, I want all the H1 so have a capital letter for each word.

On the archive pages I want the H2s to be capitalised for each word like the H1 inside the articles. As my H2 on my category pages are the blog post titles, but the blog post titles are H1 inside the articles.

I don't want to have to manually go through every heading on every post. So was wondering if this could be done in code? Preferably without CSS as if I change it with CSS it will still appear in the google search without the changes.

Any suggestions or is this just something I'm going to have to manually do?

davids355 · Mar 12, 2021

H1, H2, H3, H4, H5 {
text-transform: capitalize;
}

rafark · Mar 12, 2021

Not at all. It’s very easy to do with php

693840 · Mar 12, 2021

For your h1, you can use text-transform: capitalize;
Not sure about the other one though. You could change it with a few lines of JS or prferably PHP..

693840 · Mar 12, 2021

davids355 said:
H1, H2, H3, H4, H5 {
text-transform: capitalize;
}

Only works for h1, it capitalizes the first letter of each word

rafark · Mar 12, 2021

davids355 said:
H1, H2, H3, H4, H5 {
text-transform: capitalize;
}

That would capitalize the first letter of each word. The op only wants to capitalize the first letter of each heading and he wants it to change the actual character, which needs to be done in php.

davids355 · Mar 12, 2021

Blackhat Lifter said:
Only works for h1, it capitalizes the first letter of each word

rafark said:
That would capitalize the first letter of each word. The op only wants to capitalize the first letter of each heading and he wants it to change the actual character, which needs to be done in php.

Too early for me I didn’t read the op correctly lol

rafark · Mar 12, 2021

For the articles, you need to add a filter to the_content, use a regular expression targeting all h1-h6 tags and use the functions strtolower() and ucfirst().

Dark Sky · Mar 12, 2021

rafark said:
For the articles, you need to add a filter to the_content, use a regular expression targeting all h1-h6 tags and use the functions strtolower() and ucfirst().

I'm a complete noob to PHP, I don't suppose it's possible to create a code I can copy and paste in somewhere?

Or would you need to see the site to pick out certain variables?

rafark · Mar 12, 2021

Dark Sky said:
I'm a complete noob to PHP, I don't suppose it's possible to create a code I can copy and paste in somewhere?

Probably not. Your best bet is to search on google for a plugin.

This one already has a working regex, maybe someone else can help you out all the pieces together:

https://github.com/tommcfarlin/title-capitalization-for-wordpress

invonker · Mar 12, 2021

How about this JS script?

JavaScript:

document.querySelectorAll('h2').forEach(x => {
    var content = x.innerText;
    if (content) {
        content = content[0].toUpperCase() + content.substring(1);
        x.innerText = content;
    }
})

Dark Sky · Mar 12, 2021

invonker said:

How about this JS script?

JavaScript:

document.querySelectorAll('h2').forEach(x => {
    var content = x.innerText;
    if (content) {
        content = content[0].toUpperCase() + content.substring(1);
        x.innerText = content;
    }
})

I don't code, but that would seem to do the trick for the H2, I wish I never gave up programming now, I can read it like I can read english, but can't write it xD

Where would I insert this code?

Thanks!

Gogol · Mar 12, 2021

Don't do hacks for this

Just place

Code:

h1,h2,h3,h4,h5,h6{
text-transform:uppercase
}

and it will do the work just fine.

Edit: oops I see that you just need the first char to be capitalised.
for that you could do this

Code:

h1:first-letter,h2:first-letter,h3:first-letter ,h4:first-letter ,h5:first-letter ,h6:first-letter   {
    text-transform: uppercase;
}

Also, for capitalising each word's first letter, use

Code:

.element{
text-transform:capitalize;
}

where .element is the element that you want that effect in.

Dark Sky · Mar 12, 2021

Gogol said:
Don't do hacks for this

Just place

Code:

h1,h2,h3,h4,h5,h6{ text-transform:uppercase }

and it will do the work just fine.

Edit: oops I see that you just need the first char to be capitalised.
for that you could do this

Code:

h1:first-letter,h2:first-letter,h3:first-letter ,h4:first-letter ,h5:first-letter ,h6:first-letter { text-transform: uppercase; }

Also, for capitalising each word's first letter, use

Code:

.element{ text-transform:capitalize; }

Only problem with CSS is it the titles appear in google with the previous capitalisations,

Gogol · Mar 12, 2021

Dark Sky said:
Only problem with CSS is it the titles appear in google with the previous capitalisations,

Well, then there's only one way... using callbacks before rendering the content, like others have suggested.

693840 · Mar 12, 2021

Gogol said:
Don't do hacks for this

Just place

Code:

h1,h2,h3,h4,h5,h6{ text-transform:uppercase }

and it will do the work just fine.

Edit: oops I see that you just need the first char to be capitalised.
for that you could do this

Code:

h1:first-letter,h2:first-letter,h3:first-letter ,h4:first-letter ,h5:first-letter ,h6:first-letter { text-transform: uppercase; }

Also, for capitalising each word's first letter, use

Code:

.element{ text-transform:capitalize; }

where .element is the element that you want that effect in.

Nice one, I never knew :first-letter, dope! Can definitely be used to make some unique styles.

invonker · Mar 12, 2021

Gogol said:
Don't do hacks for this

Just place

Code:

h1,h2,h3,h4,h5,h6{ text-transform:uppercase }

and it will do the work just fine.

Edit: oops I see that you just need the first char to be capitalised.
for that you could do this

Code:

h1:first-letter,h2:first-letter,h3:first-letter ,h4:first-letter ,h5:first-letter ,h6:first-letter { text-transform: uppercase; }

Also, for capitalising each word's first letter, use

Code:

.element{ text-transform:capitalize; }

where .element is the element that you want that effect in.

Is it ::first-letter as according to this link https://www.w3schools.com/cssref/sel_firstletter.asp

You can copy and paste this line to your html file

Code:

<style>
h1::first-letter,h2::first-letter,h3::first-letter ,h4::first-letter ,h5::first-letter ,h6::first-letter   {
    text-transform: uppercase;
}
</style>

Gogol · Mar 12, 2021

Blackhat Lifter said:
Nice one, I never knew :first-letter, dope! Can definitely be used to make some unique styles.

There's a caveat to this.
The element has to be either block, or inline-block. Otherwise, this wouldnt work.

invonker said:
Is it ::first-letter as according to this link https://www.w3schools.com/cssref/sel_firstletter.asp

You can copy and paste this line to your html file

Code:

<style> h1::first-letter,h2::first-letter,h3::first-letter ,h4::first-letter ,h5::first-letter ,h6::first-letter { text-transform: uppercase; } </style>

It could be. I use this very rarely so..

693840 · Mar 12, 2021

@invonker @Gogol

CSS3 introduced the ::first-letter notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :first-letter, introduced in CSS2.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

Gogol · Mar 12, 2021

Blackhat Lifter said:
@invonker @Gogol

CSS3 introduced the ::first-letter notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :first-letter, introduced in CSS2.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

That makes sense. Yes it used to be very confusing whether to use :before or ::before etc... It still is confusing, but we can always just copy paste (what would I do without cmd + c, cmd + v

)

Can someone help me with WordPress capitalisations code?

Banned - leaving fake reviews.

Super Moderator

Elite Member

Banned - Inappropriate behavior

Banned - Inappropriate behavior

Elite Member

Super Moderator

Elite Member

Banned - leaving fake reviews.

Elite Member

Newbie

Banned - leaving fake reviews.

Administrator

Banned - leaving fake reviews.

Administrator

Banned - Inappropriate behavior

Newbie

Administrator

Banned - Inappropriate behavior

Administrator

Main Menu

Marketplace

Making Money

BlackHat World