Ultimate Guide: Change Text Color in WordPress for Any Theme!

When we began our journey with WordPress, we thought changing the text color would be straightforward. However, we soon discovered that it can differ based on your theme, settings, or the editor you are using.

Having assisted thousands of beginners in customizing their WordPress sites, we understand that this is a frequent challenge for many users.

The good news is that there are several easy methods to change text color in WordPress, regardless of the theme you are using.

In this comprehensive guide, we will guide you through the simplest ways to customize your text color in WordPress.

Why Change Text Color in WordPress?

Changing the text color in WordPress allows you to emphasize important content, enhance readability, and align with your site’s branding.

For instance, you can emphasize a call to action on a landing page or incorporate colored subheadings throughout your site.

At times, you may want to change the text color for your entire website. For example, if your WordPress theme features a grey font color, you might prefer black for better contrast with your background.

Additionally, color can evoke emotions in your visitors. For instance, many believe that blue conveys a sense of trust and reliability.

For more information, check out our comprehensive guide on selecting the ideal color scheme for your WordPress website.

Now, let’s explore how to change the text color in WordPress.

Feel free to use the links below to navigate to the method you prefer:

Step 1: Change Text Color in the Block Editor

If you want to change the color of specific words, a paragraph, or a heading within a post, you can use the WordPress content editor. This method is effective for both block themes and classic themes.

Begin by opening the post or page where you wish to change the text color, or create a new page.

If you haven’t done so yet, type in the text you want to customize. Depending on your needs, you may need to add a Paragraph, Heading, or another block that allows text input. For assistance, refer to our guide on using the WordPress block editor.

Once you have your text ready, you can proceed to change its color.

Changing the Text Color of a Block

In this first example, we will change the text color for an entire block. This method is effective for emphasizing a complete section of content, such as a full paragraph.

Click on the block and select the ‘Block’ tab in the menu on the right.

Next, locate the ‘Color’ section and click on ‘Text.’

The visual editor will display a selection of colors that match your WordPress theme. Click on any color to change the text within that block.

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

This will open a color picker where you can choose a new font color.

Alternatively, you can enter a hex code, which is the HTML representation of a specific color. This is helpful if you want to match a precise color, like the exact shade of red from your website’s logo.

If you’re unsure about which hex code to use, you can visit a site like HTML color codes to explore various colors and their hex codes.

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

If you decide to revert to the default text color, simply click on the dotted button in the right-hand menu.

The available options may change depending on whether you’ve altered the block’s background color, so you might need to click on either ‘Text’ or ‘Reset all.’

How to Change the Text Color of a Word or Phrase

At times, you may wish to change the color of a specific word, phrase, or sentence, such as the call to action on your landing page.

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

This will open a popup displaying a selection of colors that complement your current theme.

You can also manually select a color or use a hex code by following the same steps mentioned above.

Pro Tip:Looking to change the color of your links? Check out our beginner’s guide on how to modify link colors in WordPress.

Method 2: Changing Text Color in the Theme Customizer(For Classic Themes Only)

Color can highlight the most important content on a page, but using too many different colors can be distracting. With this in mind, it’s best to maintain a consistent text color throughout most of your WordPress website.

Manually changing the text color for each page and post using the block editor can be time-consuming. Instead, we recommend modifying the theme directly through the theme customizer.

Important Note: If you cannot find the theme customizer, you are likely using a block theme. In that case, you can skip to method 3.

To begin, navigate to Appearance » Customize.

Next, locate the text settings for your theme. Each theme varies, but you should typically look for a ‘Typography’ option.

In our example, we are using OceanWP.

Click on the ‘Typography’ or a similar option. You should see various text types used in the theme, such as Heading 1 and Page Title.

To modify the text in your posts and pages, select the ‘Body’ or a similar section.

To change the text color, look for the ‘Font Color’ section.

Then, click on ‘Select Color.’

This action will open a color picker. You can choose from pre-defined colors, select a new color using the settings, or enter a hex code.

If you wish to revert to the theme’s default color at any time, simply click on ‘Default.’

These settings also allow you to adjust the font size, style, letter spacing, and more.

Once you are satisfied with the appearance of your text, click the ‘Publish’ button located at the top of the screen.

Method 3: Changing Text Color in the Full Site Editor (Applicable for Block Themes Only)

If you are using a block-based theme, such as ThemeIsle Hestia Pro or Twenty Twenty-Three, the process for altering the theme’s text color differs slightly.

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

You will now see various menus that allow you to customize your website’s appearance.

Select ‘Styles’ to access the section that defines the global colors, typography, and layout for your site.

On the following screen, you will find several style combinations available. If you wish to completely change the look of your block theme, you can simply choose one of the provided options.

For demonstration purposes, we will click the pencil icon labeled ‘Edit styles.’

You will now enter the Full Site Editor, with the Styles tab open.

Let’s click on ‘Colors.’

The sidebar will display various elements whose color settings you can modify, including text, links, captions, buttons, and headings.

Each theme offers unique color settings, so take the time to explore them and discover their capabilities.

For demonstration, let’s click on ‘Heading.’

To modify the heading color, you can choose from the available theme colors or opt for a custom color by using the color selector.

Once you’re satisfied with the appearance of your text colors, simply click the ‘Save’ button. Your changes will then be applied to all pages and posts.

For additional guidance, refer to our beginner’s guide on WordPress Full Site Editing.

Method 4: Changing Text Color Using CSS Code (More Customization Options)

If you seek greater control over your website’s text colors or need to modify an element not covered by your theme settings, adding custom CSS code is a fantastic option.

This powerful approach is highly customizable, allowing you to target specific text types, such as headings or paragraphs, throughout your entire site.

The great news is that you can personalize text across your entire site by incorporating custom CSS. This method also enables you to assign different colors to specific text types, like Heading 1 (h1) or paragraph text (p).

Since editing and customizing WordPress themes can vary, we suggest using WPCode to easily add custom CSS to your website.

WPCode is the leading code snippets plugin, utilized by over 1 million WordPress sites. It simplifies the process of adding custom CSS, PHP, HTML, and more without modifying any core WordPress files.

First, you need to install and activate the free WPCode plugin. For detailed instructions, refer to our step-by-step guide on how to install a WordPress plugin.

Once activated, navigate to Code Snippets » Add Snippet.

Here, you’ll find a collection of ready-to-use WPCode snippets that you can integrate into your site.

Simply hover over ‘Add Your Custom Code’ and click ‘Use snippet’ when it appears.

To begin, enter a title for your custom code snippet. This can be any name that helps you recognize the snippet in your WordPress dashboard.

Next, open the ‘Code Type’ dropdown menu and choose ‘CSS Snippet.’

Then, you can input your custom CSS in the small code editor. You’ll need to specify the selector for the text you want to customize, followed by the hex code for your desired color.

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

p { color: #990000; }

To customize the color of your site’s headings, use the h1, h2, h3, or similar selectors.

Refer to the image below for a visual reference.

If you’re unsure about which hex code to choose, you can visit a resource like HTML color codes.

Once you’re satisfied with the snippet, navigate to the ‘Insertion’ section. WPCode allows you to add the CSS in various locations, such as after each post, only on the frontend, or exclusively in the admin area.

To apply the text color change across your entire WordPress blog, select ‘Auto Insert’ if it’s not already checked. Then, open the ‘Location’ dropdown menu and select ‘Site Wide Header.’

After that, go to the top of the screen and switch the ‘Inactive’ toggle to ‘Active.’

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

Now, when you visit your site, you’ll see the custom text color applied.

If you wish to change the text color again or add more CSS to that snippet, simply navigate to Code Snippets »Code SnippetsTo edit the snippet you just created, hover your mouse over it and click on ‘Edit’ when the option appears.

You can now modify the code snippet to incorporate the new color, and then click on ‘Save Snippet’ to apply the changes to your website.

In addition to changing text color, WPCode allows you to adjust the default color when selecting text or to enable text highlights in your page and post content.

Method 5: Changing Text Color in a Page Builder

Often, you’ll want your landing pages to have a distinct appearance from the rest of your website. This differentiation can enhance visibility and lead to higher conversion rates.

This is particularly crucial if you manage multiple landing pages, such as one for a viral waitlist and another for a Google ad campaign. Each page may require its own unique design and color scheme to effectively engage different audiences or marketing strategies.

For creating landing or sales pages, we recommend using SeedProd. Among all the page builders we’ve tested, it stands out as the best available, featuring an intuitive drag-and-drop interface.

SeedProd includes over 90 blocks that you can easily drag and drop into your layout. You can customize these blocks in various ways, including adjusting the text color.

If you’re using a custom landing page to boost conversions, SeedProd integrates seamlessly with many popular third-party tools you might already be utilizing for conversion management.

These tools include leading email marketing services, WooCommerce, Google Analytics, and more.

First, install and activate SeedProd. For detailed instructions, refer to our comprehensive guide on how to install a WordPress plugin.

Once the plugin is activated, SeedProd will prompt you to enter your license key.

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

Next, navigate toSeedProd » Pagesand click on the ‘Add New Landing Page’ button.

Now, it’s time to choose a template. SeedProd offers over 300 professionally designed templates that you can personalize with your own images, text, colors, and more.

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

We are utilizing the ‘Juicy Sales Page’ template for all our images, but feel free to choose any design that suits your needs.

Now, enter a name for your custom page. SeedProd will automatically generate a URL based on the title you provide, but you’re free to modify this URL as you wish.

Once you are satisfied with the information you’ve entered, click the ‘Save and Start Editing the Page’ button.

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

The SeedProd editor displays a live preview of your design on the right side, while the left side contains various block settings.

The left menu also includes blocks that you can easily drag into your layout.

For instance, you can drag and drop standard blocks like buttons and images, or utilize advanced blocks such as countdown timers, rotating testimonials, social sharing buttons, and more.

SeedProd also features ‘Sections,’ which are groups of blocks commonly used together. For example, SeedProd offers sections for headers, hero images, calls to action, testimonials, contact forms, FAQs, features, footers, and more. This helps you create a professionally designed page quickly.

To navigate through different sections, click on the ‘Sections’ tab. To preview a section, hover over it and click the magnifying glass icon.

To incorporate the section into your design, click on ‘Choose This Section.’

This action will place the section at the bottom of your page.

You can rearrange sections and blocks in your layout using the drag-and-drop feature.

To customize a block, click to select it in your layout. The left-hand menu will display all the settings available for that block.

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

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

This will open a popup where you can select a new text color.

Alternatively, you can enter a hex code in the ‘Hex’ field.

You can change the text color for any other block by following the same steps outlined above.

Once you are satisfied with the appearance of the page, click the ‘Save’ button and then select ‘Publish’ to make it live.

When you visit your online store, blog, or website, you will see the new page with your custom text colors in action.

Common Questions About Changing Text Color

Here are some common questions from our readers about how to change text color in WordPress.

What is the simplest method to change the text color for my entire website?

The most effective approach is to utilize your theme’s built-in settings. For classic themes, you can locate this option in the WordPress Customizer under Appearance » Customize, typically found in a ‘Typography’ or ‘Colors’ section.

For modern block themes, you can set global colors by navigating to Themes » Editor and selecting the ‘Styles’ icon. This will help maintain a uniform appearance across all your pages.

Why am I unable to change my text color in WordPress?

This problem often arises when your theme’s stylesheet (CSS) takes precedence over the settings you apply in the editor. The theme’s code may contain a more specific rule for text color. In such cases, adding your own custom CSS (as described in Method 4) is the most effective way to enforce the color change you desire.

What are the best practices for text color and ensuring accessibility?

To enhance accessibility, it’s crucial to maintain a strong contrast between your text and background colors. This ensures that your content is easily readable for visitors with visual impairments. We suggest using the WebAIM Contrast Checker, an online tool, to verify that your color choices comply with accessibility guidelines.

We hope this guide has helped you understand how to change text color in WordPress. Additionally, you might want to explore our tutorial on adding a font resizer in WordPress and tips for creating a mobile-friendly WordPress website.

If you found this article helpful, please subscribe to our YouTube Channel for more WordPress video tutorials. You can also connect with us on Twitter and Facebook.