How To Change The Font Color Of Your Headings In WordPress 5.0 Gutenberg
So when I went to change the heading font color in Gutenberg 5.0 and couldn’t find an easy solution, I started scouring the internet webs for a quick “how-to.” It was there that I found I wasn’t alone. Suggestions included finding a plugin that would allow heading font color changes. Others said it wasn’t possible to change heading font colors in WordPress 5.0 Gutenberg editor just yet, but that maybe one day this would change. Another said to change it in CSS. And that got me thinking, could I change the color of my headings in Gutenberg 5.0 if I worked in the HTML tab in the block editor? The block editor is Gutenberg 5.0’s new editor layout.
The answer is YES! And Gutenberg 5.0 seems to expect us to do that. It even offers a few guideposts if something doesn’t go quite right. Truthfully, I love the new block editor. Learning it was a lot like learning a new language (and totally worth it, by the way!). I hope you have the same overall positive experience, too!
So let’s get started, and I’ll show you how to change the font color of your headings in WordPress 5.0 Gutenberg!
WHAT YOU’LL NEED TO CHANGE THE FONT COLOR OF YOUR HEADINGS IN WORDPRESS 5.0 GUTENBERG:
Font color numbers or font color name. Colors have names or numbers in WordPress written in a code a few different ways WordPress will understand. For example, colors may have a straightforward name, such as “red”, that WordPress will understand. Other times the color is written in RGB (3 different numbers separated by commas). RGB stands for Red, Green, Blue. Or the color is written as a hex color (a pound sign in front of six alphanumeric characters). For example, there are thee ways to write the color red:
- Color Name – Red
- RGB – 255, 0, 0
- Hex # – #FF0000
In the above examples, each represents another way to write the color red. And they each tell WordPress the color red should appear in the block you’re working in. Keep reading, and I’ll show you how.
HTML tab in the Gutenberg 5.0 block editor. You’ll want to work from the HTML tab in the block editor.
HOW TO CHANGE THE FONT COLOR OF YOUR HEADINGS IN WORDPRESS 5.0 GUTENBERG:
Below are steps to change the font color of headings in Gutenberg 5.0.
- Select the heading block and begin typing the heading you want in your blog post. At this point it does not matter if you are working in the visual or HTML tab.
- When you are done writing the heading, it’s time to give it a color. Click on the three vertical dots and select “work from html.” This will shift you into HTML mode for that block, where you’ll add a piece of code telling WordPress what color you want that heading to be.
- Once you’re satisfied with the heading color, then toggle back to the visual tab. You do this by clicking the three vertical dots on the lefthand side of the block.
Here are screenshots detailing the process outlined above (descriptions of each step are below the pictures).
Fill in the blog title name.
Click the Plus Sign for a new block and then select “Heading.”
Fill in the header with the message you want.
Click the three vertical lines and select “Edit as HTML.”
You will be in HTML mode now.
Add a piece of code that tells WordPress the font color to use. It is typically written as <font color = #yourchosencolor>Heading</font>. See below for troubleshooting if you have issues writing the code.
Click the three vertical lines on the left to return to “Edit visually.”
Click the plus sign below the header to continue with your blog post.
Begin typing in the new block you’ve chosen.
And voila! you have changed the color of your heading! And now you know how to change the font color of your headings in WordPress 5.0 Gutenberg!
PREVIEWING YOUR PROGRESS IN THE GUTENBERG EDITOR:
If you’d like to preview your progress to see if your header looks the way you want it to, then click the preview option in the editor. The green header shown in the screenshot below is what I intended to create. So now I know my header is ready to go (at least for the purposes of this blog post!). And I can continue on with my blog post.
TROUBLESHOOTING HOW TO CHANGE THE FONT COLOR OF YOUR HEADINGS IN WORDPRESS 5.0 GUTENBERG:
Once you get going, working in Gutenberg 5.0 and changing the colors of your headers becomes fairly straightforward. Bt the first time isn’t always a charm. So let’s look at a few ways to troubleshoot changing the color of your headings if things don’t go smoothly at first.
- Typing the code incorrectly. I mentioned that Gutenberg 5.0 seems to know we might want to work from the html tab and change a few things about our headers. So if you type your code incorrectly, Gutenberg 5.0 will offer to resolve the issue with a button you can click. Click the button and it should make the change for you. You can also check out W3 Schools article,
Here are screenshots detailing what an error message might look like (descriptions of each step are below the pictures).
If there is an error message, then convert to HTML to correct it or click Resolve, and the Gutenberg editor will try to fix it for you.
The error message will show what is wrong. In this case I wrote the code incorrectly, and the Gutenberg editor put the incorrect text in a red box so I know where the error is.
If you run into trouble as you navigate the new Gutenberg editor, then try creating your blog posts in the new editor and switch to the Classic Editor (usually located on the right sidebar of the Gutenberg editor) before publishing. I’ve done this as I make sure everything on my blog, including plugins, is compatible with the WordPress 5.0 update. Then you can say current with your blog while you troubleshoot. Classic Editor won’t stick around forever, but it’s a great way to make the transition to the new format.
Learning how to work with the WordPress 5.0 Gutenberg editor will take time. Learning how to change the font color of your headings in WordPress 5.0 Gutenberg is just one way to dive even deeper into what this new WordPress editor has to offer!
Thank you for this great post! I would have NEVER thought to change DOCUMENT HTML-much easier!
I’m glad you found it helpful!