Using classes and CSS to change text in WordPress posts

Using classes and CSS to change text in WordPress posts

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.

text box

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.

example adding class

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.

.demo-quote {
color: #2AB091 !important;
font-style: italic;
text-align: center;
font-size: 23px !important;
background-color: #2AB091;
padding-top: 20px;
border-left-width: 4px;
border-left-style: solid;
margin-bottom: 20px;
}

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!

Get our best blogs & free stuff straight to your inbox. Join our mailing list now.

Get in! You're all signed up for our next newsletter.

6 Comments

  1. Great blog right here! Additionally your site loads up fast! What web host are you the usage of? Can I get your associate link in your host? I desire my web site loaded up as quickly as yours lol|

    Reply
    • Stephen

      Thanks :) We use EvoHost who are amazing. Definitely give them a look. No affiliate link for them unfortunately :)

      Reply
  2. I just want to mention I’m newbie to blogs and seriously liked your web-site. Almost certainly I’m planning to bookmark your site . You surely have good article content. Regards for sharing with us your blog.

    Reply
  3. I simply want to say I am very new to blogging and definitely savored your web page. Likely I’m going to bookmark your site . You surely have impressive articles. Thanks a lot for sharing your website.

    Reply
  4. wonderful post.Never knew this, regards for letting me know.

    Reply

Leave a Reply to movers sydney Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>