How to Style Blockquotes in WordPress Using CSS

How to Style Blockquotes in WordPress Using CSS

You probably remember the concept of blockquotes from school. If you're like me, you might even have flashback nightmares about properly MLA-formatting long form blockquotes. Omit the quotation marks, indent this, double space that…

Thankfully, WordPress blockquotes are just a little bit less stressful. They're actually a great way to break up a wall of text in your post. You can use them to quote other people or to simply offset a portion of text from the main body of your post.

You can even quote yourself to create a sort of pull quote!

But as helpful as they can be, sometimes the default blockquote style for your theme is just flat out ugly. While most themes should apply some sort of style to blockquotes, it won't always fit the aesthetic that you're aiming for.

So if you find yourself needing to customize how the blockquotes on your site look, keep reading to learn how to style blockquotes in WordPress.

How to Style Blockquotes in WordPress With CSS

To style blockquotes manually, you'll need to add some custom CSS to your theme. You can add this CSS in a child theme (learn how to create a child theme), in the new WordPress Customizer CSS box, or in your theme's custom CSS settings (if your theme offers such a box).

I'll do it using the new WordPress Customizer CSS box so that you can see my code side-by-side with the front-end results. But you can use whatever you feel most comfortable with.

To give you an idea of where I'm starting from, here's how blockquotes look in the default Twenty Seventeen theme:

Now, I'll run through a few ways in which you can use CSS to style your blockquotes. For all of these examples, you can easily change the colors I use by grabbing the hex code of your desired color and swapping it in for the color I use in the example.

Similarly, you can change the thickness of the borders in my examples by increasing or decreasing the numbers.

Ok, let's get into how to style blockquotes in WordPress…

Center Align Your Blockquote

Considering most of the text in your post will be left-aligned, one way to make blockquotes stand out is to center align them.

To do that, all you need to do is add this short CSS snippet:

blockquote { max-width: 550px; text-align: center; margin: 20px; padding: 20px; }

Change Font, Font Color, and Font Size

Ok, so far so good. But how about mixing it up a little more? Let's try changing the font, making it blue, and increasing the size. I'll also keep the center-alignment from the previous example:

blockquote { max-width: 550px; text-align: center; margin: 20px; padding: 20px; font-family: Arial,Helvetica Neue,Helvetica,sans-serif; font-size: 20px; color: #428bca; }

Add a Background

Let's take it one step further and say you want to add a background to the style above. All you need to do is add one more line to your existing CSS:

blockquote { max-width: 550px; text-align: center; margin: 20px; padding: 20px; font-family: Arial,Helvetica Neue,Helvetica,sans-serif; font-size: 20px; color: #428bca; background: #ccc; }

You can also round the corners of the background by adding a border radius:

blockquote { max-width: 550px; text-align: center; margin: 20px; padding: 20px; font-family: Arial,Helvetica Neue,Helvetica,sans-serif; font-size: 20px; color: #428bca; background: #ccc; border-radius: 30px; }

And if you want to add an accent border to your background, you can do something like this to add a border running vertically along the left side:

blockquote { max-width: 550px; text-align: center; margin: 20px; padding: 20px; font-family: Arial,Helvetica Neue,Helvetica,sans-serif; font-size: 20px; color: #428bca; background: #ccc; border-left:5px solid #428bca; }

Add Lines to Offset Blockquotes

If you don't want your blockquotes to have a separate background color, another method that you can use to offset them is lines or partial borders.

Here are a few options:

Add Brackets Around Your Blockquote:

For this one, you'll use partial borders on all four corners to form a sort of "bracket" around your blockquote:

blockquote { max-width: 600px; text-align: center; margin: 20px; padding: 20px; font-family: Arial,Helvetica Neue,Helvetica,sans-serif; font-size: 20px; color: #428bca; border-left: 4px solid #428bca; border-top-left-radius: 30px; border-bottom-left-radius: 30px; border-right: 4px solid #428bca; border-top-right-radius: 30px; border-bottom-right-radius: 30px; }

Add Horizontal Borders Around Your Blockquote:

Up until now, I've shown you mostly vertical borders, but you can also style your blockquotes with some nifty horizontal borders. For example, something like this:blockquote { max-width: 550px; text-align: center; margin: 20px; padding: 20px; font-family: Arial,Helvetica Neue,Helvetica,sans-serif; font-size: 20px; color: #428bca; border-top: 4px dotted #428bca; border-bottom: 4px dotted #428bca; }

If you're not a fan of the dotted border, all you need to do is changed "dotted" to "solid" to get something more like this:

While we have you... Learn More

Did you know Pagely has a number of managed solutions to help big brands scale WordPress?

Add a Quotation Mark

If you're going to exclusively use blockquotes for actual quotations, you can use CSS to add a quotation mark. You might need to play around with the top and left position by changing the numbers, but adding this code to any of the above examples will add a quotation mark in the top left:

blockquote::before { content: "\201C"; display: block; font-size: 80px; left: -230px; top: -50px; position: relative; height: 0; }

Bonus – Style Your Blockquotes Like Pagely

Wondering how Pagely styles blockquotes? Wonder no more! Here's how:

blockquote { font-family: Georgia,"Times New Roman",Times,serif; font-style: italic; font-size: 1.2em; margin: 0; color: #076191; padding: .5rem 1rem; border-left: .25rem solid #076191; display: block; }

How to Style WordPress Blockquotes With a Plugin

If using CSS isn't quite your style, you can still add some flair to your blockquotes using a plugin like Perfect Pullquotes.

It adds a shortcode builder that helps you add left-aligned, right-aligned, or full-width quotes to your content. You can quickly change colors and font sizes. And if you're actually quoting someone, you can easily add a citation.

To change colors and sizes, you just need to add the following attributes to the shortcode:

color="hex_code"

size="number"

There you have it! Two ways to style how blockquotes appear in WordPress. If you're looking for another cool way to highlight text in your posts, you can also add eye-catching "Click to Tweet" quotes. And yet another helpful way to break up text is adding tooltips to your posts.

Source: How to Style Blockquotes in WordPress Using CSS