Select Page

How to Change the Font Color in WordPress

How to Change the Font Color in WordPress
What You’ll Be Creating

Changing the font color in your WordPress site is something you can easily do for a small section of text or a block. Alternatively you can change the color of a specific element or a CSS class throughout your site.

In this quick tutorial, I’ll show you how to quickly change the font color in your WordPress site.

I’ll show you two methods:

  • Changing font color of an individual block.
  • Adding a CSS class to a block for color and then styling the class.

I’ll also give you an overview of changing the font color across your site, using your stylesheet.

If you want to learn how to add completely new fonts to WordPress, or how to change the font size in WordPress you can also learn how here.

How to Change the Font Color of a Section of Text

You can choose to make a section of text or a whole block of text in one of your posts or pages a different color from the rest. You can use this to highlight some text and make it stand out, or to enhance the design of your site.

A word of warning: too many colors will make your site look messy and unprofessional. Make sure you use colors that don’t clash.

Start by finding the section of text whose color you want to change.

Select the text you want to change the color of by double clicking it. Click the arrow icon above the block and select Text Color.

Choose the color you want the text to have. The color will change for you in the editing screen.

Alternatively, you can use a hex code to select a specific color. This is a good idea if you want to use a color that’s used elsewhere in your site.

Click the Custom color link and either select a color from the picker or type in the hex code.

Repeat this for any other blocks of text or sections of text whose color you want to change. You don’t have to change the color of a whole block—you can just change one word if you want.

Finally, click Update to update your post or Publish to publish it. That will save your changes.

Now your text will be whatever color you gave it:

How to Use a CSS Class to Change Font Color

If you want to change a bunch of text blocks so they’re all the same color, the best way to do this is by using a CSS class. This way you know they’ll all be the same color and you won’t have to remember what color you used.

Find your text block again and in the Block pane, open the Advanced tab.

In the Additional CSS class(es) field, type in a CSS class. I’m gong to use highlight-color. I’m deliberately not naming the color in case I decide to change it later on.

Now click Update or Publish to save your post.

You now have two options for editing the color of blocks using that class:

  • add styling in the Customizer
  • add styling to your theme’s stylesheet

Styling the class in the Customizer is the easiest way to do it, and won’t cause you any problems when you update your theme.

Go to Appearance > Customize in the WordPress admin and click Additional CSS.

In the Additional CSS pane, type in the CSS to change your font color:

Change your color in that code to whatever color you want to use, using a hex code. It’s a good idea to use a color that’s in use elsewhere in your theme, or one that looks good with your theme while making the text stand out.

Click the Publish button to save your changes.

Now go to your post in your live site and you’ll see that your block with the highlight-color class is a different color than the text around it:

Now you can use this class for any blocks you want to make that color.

Changing Font Color in Your Theme’s Stylesheet

With the two methods I’ve shown you, you don’t need to edit the files in your theme or have an in-depth understanding of CSS. And they give you a quick way to change the font color in WordPress.

But if you want to edit the color of existing elements in your site (such as all paragraphs or links), or you want to add CSS in the stylesheet instead of in the customizer, you’ll need to edit your theme’s stylesheet.

You can find out more about editing your stylesheet in our guide to adding custom CSS to your WordPress site. If you want to go into more depth, that’s a great place to start.


Changing the font color of text in your WordPress site just takes minutes to do. You can either edit the font color directly, or give it a class and then write CSS for your class.

But however you choose to do this, don’t overdo it. And make sure you use colors that work together well to avoid having a site that looks messy and unprofessional.

Make Your Site Stand Out With a Professional WordPress Theme

Are you in designing a new WordPress website? Our collection of professionally-designed WordPress themes can give your website a beautiful new look and feel, within minutes. 

Here are a few of the best-selling and up-and-coming WordPress themes available on ThemeForest for 2020.

Leave a reply


Video of the Month

⚡ Introducing Color Filters, Effects And Blend Modes For All Images, Modules, Rows and Sections ⚡

https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=50195&url=60995Our latest Divi Feature Update is live! 😍 Today we are excited to announce a full range of color filters, effects and blend modes that can be applied to any Divi image, module row or section. You are going to have a blast getting creative with these new controls.Everything inside of Divi now has Hue, Saturation, Brightness, Contrast, Invert and Sepia controls that allow you to quickly adjust the appearance of any element. These new features are the perfect way for anyone to bring their unique flare to the page, and the collection of controls really lend themselves to experimentation and exploration. Even if you don’t end up using these filters on your completed page, they are a great way to make sweeping adjustments as you explore new possibilities for your design.In addition to color filters, we have also added Blur and Opacity controls. Now you can create stunning depth-of-field effects that really bring your page to life without needing to open Photoshop or compromise the integrity of your original image. No need to use super-big transparent PNG images that take forever to load.Finally, you can also apply blend modules to any Divi element. A whole new range of effects can now be accomplished by blending layered elements, such as columns, rows and sections in creative ways. If you are looking for some inspiration, be sure to click the link below to check out some of the amazing demos created by our team!

Posted by Bonus4you on Tuesday, May 5, 2020

must have

UNLIMITED DOWNLOADS: 1,500,000+ Logos & Design Assets

All the Logos you need and many other design elements, are available for a monthly subscription by subscribing to Envato Elements. The subscription costs $16.50 per month and gives you unlimited access to a massive and growing library of 1,500,000+ items that can be downloaded as often as you need (stock photos too)!

Get unlimited downloads 2,300,000+ top quality assets

UNLIMITED DOWNLOADS: 1,500,000+ Icons & Design Assets

All the Icons you need and many other design elements, are available for a monthly subscription by subscribing to Envato Elements. The subscription costs $16.50 per month and gives you unlimited access to a massive and growing library of 1,500,000+ items that can be downloaded as often as you need (stock photos too)!