Text Color WordPress


How to Customize Text Color in WordPress

When it comes to editing posts in WordPress, adjusting the text color can significantly impact your website. It allows you to convey meaning and add emphasis to specific content. Additionally, colors play a vital role in the overall visual appeal of your site. In this guide, we will explore different methods to change text color in WordPress and enhance the look and feel of your content.

Method 1: Customizing Text Color with Themes

The easiest way to change text color in WordPress is by selecting a theme that offers suitable color options. Follow these steps:

  1. Access your WordPress Dashboard and navigate to the Appearance menu.
  2. Click on Themes and choose either Add New to search for new themes or select a pre-installed theme.
  3. Preview the theme to see how it looks or activate it immediately.

It’s important to note that changing your theme not only alters the text color but also modifies the entire website layout. If you want to modify the font color without affecting the overall design, you can use WordPress’ customization tool.

Method 2: Changing Text Color with the WordPress Classic Editor

If you are using the Gutenberg Editor, switch to the Classic Editor block to change text color. Follow these steps:

  1. Access your WordPress Dashboard and click on Posts, then Add New to open the Gutenberg Editor.
  2. Click the Add Block button in the upper left corner.
  3. In the small window that appears, locate the Formatting menu and select Classic from the options.
  4. A Classic Editor block will appear below the title block. Click on it.
  5. If you are using an older version of WordPress, click the Toolbar Toggle button located on the upper bar’s far right side.
  6. Select the word, phrase, or sentence you want to change the color of.
  7. Look for the Text Color button (represented by the “A” symbol) and click the inverted triangle symbol to view the available colors.
  8. Choose the desired color from the range provided, and the selected text will change accordingly.

If the desired color is not available, you can use the Custom option at the bottom of the pop-up window. Click it, and another window will open, allowing you to select your preferred color. Once you’re done, the new custom color will appear in one of the empty boxes below. Finally, click Publish or Update to save your changes.

Method 3: Changing Text Color with CSS

For more advanced customization options, you can modify text color using CSS. Here’s how:

1/ Visit the HTML Color Codes site to find the HEX number for your desired color.

2/ Open the CSS Editor in your WordPress dashboard by hovering over the Appearance menu, clicking Customize, and selecting Additional CSS.

3/ In the blank page that opens, insert the following code:

.nameofcolor {
    color: #hexnumbers;

Replace “nameofcolor” with a name of your choice and “#hexnumbers” with the HEX code for your desired color. For example, if you want red, the code should be:

.red {
    color: #ee2e05;

4/ Open the post you want to edit and add the Classic Editor block.

5/ Follow the instructions mentioned earlier in Method 2 to select the desired text.

6/ In the Gutenberg Editor, click the three dots icon at the top right corner and select Code Editor.

7/ In the Code Editor window, wrap your text with the following code:

<span class="nameofcolor">the selected text</span>

Replace “nameofcolor” with the name you assigned in the CSS code.

8/ Exit the Code Editor and continue editing in the Classic Block. Note that the code might not immediately reflect the desired color in the editor, but it will change once you preview or publish the post. Finally, click Publish or Update to save your changes.

Congratulations! You have successfully learned three different methods to change text color in WordPress. Now, it’s time to unleash your creativity and experiment with different color options to make your content visually appealing.


In summary, here are the three ways to change text color in WordPress:

  • Method 1: Customize text color by changing your theme.
  • Method 2: Use the WordPress Classic Editor to modify text color.
  • Method 3: Apply CSS to customize text color with advanced options.

Feel free to explore these methods and find the one that best suits your needs. By leveraging the power of text color customization, you can enhance the visual impact of your WordPress website and create engaging content.

Take a step further and make your website visually captivating by incorporating colors that align with your brand identity and content strategy. Enjoy the process of customizing your text color in WordPress and watch your website come to life with vibrant and eye-catching content.

Now, head over to your WordPress dashboard and give these methods a try. Happy customizing!

Hire top vetted developers today!