Warning: This tutorial is its own example so at times it may feel a bit like Inception. Proceed if you’re okay with that.
So sometimes you want to change the presentation of a chunk of text in a WordPress blog post but you don’t want to have to download a text editing plugin to do it. There are several reasons you may want to edit text in posts;
“Maybe you want to make quotes show in a certain way, like this…”
The good news is that you can achieve this with CSS. You just have to target the text that you want to change first and you do that by adding a class to it.
Adding a class to text in a WordPress post
In the WordPress text box you have two viewing options; Visual and Text. By default you’ll be working in visual mode. We need to switch to ‘text’ mode to add a class in HTML.
Here you can identify the text you’d like to edit with CSS and wrap it in a custom class that we’ll target later.
In this example I’ve added the class inside a set of paragraph <p> tags.
So the code used is… <p class=”demo-quote”>Insert Text Here</p>.
This allows us to target just this section of text with CSS.
Styling classes with CSS
In the quote section above I have used the following CSS, but honestly, the world’s your oyster. You can add any and all CSS you want to. Just target the text using the class you created earlier and go for it.
The great thing about targeting the text in this way, over using a plugin, is that you can easily recreate the exact styling again and again just by adding the same class to the text.
If you put this to good use, let me know in the comments. It’d be great to see what you get up to!