Recently, certainly one of our readers requested if there was a simple manner to change the text color in WordPress?
The reply is sure. You can simply change your font shade in WordPress throughout your complete website, and even only for a single phrase inside your put up content material.
In this information, we’ll present you the way to simply change the textual content shade in WordPress, step-by-step.
There are a lot of explanation why you may want to change the textual content shade in your posts or pages. Maybe you’d like to emphasize a key phrase, or maybe you need to use coloured subheadings on a specific web page.
Alternatively, you may want to change the textual content shade throughout your complete website. Perhaps your theme makes use of a grey shade for textual content, however you’d moderately make it black, or a darker grey, for higher readability.
In this tutorial, we’ll be overlaying the following strategies:
- Changing the textual content shade utilizing the visible editor (nice for altering just a few phrases, a paragraph, or a heading when writing content material).
- Changing the textual content shade in the theme customizer (the finest manner to change font colours throughout your complete website, however not supported by all themes).
- Changing the textual content shade utilizing CSS code (appropriate for altering the font shade throughout your complete website with any themes).
Just click on a kind of hyperlinks to soar straight to that methodology.
Method 1. Changing the Text Color Using the Visual Editor
You can use the default WordPress editor to put phrases, paragraphs, and even subheadings in a unique shade out of your primary textual content.
Here’s how one can change your textual content shade utilizing the block editor.
First, you’ll want to edit the put up or web page that you really want to change, or create a brand new one.
Next, kind in your textual content. You’ll want to create a paragraph block or a heading block as acceptable. For assist with this, check out our tutorial on how to use the WordPress block editor.
Once your textual content is in place, you’ll be able to change the shade.
Changing the Text Color of a Block
For this primary instance, we’re going to change the textual content shade of the complete block.
Simply click on on the block and the Block Settings panel ought to open up on the proper hand aspect of your display screen. Next, click on on the arrow for ‘Color settings’ to broaden that tab. You’ll see the textual content shade settings right here.
Now, you’ll be able to choose a brand new shade for the textual content. The visible editor will present you some choices based mostly in your theme. You can merely click on on certainly one of these to change your textual content shade.
Alternatively, in case you have a selected shade in thoughts, click on the ‘Custom Color’ hyperlink. This will open up a shade picker the place you’ll be able to manually choose a shade. You may use this to kind in a hex code.
If you modify your thoughts and need to return to the default textual content shade, simply click on the ‘Clear’ button under the shade choices:
Pro Tip: If you need to change the background shade for a block, you are able to do that right here too.
Changing the Text Color of a Word or Phrase
What for those who solely need to change the shade of 1 or two phrases? That’s straightforward utilizing the block editor as nicely.
First, you’ll want to spotlight the phrase(s) that you really want to change. Then, click on the small downward arrow on the content material editor toolbar.
Next, merely click on on the ‘Text Color’ hyperlink at the backside of the dropdown checklist:
You’ll now see the similar shade choices as for the complete block. Again, you’ll be able to choose from certainly one of the default choices or use the ‘Custom color’ hyperlink to choose any shade you need.
The shade choices aren’t restricted to paragraph blocks. You may change the textual content shade of heading blocks. As with paragraph blocks, you’ll be able to set textual content shade for the complete block in the block settings. Alternatively, you’ll be able to spotlight particular person phrases and alter their shade.
Note: You can’t set a background shade for heading blocks.
You may change the textual content shade in a listing block, however solely by highlighting the phrase(s) and utilizing the toolbar. There’s no choice in the block settings to change the textual content shade for the complete of a listing block.
Changing the Font Color Using the Classic Editor
If you’re nonetheless utilizing the basic WordPress editor, then you’ll be able to change the font shade utilizing the toolbar.
In the basic editor, click on on the Toolbar Toggle on the far proper. You’ll then see a second row of icons:
Now, you’ll be able to choose your textual content and alter the font shade utilizing the font shade dropdown.
Method 2. Changing the Text Color in the Theme Customizer
What in order for you to change the textual content shade throughout your complete web site? Many of the finest WordPress themes will permit you to do that utilizing the theme customizer.
For this instance, we’re utilizing the OceanWP theme. It’s certainly one of the high free themes accessible for WordPress.
In your WordPress dashboard, go to Appearance » Customize to open up the Theme Customizer.
Next, you want to search for an choice equivalent to ‘Typography’. The accessible choices, and what they’re known as, will range relying in your theme.
Let’s go forward and click on on the Typography tab, or an equal choice. Next, search for a setting the place you’ll be able to change the textual content of your posts and pages. In OceanWP, that is known as the ‘Body’ textual content. You want to click on on this, so that you’ll can customise the font shade and extra.
When you click on on the Font Color selector, you’ll see a shade picker. Choose no matter shade you need to use in your textual content. This will change the textual content shade in all your posts and pages.
You may change your heading colours in an analogous manner, by utilizing the choices to change H1, H2, and so forth.
You may see : How to Disable Automatic Updates in WordPress
Once you’re blissful along with your modifications, click on the ‘Publish’ button at the high of the display screen.
Tip: Choosing black or darkish grey textual content on a white or very mild background is often finest for readability.
Method 3. Changing the Text Color Using CSS Code
What in case your theme doesn’t have the choice to change the textual content shade?
You can nonetheless change font shade throughout an entire website by utilizing the theme customizer. Go to Appearance » Customizer in the WordPress dashboard.
At the backside of the checklist of choices, you’ll see a tab that reads ‘Additional CSS’.
Next, click on on the Additional CSS tab, and also you’ll see some directions plus a field the place you’ll be able to enter CSS code.
For starters, you’ll be able to copy this code into the field. After that, you’ll be able to change the 6 numbers to the hex code of your chosen shade.
This will change the font shade of the common textual content in all of your posts and pages to darkish purple (or no matter shade you selected), like this:
If you need to change the shade of the headings inside your put up, you’ll be able to add this code as an alternative:
Again, change the hex code to no matter shade you need.
If you’re not aware of CSS or need a beginner-friendly CSS editor that permits you to simply customise the complete kinds of your web site, then we suggest trying into CSS Hero. It’s a strong visible editor that permits you to customise the kinds of your complete website.
We hope this tutorial helped you find out how to change the textual content shade in WordPress. You may additionally like our tutorials on how to change the font measurement in WordPress, and how to add customized fonts in WordPress.