How to Change Your Text Color in WordPress

When editing your posts in WordPress, using different font color may seem trivial but it does contribute a lot to your site. First, you can convey a particular meaning in your text by using specific colors, adding emphasis to something you want to say. Second, colors are responsible for making your website either looking dull, saturated, or calm.

Now that you are aware of the significance, I will show you how to change text color in WordPress.

Customize Your Text Color With a Few Simple Clicks

The first thing you can do to change text color is to switch your theme into something more suitable.

To do this, go to your WordPress Dashboard, hover your cursor above the Appearance menu (the one that looks like a wall brush) and click Themes.

Click Add New on the top of the page to start searching for new themes or pick something from already pre-installed ones. You can preview your choice or activate it right away.

One important thing, before you switch to the new theme, is to make sure that you backup your website’s content and widgets. There are cases where some data is lost after switching a new theme.

Now, changing your theme does change the text color. However, your whole website’s layout will also change. So, how to modify your font color without affecting the entire site? Use the WordPress’ customization tool.

Here’s How You Can Do It

Remember that the following process takes place in WordPress’ new editor page – the Gutenberg Editor.

1. From your WordPress Dashboard, hover your cursor above the Posts menu (the one with the pushpin symbol), and click Add New. The Gutenberg Editor will open.
2. Click the Add Block button in the upper left. A small window will appear. Find the Formatting menu, and click on it. Out of the available options choose Classic.
3. A Classic Editor block will appear right below the title block. Click on it, and you will see the layout below.
4. Users of the old WordPress version can start from this point. Make sure to click the Toolbar Toggle button – the button is located on the far right on the upper bar.
5. Select the particular word, phrase, or sentence you want to change the color of. Then, look for the Text Color button (it is the one with the “A” symbol). Click the inverted triangle symbol. You should see a range of colors. Pick one.
6. The result should be seen right away.
7. What if the color you want is not there in the options? Find the Custom option on the bottom of the pop-up frame and click it.
8. Another pop-up window will open. There you can select your preferred option. Click OK after you are done. The new color will be automatically applied to the selected text. For further use, the new custom color will fill one of the empty boxes below.
9. After coloring the selected text, press Publish or Update as usual.

Can’t Find Your Favorite Color?

One other way to change text color is through CSS. This process is a bit more complicated than the previous one, but it offers you more color choices and is rather simple to apply.

There are three main steps: find your color, add them to CSS, and implement them.

1. Go to the HTML Color Codes site. There, you can mix the desired colors. Remember to write down the HEX number.
2. Now, open the CSS Editor. In the WordPress dashboard, hover your cursor above the Appearance menu, and click Customize. You should see the page below. Click on Additional CSS.
3. A blank page will open. Insert the following code:

   .nameofcolor { color: the hex numbers; }

   For instance, I want to insert red, so my code should look like this:

   .red { color: #ee2e05; }

4. Open the post you want to edit. Add the Classic Editor. Follow the instructions used in the first example.
5. Using the Guttenberg Editor, click the three dots icon at the right corner of the page. A new window will appear. Find Code Editor and click it.
6. The Classic Block will look like this:
7. Wrap your text with the following code. Note that the <span class=”nameofthecolor”> should have the name of the color you inserted into Additional CSS previously:

   <span class=”nameofthecolor”>the selected text</span>

   Here is how it should look:

8. You can exit the Code Editor and work in the Classic Block. However, do not be surprised if the code goes missing, and the selected sentence does not turn to the desired colors in the editor. It will change after you preview or publish the post.
9. After you’re done coloring the selected text, click Publish or Update.
10. You just finished the last step on how to change text color in WordPress. Congratulations!

That’s It!

In a nutshell, here are three ways on how to change text color in WordPress:

• By changing your theme.
• Changing the color using the WordPress Classic Editor.
• Using CSS to modify your text.

Now, go to your WordPress dashboard and give it a try!