And if you’re actually quoting someone, you can easily add a citation. You can quickly change colors and font sizes. It adds a shortcode builder that helps you add left-aligned, right-aligned, or full-width quotes to your content. If using CSS isn’t quite your style, you can still add some flair to your blockquotes using a plugin like Perfect Pullquotes.
How to Style WordPress Blockquotes With a Plugin
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: If you know that you’re going to be using blockquotes for actual quotations only, you can use CSS to add a quotation mark. 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: Up until now, I’ve shown you mostly vertical borders, but you can also style your blockquotes with some nifty horizontal borders. 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.įor this one, you’ll use partial borders on all four corners to form a sort of “bracket” around your blockquote:Īdd Horizontal Borders Around Your Blockquote: You can also round the corners of the background by adding a border radius:Īnd 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: All you need to do is add one more line to your existing CSS: Let’s take it one step further and say you want to add a background to the style above. I’ll also keep the center-alignment from the previous example:įont-family: Arial,Helvetica Neue,Helvetica,sans-serif But how about mixing it up a little more? Let’s try changing the font, making it blue, and increasing the size. To do that, all you need to do is add this short CSS snippet: Ok, let’s get into how to style blockquotes in WordPress… Center Align Your BlockquoteĬonsidering most of the text in your post will be left-aligned, one way to make blockquotes stand out is to center align them.
Similarly, you can change the thickness of the borders in my examples by increasing or decreasing the numbers. 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. Now, I’ll run through a few ways in which you can use CSS to style your blockquotes. To give you an idea of where I’m starting from, here’s how blockquotes look in the default Twenty Seventeen theme: In order to get to the WordPress Customizer CSS box, Go to Appearance > Edit CSS. But you can use whatever you feel most comfortable with. I’ll do it using the WordPress Customizer CSS box so that you can see my code side-by-side with the front-end results. You can add this CSS in a child theme ( learn how to create a child theme), in the WordPress Customizer CSS box, or in your theme’s custom CSS settings (if your theme offers such a box).
To style blockquotes manually, you’ll need to add some custom CSS to your theme. How to Style Blockquotes in WordPress With CSS 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. While most themes should apply some sort of style to blockquotes, it won’t always fit the aesthetic of your theme. You can even quote yourself, and use it as a pull quote!īut as helpful as they can be, sometimes the default blockquote style for your theme is flat out ugly. You can use them to quote other people or to simply offset a portion of text from the main body of your post. They’re actually a great way to break up a wall of text in your post. Thankfully, WordPress blockquotes are a little less stressful. Omit the quotation marks, indent this, double space that… If you’re like me, you might even have flashback nightmares about properly MLA-formatting long form blockquotes. You probably remember the concept of blockquotes from school.