Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Change the Text Color in WordPress (4 Easy Methods)

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to change the text color in WordPress?

Color can draw attention to a page’s most important content and strengthen your website’s branding. Changing the text color can also make your site easier to read, especially for people with vision-related problems.

In this guide, we will show you how to easily change the text color on your WordPress website.

How to change the text color in WordPress

Why Change the Text Color in WordPress?

There are lots of reasons why you might want to change the text color in WordPress. Maybe you’d like to highlight a call to action on a landing page, or perhaps you want to use colored subheadings on your site.

Sometimes, you may even want to change the text color across an entire website. For example, maybe your WordPress theme uses a grey font color, but you’d prefer to use black for better contrast with your background color.

You can also use color to trigger an emotion from your visitors. For example, many people think blue creates a sense of trust and reliability. To learn more, please see our guide on how to choose a perfect color scheme for your WordPress website.

That said, let’s see how you can change the text color in WordPress. Simply use the links below to jump to the method you prefer:

Method 1: Using the Block Editor (Best For Small Amounts of Text)

If you just want to change a few words, a paragraph, or a heading inside a post, then you can use the WordPress content editor.

To get started, open the post or page where you want to change the text color or create a new page.

If you haven’t already, then type in the text that you want to customize. Depending on the text, you may need to add a Paragraph, Heading, or some other block that accepts text. For help with this, take a look at our guide on how to use the WordPress block editor.

As soon as you have some text, you are ready to change its color.

Changing the Text Color of a Block

For this first example, we are going to change the text color for a whole block. This is a good way to highlight an entire section of content, such as a whole paragraph.

Simply click on the block and then select the ‘Block’ tab in the right-hand menu.

Changing the text color of a WordPress block

Once you’ve done that, find the ‘Color’ section and click on ‘Text.’

The visual editor will now show some colors that complement your WordPress theme. You can simply click on any color to change all the text inside that block.

Choosing a color from your WordPress theme

To use a different color, just click on the box at the top of the popup.

This opens a picker where you can choose a new font color.

Customizing your text using the color picker

Another option is to type in a hex code, which is the HTML code for a particular color. This is useful if you want to use a very specific color, such as the exact shade of red from your website’s logo.

If you are not sure what hex code to use, then it may help to look at a site such as HTML color codes. Here, you can explore different colors and get their hex codes.

Once you have a code, either paste or type it into the ‘Hex’ box.

Customizing text using a hex code

If you change your mind and want to restore the default text color, then just click on the dotted button in the right-hand menu.

The options you see will vary depending on whether you’ve also changed the block’s background color, so you may need to click on either ‘Text’ or ‘Reset all.’

Restoring the theme's default text color

Changing the Text Color of a Word or Phrase

Sometimes, you may only want to change the color of a particular word, phrase, or sentence, such as the call to action on your sales page.

To do this, simply highlight the word or phrase that you want to change in the WordPress block editor. Then, click on the small downward arrow on the content editor toolbar and click on ‘Highlight.’

Changing the text color for specific words in WordPress

This opens a popup showing some colors that will look good with your current theme.

You can also choose a color manually or even use a hex code following the same process described above.

How to change the text color in WordPress

Method 2: Using the Theme Customizer (For Classic Themes Only)

Color can draw attention to a page’s most important content, but lots of different colors can get overwhelming. With that in mind, you’ll typically want to use the same text color across most of your WordPress website.

Changing each page and post manually using the block editor would take a long time, so instead, we recommend changing the theme itself using the theme customizer.

To get started, go to Appearance » Customize.

The WordPress theme customizer

You now need to find the theme’s text settings. Every theme is different, but you will typically need to look for a ‘Typography’ option.

In our images, we’re using OceanWP.

The theme customizer Typography settings

Go ahead and click on the ‘Typography’ or similar setting. At this point, you will usually see all the different types of text used in the theme, such as Heading 1 and Page Title.

To change the text inside your posts and pages, click on the ‘Body’ or similar section.

Changing the body text color using the WordPress theme customizer

To customize the text color, find the ‘Font Color’ section.

Then, click on ‘Select Color.’

The font color selector

This will open the picker. You can either use one of the ready-made colors, choose a new color using the settings, or type in a hex code.

If you want to restore the theme’s default color at any point, then simply click on ‘Default.’

The color picker settings in the theme customizer

You can also use these settings to change the font size, style, letter spacing, and more.

When you are happy with how the text looks, click the ‘Publish’ button at the top of the screen.

Method 3: Using the Full Site Editor (For Block Themes Only)

If you are using a block-based theme such as ThemeIsle Hestia Pro or Twenty Twenty-Three, then the process of changing the theme’s text color is slightly different.

To customize the text using the Full Site Editor go to Themes » Editor.

Selecting the Full-Site Editor from the WordPress admin panel

Now, you will see several menus to customize the appearance of your website.

Here, you want to select ‘Styles.’ This section defines the global colors, typography, and layout for your website.

Choosing Styles in the Full Site Editor

On the next screen, you will see some style combinations to choose from. If you want to change how your block theme looks completely, then you can just pick one of the available options.

But for demonstration purposes, we will go ahead and click the pencil ‘Edit styles’ button.

Clicking Edit Styles in Full Site Editor

You will now arrive at the Full Site Editor and the Styles tab will be open.

Let’s click ‘Colors.’

Selecting Colors in the Full Site Editor

The sidebar will show you some elements whose color settings you can change, like text, links, captions, buttons, and headings.

Each one will have different color settings, so be sure to explore them to see what they can do.

Elements whose color you can change in the WordPress Full Site Editor

Let’s use an example by clicking ‘Heading.’

To change the heading color, you can either select one of the predefined theme colors or use a custom one by clicking the color selector.

How to change the heading text color in the WordPress Full Site Editor

Once you’re happy with how your text colors look, just click the ‘Save’ button. All the changes you make will then be applied across all of your pages and posts.

For more information, check out our beginner’s guide to WordPress Full Site Editing.

Method 4: Changing the Text Color Using CSS Code (Recommended)

Depending on your theme, it may not be possible to change the text across your entire site using the customizer menus. One option is to change each piece of text manually using one of the methods in this post. However, this would take a lot of time and effort.

The good news is that you can customize the text across an entire site by adding custom CSS. Even better, this method allows you to define different colors for specific types of text, such as Heading 1 (h1) or paragraph text (p).

Because WordPress theme editing and customization can change from theme to theme, we recommend using WPCode to add custom CSS to your site.

WPCode is the best code snippets plugin used by over 1 million WordPress websites. It makes it easy to add custom CSS, PHP, HTML, and more without having to edit any core WordPress files.

The first thing you need to do is install and activate the free WPCode plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, head over to Code Snippets » Add Snippet.

How to add custom CSS to your site using WPCode

Here, you will see all the ready-made WPCode snippets you can add to your site. These include a snippet that allows you to completely disable comments, upload file types that WordPress doesn’t usually support, disable attachment pages, and much more.

Simply hover your mouse over ‘Add Your Custom Code’ and then select ‘Use snippet’ when it appears.

Adding a custom snippet to WordPress

To start, type in a title for the custom code snippet. This can be anything that helps you identify the snippet in the WordPress dashboard.

After that, open the ‘Code Type’ dropdown and select ‘CSS Snippet.’

Adding custom CSS to WordPress

Next, you can add the custom CSS to the small code editor. You’ll need to type in the selector for the type of text you are customizing, followed by the hex code for the color you want to use.

For example, you can change the color of the paragraph text by adding the following:

p { color:#990000; }

If you want to use a different color for your site’s headings, then you’ll need to use the h1, h2, h3, or similar selectors.

You can see this in the image below.

Changing the text color using custom code

If you’re not sure what hex code to use, then you can use a site such as HTML color codes.

When you’re happy with the snippet, scroll to the ‘Insertion’ section. WPCode can add the CSS to different locations, such as after every post, frontend only, or admin only.

To change the text across your entire WordPress blog, click on ‘Auto Insert’ if it isn’t already selected. Then, open the ‘Location’ dropdown menu and choose ‘Site Wide Header.’

How to add custom CSS across your entire website

Once you’ve done that, scroll to the top of the screen and click on the ‘Inactive’ toggle so it changes to ‘Active.’

Finally, click on ‘Save Snippet’ to make the CSS snippet live.

How to change the text color using WPCode

Now, if you visit your site, you’ll see the custom text live.

If you want to use a different text color at any point or just add more CSS to that snippet, then simply go to Code Snippets » Code Snippets. Here, hover your mouse over the snippet you just created and click on ‘Edit’ when it appears.

Editing a code snippet in WordPress

You can now edit the code snippet to use the new color and then click on ‘Save Snippet’ to make the change live on your website.

Besides text color, you can also use WPCode to change the default color when you select a text or enable text highlights on a page and post content.

A lot of the time, you’ll want your landing pages and sales pages to look different from the rest of your website. This makes them stand out, which can get you more conversions.

If you want to change the text color for a landing or sales page, then we recommend using SeedProd. It’s the best landing page plugin for WordPress and has an easy-to-use drag-and-drop page builder.

SeedProd comes with over 90 blocks that you can simply drag and drop onto your layout. You can then fine-tune these blocks in lots of different ways, including changing the text color.

If you’re using a custom page to get more conversions, then SeedProd works with many popular third-party tools you may already be using to manage conversions.

These include top email marketing services, WooCommerceGoogle Analytics, and more.

First, you need to install and activate SeedProd. For more details, see our step-by-step guide on how to install a WordPress plugin.

Note: There’s also a free version of SeedProd that allows you to create custom home pages, landing pages, and more. However, for this guide, we’ll be using SeedProd Pro since it has lots more templates and advanced blocks.

After activating the plugin, SeedProd will ask for your license key.

Adding the license key to SeedProd

You can find this information in your account on the SeedProd website. After entering the license key, go ahead and click the ‘Verify Key’ button.

Next, you need to visit SeedProd » Pages and click on the ‘Add New Landing Page’ button.

How to create a new landing page in SeedProd

After that, it’s time to choose a template. SeedProd has over 300+ professionally designed templates that you can customize with your own images, text, colors, and more.

To select a template, simply hover your mouse over it and then click the ‘Checkmark’ icon.

Choosing a SeedProd template

We’re using the ‘Juicy Sales Page’ template in all our images, but you can use any design.

Next, go ahead and type in a name for the custom page. SeedProd will automatically create a URL based on the page’s title, but you can change this URL to anything you want.

To help the search engines understand what the page is about, you may want to add some relevant keywords. This can improve your WordPress SEO.

When you’re happy with the information you’ve entered, click on the ‘Save and Start Editing the Page’ button.

Adding relevant keywords to a page URL

Next, you’ll be taken to the SeedProd drag-and-drop page builder, where you can customize your template.

The SeedProd editor shows a live preview of your design to the right and some block settings on the left.

The SeedProd drag and drop page builder

The left-hand menu also has blocks that you can drag onto your layout.

For example, you can drag and drop standard blocks like buttons and images or use advanced blocks such as countdown timers, animated headlines, social sharing buttons, and more.

Adding a social sharing block to a custom page

SeedProd also comes with ‘Sections,’ which are collections of blocks that are often used together. For example, SeedProd has a header, hero image, call to action, testimonials, contact formFAQs, features, footer sections, and more. This can help you create a professionally-designed page, fast.

To look through the different sections, simply click on the ‘Sections’ tab. To preview any section, hover your mouse over it and then click on the magnifying glass icon.

The SeedProd ready-made sections

To add the section to your design, simply click on ‘Choose This Section.’

This will add the section to the bottom of your page.

Adding a ready-made section to your website

You can move sections and blocks around your layout using drag and drop.

To customize a block, simply click to select it in your layout. The left-hand menu will now show all the settings you can use to configure that block.

Customizing SeedProd blocks on a landing page

To change the text color, simply click on any block that has text.

In the left-hand menu, select the ‘Advanced’ tab. Under ‘Styles,’ click on ‘Color.’

Changing the text color using SeedProd

This opens a popup where you can choose a new text color.

Another option is to type a hex code into the ‘Hex’ field.

Customizing the text color using a page builder plugin

You can now change the text color for any other block simply by following the same process described above.

When you’re happy with how the page looks, it’s time to publish it by clicking on the ‘Save’ button. Then, choose ‘Publish.’

Publishing a page with custom text colors

If you visit your online store, blog, or website, then you’ll see the new page in action, complete with your custom text colors.

We hope this tutorial helped you learn how to change the text color in WordPress. You may also like our tutorial on how to increase your blog traffic and our expert pick of the best email marketing services.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

19 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dennis Muthomi says

    QUICK QUESTION…. is there a way to customize the highlight color when selecting text?
    It would be awesome if that could match my brand’s color palette too instead of the default blue color.
    thanks in advance for any insight on that! :-)

    • WPBeginner Comments says

      In many cases this can be set with the theme settings in the Customizer.

      If it’s not available, the theme may not have included this feature, in which case you may have to use CSS.

    • WPBeginner Comments says

      If you are trying to customize the link color, this usually can be set in the Customizer, if the theme has this feature.

      Otherwise, CSS could be used to change the link color.

    • WPBeginner Support says

      If none of the recommendations from our article were able to assist you, we would recommend reaching out to the support for your specific theme to see if they have a recommendation in case their CSS is overriding that you add.

      Admin

    • Jiří Vaněk says

      If you use some kind of pagebuilder, there should be a problem too. For exhample Elementor could overwrite your CSS on its own. So if you have Elementor, Oxygen, Divi builder or anything like this, try to look on collor setings here too.

  3. Kayla says

    Do you have any insight into how to change the background color of just part of a sentence?

    Thank you for all of your help. I’ve learned an immense amount from the content you share.

  4. Ekta says

    The 2nd method worked very well for me. Had spent quite some time on the net looking for how to change the color of the widget title and this took only a minute. Thanks a lot.

  5. Bob Wood says

    I still cannot change the color of a single word.
    I pull down options on single word –
    Inline code
    Inline image
    justify
    strikethrough
    underline

  6. Tunde Sanusi (Tuham) says

    Users can only do this in the Block Editor!
    That’s why I’ve been recommending people to start learning about the Block Editor

Leave a Reply to WPBeginner Support Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.