block quote style with light blue quote box and oversized dark blue quotation marks

Simple Ways to Style Blockquotes in WordPress

Blockquotes are excellent at making a piece of information stand out. That’s why they’re typically reserved for longer quotes in your post; they put emphasis on the words while also providing a visual break from all the text. By default, WordPress, your theme, or maybe even a plugin will apply very basic CSS properties to blockquotes. For many people, that works just fine. But blockquotes are also a fun opportunity to apply some brand-specific elements to a site (think colors, shapes, textures, etc.).

To change the default CSS associated with blockquotes, you can do one of two things. The first, if you’re lucky, is to simply add code to the Custom CSS box provided by your theme. If you’re not as fortunate, however, you’ll need to edit your theme’s stylesheet, which means you really should create a child theme first.

Once you’re ready, here are some simple ways to style your blockquotes in WordPress to make them stand out.

1. Changing the Text

One of the easiest ways to make one block of text stand out from another is simply to change the appearance of the text. This could be the size, color, or even the font itself. Here’s an example that combines all of these changes.

style-blockquotes-wordpress-text
blockquote {
max-width: 600px;
margin: 20px;
padding: 20px;
text-align: center;
font-family: serif;
font-size: 22px;
color: #38b6cd;
}

2. Adding Shapes

One of my favorite ways to style a blockquote is to add very simple and elegant shapes to “block” the quote (pun intended). Here are a couple different examples of this:

style-bloclquotes-wordpress-lines
blockquote {
max-width: 600px;
margin: 20px;
padding: 20px;
text-align: center;
font-family: sans-serif;
font-size: 16px;
color: #7f7f7f;
border-top: 2px solid #38b6cd;
border-bottom: 2px solid #38b6cd;
}
style-blockquotes-wordpress-side-shape
blockquote {
 max-width: 600px;
 margin: 20px;
 padding: 10px;
 text-align: center;
 font-family: sans-serif;
 font-size: 16px;
 color: #7f7f7f;
 border-left: 6px solid #38b6cd;
 border-top-left-radius: 20px;
 border-bottom-left-radius: 20px;
}

3. Creating a Background

If you want an approach that’s a little more bold, add a background color to your blockquotes.

style-blockquotes-wordpress-background
blockquote {
max-width: 600px;
margin: 20px;
padding: 20px;
text-align: center;
font-family: sans-serif;
font-size: 16px;
color: #ffffff;
background-color: #38b6cd;
border-radius: 20px;
}

Of course, if you still want a background color but don’t want it to look too bold, just choose a more subtle color.

style-blockquotes-wordpress-light-background
blockquote {
max-width: 600px;
margin: 20px;
padding: 20px;
text-align: center;
font-family: sans-serif;
font-size: 16px;
color: #5e5d5d;
background-color: #f1fbff;
border-radius: 20px;
}

This is just the tip of the iceberg when it comes to styling your blockquotes. To make sure all your designs load and perform exactly as expected, make sure you’re working with a high-quality WordPress hosting provider!

Get started

Build faster, protect your brand, and grow your business with a WordPress platform built to power remarkable online experiences.