Centre Page Titles

Hello,
I suggest you create your own page template file, inside of your theme, then use a simle CSS class to automatically center titles like H2 or H3.

HTML (using mycustompagetemplate.php)

<h2 class="mycustomtitle">This is a page title<h2>

then

CSS (adding to style.css or custom theme stylesheet)

{
.mycustomtitle (text-align: center;)
}

Hey Digico Paris,

I’m actually trying to solve the same problem myself. For the <h2 class line, where exactly are we adding that to? I have style.css file in a child theme folder, which I have activated, but I don’t know if I have a mycustompagetemplate.php file anywhere. Could you explain where to do this stuff?

Thanks a lot!

Hello,

This example was using a custom page template, apparently not your case.

For a “regular” page title, just find out what your theme use as a title (H1, H2 or H3 in general – you can right click on the title text with Google Chrome or Firefox > Inspect to find out that).

Then with that knowledge at hand, edit the right CSS file for your theme or child template css file.

For my WP blog one title look like that:

<h1 class="entry-title"><a href="https://blog.digico.fr/design-webdesign/list-of-smartphones-and-devices-size-for-responsive-design/" rel="bookmark">List of smartphones and devices size for responsive design</a></h1>

So, if I want to fully center all page titles I need to change or edit that h1 style definition in style.css file (for a child theme it should be in parent theme location, something like themes/nameoftheme/style.css):

h1 {many text then add... text-align: center;}

Finally rewrite / upload on webserver the needed CSS file.

If you’re not familiar with the process, just keep in mind any css rule is ended by a “;” character even in same line, for example (font-size: 30px; text-align: center;) Spaces are not important, I just put spaces for more readable stuff. Again you can try to use Code Inspectors in Browser to test and see if it works as a preview.

If you want more customization, you might need to create post and / or page templates later.