Changing text color in WordPress is simple whether you’re using the built-in editor or custom code. This guide covers multiple methods—from the Gutenberg editor to CSS—so you can style your content exactly how you want it.
Key Takeaways
- Use the Block Editor: The easiest way to change text color is through WordPress’s built-in color picker in the Gutenberg editor.
- Apply Custom CSS: For advanced styling or global changes, add custom CSS via the Customizer or a child theme.
- Leverage Theme Options: Many modern themes include typography and color settings that let you change text color site-wide.
- Use Inline Styles (sparingly): You can apply inline styles directly in the HTML view, but this method isn’t recommended for large-scale changes.
- Consider Accessibility: Always ensure sufficient contrast between text and background colors for readability and ADA compliance.
- Test Across Devices: Colors may appear differently on mobile vs. desktop—always preview your changes.
- Backup Before Editing Code: If using custom CSS, back up your site first to avoid breaking your design.
How to Change Text Color in WordPress
If you’ve ever wanted to make your WordPress content pop with a splash of color, you’re in the right place. Whether you’re highlighting a call-to-action, matching your brand palette, or just adding visual flair, changing text color in WordPress is easier than you might think.
In this guide, we’ll walk you through several reliable methods—from beginner-friendly tools to more advanced techniques. By the end, you’ll know exactly how to change text color in WordPress, no matter your skill level or theme setup.
Method 1: Using the WordPress Block Editor (Gutenberg)
The most straightforward way to change text color is right inside the WordPress block editor. This method works for paragraphs, headings, buttons, and other text-based blocks.
Step 1: Open the Page or Post
Log into your WordPress dashboard and navigate to the page or post where you want to change the text color. Click “Edit” to open it in the block editor.
Step 2: Select the Text Block
Click on the paragraph, heading, or any text block you’d like to modify. A toolbar will appear above the block.
Step 3: Open the Color Settings
In the block settings panel on the right (or in the toolbar), look for the “Color” section. Click the dropdown arrow to expand it. You’ll see options for “Text Color” and “Background Color.”
Step 4: Choose Your Color
Click the color swatch next to “Text Color.” A palette will appear with preset colors. You can:
- Click a preset color
- Use the color picker to select a custom hue
- Type in a hex code (e.g., #FF5733 for orange)
Once you pick a color, it will instantly apply to your selected text.
Step 5: Save Your Changes
Don’t forget to click “Update” or “Publish” to save your work.
Pro Tip: You can save custom colors to your palette by clicking the “+” icon in the color picker. This makes it easy to reuse brand colors across your site.
Method 2: Using Custom CSS
For more control—especially if you want to change text color globally or style specific elements—custom CSS is your best friend. This method works across all themes and gives you pixel-perfect precision.
Step 1: Access the WordPress Customizer
Go to Appearance > Customize in your WordPress dashboard. This opens the Theme Customizer, where you can safely make design changes.
Step 2: Open Additional CSS
In the left sidebar, scroll down and click “Additional CSS.” This is where you can add custom code without touching theme files directly.
Step 3: Add Your CSS Code
Type or paste your CSS rules. Here are a few common examples:
Change all paragraph text color:
p {
color: #2a5d84;
}Change heading colors:
h1, h2, h3 {
color: #1a1a1a;
}Target a specific class or ID:
.highlight-text {
color: #e74c3c;
}Step 4: Publish the Changes
Once you’ve added your CSS, click “Publish” at the top of the Customizer. Your changes will go live immediately.
Important: Always test your site after adding CSS. If something looks off, you can easily remove or edit the code. For more guidance on safely adding CSS, check out our guide on the best way to add CSS in WordPress.
Method 3: Using Your Theme’s Built-in Options
Many premium and modern WordPress themes come with built-in typography and color controls. These let you change text color across your entire site without touching any code.
Step 1: Check Your Theme Settings
Go to Appearance > Customize and look for sections like “Typography,” “Colors,” or “Theme Options.” Popular themes like Astra, GeneratePress, and Divi include these features.
Step 2: Adjust Text Color Settings
In the Typography or Colors panel, you’ll usually find options for:
- Body text color
- Heading colors (H1, H2, etc.)
- Link and hover colors
Simply click the color field and choose your desired shade. Changes are often applied in real time, so you can preview them instantly.
Step 3: Save and Publish
Once you’re happy with the colors, click “Publish” to make them live.
Note: If your theme doesn’t have these options, consider switching to a more customizable theme. You can learn how to safely change themes by reading our article on how to apply a WordPress theme.
Method 4: Using Inline Styles (Advanced)
While not recommended for large-scale changes, inline styles can be useful for quick, one-off adjustments. This method involves editing the HTML directly.
Step 1: Switch to HTML View
In the block editor, click the three-dot menu in the top-right corner of a text block and select “Edit as HTML.”
Step 2: Add the Style Attribute
Wrap your text in a span tag with a style attribute. For example:
<span style="color: #3498db;">This text is blue.</span>Step 3: Switch Back and Save
Click “Edit visually” to return to the normal view, then update your post.
Warning: Inline styles can make your site harder to maintain and may conflict with theme styles. Use them sparingly.
Troubleshooting Common Issues
Sometimes, your text color changes might not appear as expected. Here’s how to fix common problems:
Colors Not Showing Up?
Your theme or a plugin might be overriding your styles. Try adding !important to your CSS rule:
p {
color: #ff0000 !important;
}Use this sparingly, as it can make future styling harder.
Color Looks Different on Mobile?
Some themes apply different styles on mobile devices. Use browser developer tools (right-click > Inspect) to check for responsive CSS rules.
Can’t Find the Color Option?
Not all blocks support color changes. Try switching to a paragraph or heading block, or check if your theme supports full-site editing.
Accidentally Broke Your Site?
If custom CSS causes layout issues, go back to Appearance > Customize > Additional CSS and remove the problematic code. Always back up your site before making major changes. For extra safety, consider using a child theme when modifying theme files.
Best Practices for Text Color in WordPress
Changing text color isn’t just about aesthetics—it’s also about usability. Follow these tips to keep your site professional and accessible:
- Maintain Contrast: Use tools like WebAIM’s Contrast Checker to ensure text is readable against its background.
- Stick to a Palette: Limit your site to 2–3 main text colors to avoid visual clutter.
- Test on Multiple Devices: Colors can look different on screens with varying brightness and color profiles.
- Avoid Pure Black: Dark gray (#333 or #444) is often easier on the eyes than #000.
- Use Semantic Meaning: Red for warnings, green for success—don’t rely solely on color to convey information.
Conclusion
Changing text color in WordPress is a powerful way to enhance your site’s design and improve user experience. Whether you’re using the intuitive block editor, diving into custom CSS, or leveraging your theme’s built-in tools, you now have multiple reliable methods at your fingertips.
Start with the block editor for quick edits, and graduate to CSS for more control. Always prioritize readability and consistency, and don’t forget to test your changes across devices.
With these techniques, you’ll be able to customize your WordPress site’s text color like a pro—no coding degree required.