Overview
To customize a theme it is recommended first to create a child theme of that theme and then customize the child theme. See the following article for more info on this:
https://developer.wordpress.org/themes/advanced-topics/child-themes/
The basic idea is that it is better to have changes done on a child theme instead of the original theme because the original theme has to be updated from time to time which might break your custom changes. But if you apply changes to the child theme, you can update the original theme without breaking your custom changes.
Creating a child theme
There are different ways to create a child theme. To manually create a child theme we can use FTP to access the WordPress themes folder:
/your-wordpress-folder/wp-content/themes
Create a new folder inside the themes folder and give it a name (this will be the name of your child theme). You can name it for example something like twentytwentytwo-child
Note: The child theme folder should not have spaces in its name, this can lead to errors.
Create a new file inside the child theme folder and name it style.css.
Add the following content to that file:
style.css:
/*
Theme Name: Twenty Twenty Two Child
Theme URI: http://www.yourdomain.com
Description: Twenty Twenty Two Child
Theme Author: Your Name
Author URI: http://www.yourdomain.com
Template: twentytwentytwo
Version: 1.0.0
Text Domain: twentytwentytwo-child
License: GNU General Public License or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
*/
Customizing the TwentyTwentyTwo theme
Text formatting
Adding structure to the page
In order to add structure to the page we need to add the HTML headings (H1, H2, H3, …).
This can be done by first clicking on the [+] button, then entering “heading” in the text field in the popup menu, and then selecting the [Heading] option:
The same can be achieved by typing “/heading” or “/h1” in the new block and pressing the enter key.
Setting the text color
The Gutenberg editor allows both, changing the text color of an entire block and changing the text color of parts of a block. To change the text color of an entire block, ensure that the affected text block is selected (1). Then click on [Block\Color\Text] (2) and then select the desired color (3):
Then a popup menu appears allowing you to select the text color. Unfortunately, the custom colors of the theme are not available here:
Customizing the Heading sizes for a theme
Approach 1
You can set the sizes for Heading in the style.css file of the theme as follows:
../wp-content/themes/twentytwentytwo-child/style.css
... |
Approach 2
Select [Appearance/Editor]:
In this approach, we set the heading size per template. For example, the [Single] template is used for posts. To customize the heading size for posts we have to select this template:
Click on the post body (the headings are used here), click on the top on the right on the [Styles] icon, then open the [Typocraphy] section:
Click on [Headings]
Select the heading H1, H2, … and customize each of them for your needs:
Save your settings.
Customizing posts index template
Setting the style of post titles on the index page
Select [Appearance\Editor (beta)]
Then click on the top left on the WordPress icon and then select [Templates] and then click on [Index] or [Home] depending on how your page is organized:
Click on the title block and then adjust the size
Customizing the post template
Twenty Twenty Two theme provides multiple templates for posts (Single, Single Post, Single Post (No Separators). To see which template is used by your posts, open one of your posts, and click on the gear icon:
The template hyperlink shows which template is used for your post:
If you click on the template hyperlink you get a drop-down list of other templates to change to:
Setting style of Post Titles
First, make sure which template is assigned to your post (there are multiple post templates). To find the template for your post see the “Customizing the post template” section.
To set the type of the post proceed as follows:
Select the option [Appearance\Editor (beta)]:
Click on the WordPress icon on the top left:
Click on [Templates] and then on the template which is assigned to your posts (see section “Customizing the post template”)
Click on the post title (1), then on the Styles icon on the top right (2), and then use the Style options (3) to customize the post title style:
Troubleshooting
Changing the style of the title of the post template has no effect on the actual post
Problem
You have changed the style of the title in the template assigned to your posts but the change does not seem to have any effect on the affected posts.
Resolution
It is possible that you won’t see the changes if you are in WordPress editor mode. To be sure check the published post as it is seen by visitors and not in edit mode.