How to Style Blockquotes In WordPress – It’s So Simple, But So Awesome.

How to Style Blockquotes In WordPress – It’s So Simple, But So Awesome.

How to Style Blockquotes In WordPress?< In this easy to follow step-by-step tutorial I am going to show you how to...

  1. style block quotes in WordPress
  2. style multiple block quotes in WordPress (2 different methods)

Here we go…

What is Block Quote in WordPress?

Block quotes (or blockquotes) are used in WordPress to make a certain piece of text stand out from the body text. The default style of your blockquotes depends on the WordPress theme that you use.

However, often people are not satisfied with the default style and want to change it. The question is – how to do it.

Well, below I am going to give you quite a few different options for doing that. I hope these example will help you find the information that you are looking for.

 

1. How to Style Block Quotes in WordPress

First, I am going to show you how you can easily style a blockquote in WordPress. As you already know, there is a special HTML tag for a blockquote <blockquote> and also a blockquote button in the WP page/post editor:

Blockquotes feature in WP page/post editor

When you hit the blockquote button, the paragraph below the cursor will be given a different style from the body text (font size, color, and style, background color, intent, etc.) That’s what blockquotes are meant to do – to separate a block of text from the main body text.

The current blockquote style depends on your WP theme. What if you don’t like it? What if you want to modify or add some of its elements?

Here’s how to do it.

Step 1: Find Your Blockquote CSS Code

Your blockquote is defined in your WP theme’s Stylesheet (style.css). To open it, please login to your website dashboards, then navigate to Appearance → Editor.

Now the style.css file is opened. Scroll down through the code until you find the piece of code that describes blockquote. In my case it looks like this (I use the WPZoom Diamond theme):

css blockquote examples

Step 2: 

Select the whole block of code (including the closing curly bracket “}” ), then copy it into a clipboard (Ctrl-C). Next,  open  custom.css and paste it there (Ctrl-V).

Note! To find the custom.css please navigate to Appearance → Editor, then scroll to the very bottom in the right-handed menu. It will be there, under the Styles.

Note!! Make all your changes in Custom.css (not in Style.css)!

Step 3: Style Your BlockQuote

Here are the commands to change the text inside of the block:

  1. font-family: sans-serif / serif;
  2. font-size: 16px;
  3. color: #8E8E8E; (the code next to # symbol is a color hex code. Click here to see how to find color hex codes)
  4. text-align: center / left / right / aligned;

And these are the commands to change the shape and style of the block:

  1. max-width: 700px;
  2. width: 500px;
  3. border: 1px solid #exexex;     /* the border is 1px wide, solid line and dark-grey */
  4. padding: 0 15px;          /* white space between border and content of the blockquote) */
  5. margin: 10px                /* white space between border and content outside of the blockquote */
  6. background-color: #A5FF7F;
  7. border-left: 2px dashed #exexex 
  8. border-right: 2px solid #exexex
  9. border-top:
  10. border-bottom: 4px solid #
  11. padding: 0 15px (white space between border and content of the blockquote)
  12. margin: 10px (white space between border and content outside of the blockquote)

You can play with these features as you like.

To make your life a bit easier, let me give you some examples:

Example #1: A simple blockquote with no border

Here’s the code:

blockquote css code

And here’s how it looks in a text:

Simple blockquote with no border


Example #2: A block quote with dashed border

The code:

blockquote-code

And the result:

How to Style Block quotes In WordPress


Example #3: A blockquote with a left border

Here’s another one. First the code…

how to style blockquote in wordpress

… and then the blockquote in a text:

style block quotes in wordpress


Example #4: A blockquote with top and bottom borders

CSS code of a blockquote style

This piece of code styles a blockquote as follows:

block quote style examples - blue and yellow background/border


Example #5: A blockquote with rounded border

A blockquote with rounded borders:

Blockquote with rounded corners CSS

Here’s how it looks:

blockquote example with rounded corners


Example #6: A blockquote with rounded left border

Example of a block quote style, CSS

An example of a blockquote style - rounded left border


 

2. How to Style Multiple BlockQuotes in WordPress

As you have already noticed, the technique that I described above has some serious flaws. Yes, it allows you quickly and easily style block quotes in WordPress.

But (and here are the problems):

  1. You can use just ONE blockquote style at a time.
  2. Every time you want to give a different style to your blockquotes, you need to change the custom.css
  3. If you change the style of your blockquote, every single blockquote in your website will be changed.

If that’s what you want, fine. But what if…

  1. …What if you want to use multiple blockquote styles?
  2. …What if you want to change the style of only some of the blockquotes?

If that’s what you want to do,here’s how to do it:

Step 1: Head over to custom.css and define blockquote classes. For example, to help you understand, I created two classes – “red” and “blue” (you are free to choose the names for these classes).

I did it like this:

two blockquote classes

These two additional classes allow me to use 3 different blockquote styles in my website:

  1. The standard blockquote feature in WordPress (see Example 1 above)
  2. Blockquote class red
  3. Blockquote class blue

Step 2: How to Apply Multiple Blockquote Classes

To turn a paragraph into a standard blockquote is easy – just hit the blockquote button in the WordPress editor toolbar (see above).

However, if you want to apply the other two blockquote styles, here’s how you can do it:

  1. Turn your desired piece of text into (standard) blockquote (by hitting the blockquote button)
  2. Switch your WordPress editor to text mode
  3. Find that piece of text you want to turn into a different blockquote.
  4. Modify the opening blockquote tag as follows: <blockquote class=”red”> or <blockquote class=”blue”>.

Example #7: Multiple blockquotes in a text

Here’s how I have used these 2 different blockquote styles in the same text:

Multiple blockquotes in a text. CSS

And here’s how these blockquotes look in real life:

multiple blockquotes in a text - real life

See! That way you can create and use as many blockquote styles as you like.

3. Another Way to Use Multiple Blockquote Styles in WordPress

If the technique for multiple blockquote styles described above should fail, you may want to try <div> tag instead of <blockquote>:

Use div tag while styling blockquotes in WordPress

This time, however, you are required to describe padding and margin in the class (if they are defined only in <blockquote>, as in the examples above, it won’t work.

Here’s how to do it:

Example #8:

First, here’s how I defined the blockquote class “bq-white” in the custom.css file:

Here's how the blockquote class is defined

Second, here’s how the blockquote looks in the WordPress editor text mode (Notice, the div tag is used instead of blockquote tag):

div tag is used instead of blockquote tag

Third, here’s how this blockquote looks in real life:

Want to make REAL money online? Here’s what I use to make money anywhere in the world.
click here to learn more

Don’t wait another minute to put THIS to work for you.

 

What About You?

Now that I have given you eight different examples on how to style blockquote in WordPress, what are your thoughts on it?

Do you use any other techniques to style blockquotesin WordPress? Please drop me a comment below.

 

Leave a Reply

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