How to Change Text Color and Decoration in WordPress
Posted on May 16th, 2022
WordPress is well known and famous for its customisation and flexibility. We can easily customise or create any web pages or blogs with WordPress. We also have different page builders that provide element drag and drop features. You have enough tools and elements in the WordPress directory. You can easily drag them and drop them as per your required place on the web pages. We have thousands of plugins and themes in the WordPress library. And you will find more than one method to do the same work. Like this article’s topic, there are many ways to change the text colour in WordPress. And we will learn all the methods that help change the Text colour of the web page or blog posts.
Before we start, let’s briefly discuss some reasons for when we need to change the text colour on WordPress. We also learn some essential points about changing text colour in WordPress.
Change Text Colour
There are different ways to change the text colour, and we can use different methods to do it. The methods are used in different ways to accomplish different needs. So, in this article, we will learn different ways to change the text colour depending on the conditions. For example, you run a blog, and you want some customisations on text colour, or you want to use the relevant theme colour in the articles. You may change each article heading manually or use some predefined WordPress functions. These functions can work globally and apply to each heading text area or your decided text blog.
So, firstly let’s discuss all the methods of changing text colours and then learn step by step articles about each technique and use. Here you can see the list of ways with their specific use.
Change Text Colour Using Visual Editor:
This method is handy when changing a few words on an article or page. Even this method will be easy for changing the colour of a paragraph or a heading. It’s a manual method where you manually select the text and choose a specific colour from the tool area: the most straightforward way but a manual process.
Change Text Colour Using Theme Customizer:
With the use of a customiser, we can change the text colour of the specific element of the whole website. It will work like Global Colours of WordPress, and it will apply the selected colour to the selected part of the entire website. This method is the best way to use colours for the whole website. But many themes did not support customiser features or have their customisation.
Change Text Colour Using Custom CSS Code:
The third method is here to overcome all the disadvantages of method 2. This method will work with any theme and also affects your whole website. Whenever you add a CSS code to a specific element, it will apply to each similar part of your website.
So let’s learn all the methods step by step in tutorials.
Using Visual Editor
The visual editor is used for several customisations. We will discuss how easily we can change the colour of different paragraphs, words and headings. Yes, there are several ways to do that. Let’s see how you change the color of a block.
Change the Block Color
Step 1: Go to your WordPress websites Admin area and log in with your Username and Password.
Step 2: Now, click on the Posts section and click on the All Posts, as you can see below.
(on this step, you can even go to the Pages section and edit the static page. To see the list of the pages, click on the Pages section and click on All Pages.)
Step 3: Now, Find the post or page from the list you want to edit. Hover the cursor over the post or page to see the edit option, as shown below. Click on the Edit button to open the visual editor.
Step 4: Now, click on the text block you want to change the colour. You will see a Toolbox upon the text block when you click on a block, just as in the image below. You can also see the Settings section Right side of the screen.
Step 5: You can easily Show and Hide the more settings section by clicking on Setting Icon on the top right side. Or you can click on the three dots of the Toolbar available upon the selected block. Then click on Show more settings.
Step 6: After selecting the block, click on the Colour tab available in the more settings section, as shown below.
Step 7: Here, you have three options for colour customisations as Text, Background and Links. Click on the text to change the colour of the text available on the selected block.
Step 8: Here, you can see a Colour Box with some colour options. Click on the colour circles to Apply colour to the text.
You can see the selected colour on the top of the box. You can click on the colour panel that shows the selected colour to add a new colour, as you can see below.
Step 9: Now, click on the Colour Panel to open a custom colour picker. Here, select the colour as you require.
You can also add colour code from the settings options, as shown below.
Step 10: To remove all the colour changes, you can click on the Clear button on the colour panel, as shown in the image below.
Step 11: Click on Save Draft/Publish button to save the changes.
In this section, you just learned how to change the text colour of a block.
Next, let’s learn how we can change the colour of a selected text. Follow the steps after clicking on edit the post or page.
How to Highlight Text with Color
Step 1: Click on the block and select the text you wish to change the colour. Then click on the Down Arrow, as you can see in the below image.
Step 2: Now, click on the Highlight option. It will allow you to open another colour box, as you can see in the image below.
Step 3: In the below image, you can see the Colour Selection box. It will work the same as the Colour box. Select the predefined colours, or you can click on the colour panel to select a custom colour.
Step 4: To remove the colour from selected text, click on the Clear button, as shown in the below image.
We just learned how to change the whole text block colour and change the selected text colour. Now, let’s discuss how to change the text colour using WordPress Customizer.
Using WordPress Customizer
This method is generally used to change the text colour of the whole website. Once you change the text colour from the customiser will affect the entire website and specific elements. Let’s see how we can use the customiser to change the text across the whole website. But before we start, there’s a point that needs to be remembered: not all the themes support this feature. But most themes will allow you to use the customise option. It will work like global settings that apply to the whole website. So, in case you don’t have a custom option, try to change the theme.
So, let’s start a step by step tutorial for changing text colour using customised features.
Step 1: Log in to your WordPress website’s admin area using your Username and Password.
Step 2: Now, Click on the Appearance section and click on Customize option, as you can see in the below image.
(if the customise option is unavailable, your current theme does not support this feature.)
Step 3: Now, find and click on the Colors tab section from the left-sided Toolbar, as shown below.
Step 4: In the Colors section, you can see some global colours list and website elements list in the tools bar. You can add new global colours by clicking the “+” icon circle. These are saved colours, so you can use them quickly without wasting time.
(All the themes may have different options and sequences. So if you can’t find an option for colours, then try to find an alternative for typography. And still can’t find the colour option, then try to read the theme user manual.)
Step 5: Now, click on the element you want to change the colour. For this example, I choose Body. But, you can select any text. You can see the changes on the right side, as shown below.
Step 6: Now, Click on the circle beside the Background Colour to change the background of the body text.
Step 7: To change the text colour of body text, click on the colour circle beside the text, as you can see in the below image.
Step 8: After choosing the best colours, click on publish to save the changes.
As we discussed, We can easily change the element’s colour globally. You have many options here, and you can change the header, footer, heading, etc., directly from here. So, let’s understand how we can change colours using CSS codes. And this method is also helpful when you don’t have the colours option in the customiser. So if the tutorial is not working, follow the following procedure to accomplish the task.
Using CSS Codes
The CSS Codes are the cascading style codes used to change and sometimes animate the elements. So, in this tutorial, we will learn how to change the text colour with CSS Codes in WordPress. So let’s start the tutorial.
Step 1: Log in to your WordPress website’s admin area using Username and Password.
Step 2: Then, Hover your mouse on the Appearance tab then, click on the customise tab option, as you can see in the below image.
Step 3: Then click on the Additional CSS tab, available in the left side tab section. See the below image for reference.
Step 4: In the Additional CSS option, You will find a text area as below image. If you don’t know CSS codes, just paste the below code into the text areas, as you can see below.
p { color:#990000; }
This code will change the paragraph text into a red colour. You can use any element HTML tag and add any colour code you want.
Step 5: Then click on the Publish button to save the changes.
Congratulations, you just learned 3 different methods for changing text colour in WordPress.
Conclusion
As we discussed in the introduction, we have too many options for customisations in WordPress. Even we have more than one method to complete the task. In this tutorial, we learned 3 different ways to change the text colour in WordPress. Some of them take care of manually changing like the first method, which is not global. But second and third methods both work globally. And, It will apply the colour to each similar element of the whole website. You can search for different HTML tags in the third method and add new colour options with CSS codes.
