Changing the Text Color in WordPress

There are 4 ways to change the text color in WordPress. You can change a single word or phrase, an entire paragraph, or all of the text throughout the site. Each method is easy!

Method #1 – Use the Gutenberg editor

Changing the text color with WordPress’s visual editor has always been pretty simple. With the new Gutenberg editor, it’s even easier. Place your cursor on a paragraph and look in the right-hand sidebar. Make sure the “Block” tab is selected (as opposed to the “Post” tab). Open the “Color settings” panel and you’ll see options for the Text Color as well as Background Color.

You can select one of the existing options or click on “Custom color” for something else. A color picker will open up. Click inside the color palette area, moving the slider underneath to display new hues. You’ll see the hex code change as you move around the palette. When satisfied with your choice, click outside of the picker.

This same Color settings panel will appear for headings, lists, buttons, and blockquotes. And, naturally, you can change the Background color in the same fashion. The “Clear” button will revert to the default settings.

If you want only one word or phrase, highlight the word(s). Instead of using the Color Settings for the block, select the down arrow on the content editor toolbar. Scroll to “text color”. You’ll have the same opportunity to select one of the existing colors, or click on “Custom color” for an alternative.

Method #2 – Use the Customizer

There are usually some color settings in the Customize area. The options vary wildly by theme. You may be able to change only the background or links color. Sometimes, you’ll be able to change colors for text, headings, links, etc. The advantage of the Customizer is that the color modifications are site-wide. The most common places you’ll find color settings are in “Typography” or “Global”.

Just like the Color settings for blocks, clicking on the default color circle will bring up the color picker. Here is where you can select your custom color. Play around with the slider to get different hues to appear.

Method #3 – Use the Theme Options

Some themes come packaged with extensive options for modifying all sorts of things. The Avada theme, for example, has quite a substantial options feature. The color settings are in several sections, including the generic color area, as well as typography, menu, header, footer, sidebar, background, etc.

Method #4 – Use CSS

When you want to alter color globally and your theme doesn’t provide adequate options, use the Customizer’s Additional CSS area. A good place to start is the body text. Each snippet of CSS code is a rule that starts with a selector (“p” in the code below), followed by curly brackets that contain a property (“color”) and value (“#0187d1”). Copy and paste the following code into your Additional CSS field:

p {color: #0187d1;}

Click on the “Publish” button at the top of the sidebar to save the code. View the website in your browser window. If you don’t like the blue hue, use Google‘s color picker to find what you prefer (and make life much easier!). Replace the blue property value with the new hex code of your choice.

Headlines can be adjusted, too. There are 6 levels of heads, with “h1” being the largest and most important. Explore by copying and pasting the following code into your Additional CSS field:

h1 {color: #0187d1;}
h2 {color: #011dd1;}
h3 {color: #652cc7;}
h4 {color: #bf1fb5;}
h5 {color: #eb3e0e;}
h6 {color: #91d111;}

Using the Customizer is a safe way to modify your theme. Starting with the paragraph and heading selectors is a good introduction to the world of Cascading Style Sheets. To learn more about CSS, subscribe to my blog!

Related Posts

How Can I Change the Typeface in WordPress?
Why and How You Create WordPress Child Themes
How to Choose a WordPress Theme
Introduction to Web Design