How to Change Font Colors in WordPress | Paragraphs, Words, Headings
Articles,  Blog

How to Change Font Colors in WordPress | Paragraphs, Words, Headings


This is Ben from WP Answered and by the end of this video, you’ll know how to change the color of paragraphs, individual words and headings. Let’s get started. First, let’s change the color of a paragraph. I’m viewing a sample page here in the editor and let’s dive right in by changing the color of this first paragraph. Keep an eye on the right sidebar and watch how the options change. When I click into the paragraph block, the settings you see here are specific to the paragraph block, and the section we want to use right now is called “Color Settings.” If I click on the Color Settings section, it expands and you can now see the options to change both the background color and the text color of the paragraph. If I click around the background colors settings here, you’ll see the background behind the paragraph updating instantly, and if I click on the text color options, you’ll see the same thing happening with the text. The colors here are useful when you don’t care about a specific shade, but there is a Custom Color link here, and if I click on it, you’ll see a complete color picker where I can customize the color more carefully. The hexadecimal color code here is especially helpful because it allows you to change the text to a precise color. I’ll clear the background color and leave the text color for now. Next, let’s look at how to change the color of individual words within a paragraph. The WordPress editor doesn’t include a setting to change the color of specific words within a paragraph, so we’ll do it ourselves with a little bit of HTML and CSS. Don’t worry, I know you don’t write code, but this is going to be very easy. Start by clicking somewhere in the paragraph. Click on the options button up here, and then select the “Edit as HTML” option. The only difference is that we can now see the opening and closing “p” tags that make this text into a paragraph. I want to make these words here a different color, so I’m going to place them inside a span element. First, add an angled bracket and then type “span” followed by a closing angled bracket. Then copy the span opening tag and paste it after the last word that you want to change the color of. Then add a forward slash to the beginning to mark the end of the span element. That’s all of the HTML we need to write and there’s just one more step. Inside the opening span tag, add a space and type out “style=” followed by opening and closing quotes. Then inside the quotes we’ll type out “color: green;”. That part is the CSS. This is going to make all of the text within the span element green. If you click on the options button again and switch back to editing the block visually, you’ll now see that the text is in fact green. This may have been a little more work than you bargained for, but knowing a bit about HTML and CSS can be very helpful as a site owner. Also, I just want to show you, you can replace green with any hex code you want, so I can use the other paragraph as an example and copy the hex code out of the color picker. Now if I switch the paragraph block back to the HTML view, I can replace “green” with the hex code and then switch back to the visual editor and you can see that it’s now the exact color I want. Oh, and I can also switch the color of the paragraph to something else while the text I modified retains the other color. So I can click around here and you’ll see the HTML I used still overrides the color that I can add with the Gutenberg sidebar over here. Now before I go, I promised to show you how to change the color of headings too, so let’s take care of that now. You’ll notice that if I click on this heading block, there isn’t a color settings option available in the sidebar. If you want to change the color of a heading block or a blockquote or any other block besides a paragraph, you’ll need to use the HTML and CSS trick you just learned. To do that, once again, click into the heading block, then click on the options panel and choose to edit it as HTML. We’ll paste the span code inside of the heading element and then add a closing span tag at the end right before the closing heading element. Now, if we switch back to editing the heading as a visual element, you’ll see that the color has been updated just like with the paragraph. That’s everything you need to know about changing the color of text in WordPress, and if you learned something new, why not subscribe? I’ve got a lot more WordPress tutorials on the way, and if you still have any questions, please post in the comments section below. Thanks for watching.

One Comment

  • WP Answered

    Having problems? I do my best to provide comprehensive tutorials, but if something didn’t work for your site, leave a comment below so I can help out and make this a more complete resource for future viewers.

Leave a Reply

Your email address will not be published. Required fields are marked *