Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How To Customize Blockquotes Style in WordPress Themes

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Are you looking for a way to customize blockquotes style in WordPress themes?

Quotes often are the most memorable part of your article. They are also the most shared part of any blog post or page. This is why newspapers and mainstream media sites customize their blockquote style to make it stand out.

In this article, we will show you how to easily customize blockquotes style in WordPress themes.

Customize blockquotes style in WordPress themes

Why Use And Customize Blockquotes Style in WordPress?

Using blockquotes in your content can improve the user experience on your WordPress website. You can use them to make a selected section of text stand out from the rest of the content and grab your readers’ attention.

For instance, you can use blockquotes for quotations from authors and influencers, citations from publications, testimonials from your customers, or highlight valuable information to your WordPress blog visitors.

Another benefit of using blockquotes is that they can increase social engagement. Allowing users to share a quote on Twitter or Facebook can help you get more followers and improve your brand’s social media visibility.

By default, WordPress offers a Quote block in the content editor. To add it, simply head over to the WordPress editor and insert the Quote block where you want in the content.

Default quote block in WordPress

However, the default quote block doesn’t offer a lot of options for customization. You can only change the size of the text and choose from the default styles in WordPress.

That said, let’s take a look at how you can customize blockquotes style in WordPress themes. We will show you how to change the style of blockquotes using a WordPress plugin and also using custom CSS:

Method 1: Customize Blockquotes Style Using a Plugin

An easy way to customize the blockquotes on your WordPress website is by using a plugin like Spectra – WordPress Gutenberg Blocks. It’s a free WordPress plugin that adds additional blocks in the WordPress content editor, including customizable blockquotes.

First, you’ll need to install and activate the Spectra – WordPress Gutenberg Blocks plugin. For more details, please see our step-by-step guide on how to install a WordPress plugin.

Upon activation, visit the Spectra » Blocks page from the WordPress admin sidebar.

Here, you will see that the plugin has activated all the additional blocks, including the Blockquote block by default.

From here, you can deactivate all the unnecessary blocks by toggling the switch next to these options.

Activate the Blockquotes block

After that, open a page or post of your liking in the block editor.

Next, click the ‘+’ button in the top left corner of the screen to add the Blockquote block anywhere in your content.

After that, you can enter the text in the Blockquote area.

Add Blockquotes block

Once you’ve done that, you can configure the Blockquote layout from the panel on the right.

From here, you can choose the ‘Border’ option for a simple layout and the ‘Quotation’ option if you want to add quotation marks, select text alignment, and more.

You can also add an author image to further style your Blockquote block.

Change the blockquotes layout

Next, switch to the ‘Style’ tab in the block panel to change the quote icon size, background size, and more.

You can also change the quote color, typography, author color, and spacing of your block from this tab.

Customize blockquotes style

Finally, click the ‘Publish’ or ‘Update’ button at the top to store your settings.

Now, you can visit your WordPress blog to view the Blockquote block in action.

Blockquotes preview

Method 2: Add Custom CSS to Customize Blockquotes Style Using WPCode

If you don’t want to use a WordPress plugin, then adding custom CSS is another way to customize your blockquote.

The easiest way to add custom CSS code to your website is the WPCode plugin, which is the best code snippets plugin on the market.

First, you need to install and activate the WPCode plugin. For detailed instructions, you may want to see our beginner’s guide on how to install a WordPress plugin.

Note: WPCode also has a free version. However, you will need the premium plan of the plugin to unlock the ‘CSS Snippet’ option.

Upon activation, visit the Code Snippets » + Add Snippet page from the WordPress admin sidebar.

Next, click on the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.

Add new snippet

This will take you to the ‘Create Custom Snippet’ page, where you can start by typing a name for your code snippet.

Next, select ‘CSS Snippet’ as the code type from the dropdown menu in the right corner of the screen.

Choose CSS snippet for blockquotes code snippet

After that, you can enter any of the following custom CSS code snippets into the ‘Code Preview’ box to change the look and style of the blockquote.

Keep in mind that these settings will change the appearance of the default ‘Quote’ block in WordPress.

Here are some blockquote styles you can use on your website.

1. Classic CSS Blockquote

Usually, people use CSS background-image to add large quotation marks in blockquotes. In this example, we have used CSS to add large quotation marks.

Classic CSS blockquote
blockquote {
	font-family: Georgia, serif;
	font-size: 18px;
	font-style: italic;
	width: 450px;
	margin: 0.25em 0;
	padding: 0.25em 40px;
	line-height: 1.45;
	position: relative;
	color: #383838;
	background:#ececec;
}

blockquote:before {
	display: block;
	content: "\201C";
	font-size: 80px;
	position: absolute;
	left: -10px;
	top: -10px;
	color: #7a7a7a;
}

blockquote cite {
	color: #999999;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}

blockquote cite:before {
	content: "\2014 \2009";
}

2. Classic Blockquote With Image

In this example, we have used a background image for quotation marks.

Classic CSS blockquote with image
blockquote {
	font: 16px italic Georgia, serif;
	width:450px;
	padding-left: 70px;
	padding-top: 18px;
	padding-bottom: 18px;
	padding-right: 10px;
	background-color: #dadada;
	border-top: 1px solid #ccc;
	border-bottom: 3px solid #ccc;
	margin: 5px;
	background-image: url(http://example.com/wp-content/themes/your-theme/images/gray-georgia.png);
	background-position: middle left;
	background-repeat: no-repeat;
	text-indent: 23px;
} 

blockquote cite {
	color: #a1a1a1;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}

blockquote cite:before {
	content: "\2014 \2009";
}

3. Simple Blockquote

In this example, we have added a background color and a dashed left border instead of blockquotes. Feel free to play with the colors.

Simple blockquote with dashed border
blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
border-left:3px dashed #c1c1c1;
background:#eee;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

4. White, Blue, and Orange Blockquote

Blockquotes can be made to stand out, and they can be just as colorful as you want them to be.

Blue and orange blockquote
blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 450px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #FFF;
border-left:5px solid #FF7F00;
background:#4b8baf;
}

blockquote cite {
color: #efefef;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

5. Using Google Web Fonts for Blockquotes in CSS

In this blockquote CSS example, we have used Droid Serif font from the Google web fonts library.

You can use any custom font that you want. Simply replace the font in the code with the font family you want to use.

Blockquote with Google font
blockquote {
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400italic);
font-family: 'Droid Serif', serif;
font-size:16px;
font-style:italic;
width:450px;
background-color:#fbf6f0;
border-left:3px dashed #d5bc8c;
border-right:3px dashed #d5bc8c;
text-align:center;
}
blockquote cite {
color: #a1a1a1;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

6. Round Corner Blockquote

In this example, we have a blockquote with rounded corners, and we have used drop shadow for borders.

Blockquote with rounded corners
blockquote {
width: 450px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}

7. Using Gradient as Background for Blockquote

In this CSS blockquote example, we have used CSS gradient to enhance the background of a blockquote.

CSS gradients are tricky because of cross-browser compatibility. We recommend using a CSS gradient generator, like CSS Gradient.

Blockquote using gradient colors
blockquote {
width: 450px;
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}

8. Blockquote With Background Pattern

For this example, we have used a background image as a pattern for blockquote.

Blockquote with image
blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}

Note: You’ll need to replace the background image URL in the CSS code with the URL of the image you uploaded to your WordPress website.

9. Using Multiple Images in Blockquote Background

You can use multiple images in the blockquote background using CSS. For example, we have used blockquote:before a pseudo-element to add another background image to the blockquote.

Blockquote with multiple images
blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote:before{
position:absolute;
margin-top:-20px;
margin-left:-20px;
content:url('http://example.com/wp-content/themes/your-theme/images/pin.png');
}
blockquote cite:before {
content: "\2014 \2009";
}

Note: You’ll need to replace the background image URLs in the CSS code with the images you uploaded to your website.

Add Code and Save Your Snippet

Once you’ve chosen a blockquote style and added its CSS code into the ‘Code Preview’ box, scroll down to the ‘Insertion’ section.

From here, select the ‘Auto Insert’ mode so that the code will automatically change the Quote block’s appearance upon activation.

Choose an insertion method

Finally, scroll back to the top of the page to toggle the ‘Inactive’ switch to ‘Active’.

Next, click the ‘Save Snippet’ button to store your settings.

Save the blockquotes snippet

You can now insert a Quote block into a WordPress page or post.

Then, you can visit your WordPress site to view your stylized Quote block.

Blockquotes preview in WPCode

Bonus: Display Random Quotes in the WordPress Sidebar

If you want, you can also display quotes from satisfied customers in your WordPress sidebar. This will motivate users to explore your site, and they may end up making a purchase or signing up for your newsletter.

To show random quotes, you must install and activate the Quotes and Tips plugin. For details, see our beginner’s guide on how to install a WordPress plugin.

Upon activation, visit the Quotes » Add New page where you can type the the quote left by the customer in the text editor. After that, click the ‘Publish’ button.

A quote from an OptinMonster customer

Once you do that, head over to the Quotes » Settings page from the WordPress dashboard and copy the shortcode in the ‘Quotes and Tips’ section.

You can then paste this shortcode in the sidebar or any widget area of your liking.

The WordPress quotes shortcode

Upon doing that, the visitors will now see random quotes in your WordPress sidebar by customers.

For detailed instructions, you can see our tutorial on how to show random quotes in the WordPress sidebar.

A random quote in the WordPress sidebar

We hope that this article helped you learn how to customize blockquotes style in WordPress themes. You can also see our guide on how to choose the best design software and the best free website hosting services.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

49 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

    • WPBeginner Support says

      It would depend on your theme but the blockquotes should be responsive by default.

      Admin

    • WPBeginner Support says

      Unless I hear otherwise, our previous plugin we recommended for that is no longer available and we have not found an alternative.

      Admin

  2. Per Thomsen says

    Fantastic article, thanks for sharing.
    I’ve been trying to use the classic CSS style but i can’t seem to get the ” to come up at the start of the quote. Would you have any suggestions for what it might be?

    Thanks

  3. Catherine says

    Hi,

    I love this. I used example #5, it looks great on desktop but cuts off on mobile. Any suggestions?

  4. steve says

    The problem that I have is:

    I had a list of links (URLs) on a page, that weren’t displayed as links (were not clickable), but after an WP update, a lot of them, gut not all, are suddenly displayed as blockquotes (so they are clickable). As I don’t want to have clickable links on that page – how can I reverse this effect?

  5. Chuka says

    These blockquote styles are not responsive, works perfectly on desktop but they get cut off on mobile, any idea on what to do to make it responsive?

    • Helmut Schütz says

      I used the Round Corner Blockquote, but only lines 1 and 2 to 8, to put it into my Leeway Child theme – and it works on all devices responsively. You merely must omit line 2 with the absolute width!

      But can anyone help me to make it possible to adjust the width of the box according to the width of the text? Sometimes I quote poems with only some words in one line, and if I center them, there is too much place around them on the PC monitor. But I don’t want to insert absolut width-value because normally I want to habe the blockquote full width from left to right.

      Best regards, Helmut

  6. Kelli says

    This is really helpful!

    My only question is how can I get rid of the “” at the beginning of the quote? I plugged in the code for #5 and it looks great, but everytime I type something inside it I am stuck with a quotation mark at the beginning.

  7. Leah says

    A million blessing for a thousand ages to you and yours. (Seriously, this post was THAT helpful!)
    Thanks for making it simple, easy to understand and implement. :-)

  8. Carolina says

    This is great however it is not working for me at all – where am I supposed to put the codes?

  9. Jessica says

    #8 does exactly what I need it to do…except it repeats the image if my quote gets too long. Is there a way to turn off the repeat? I’ve already tried putting ‘background-repeat: no repeat;’ right under the background url, but to no avail.

    Thank you so much! I’ve bookmarked your site and can tell it’s going to be SO helpful :)

  10. Scarlet says

    With #4, if I wanted to add quotation marks to that, how would I go about doing it? And if I wanted the box to have rounded edges instead of square, how would I go about doing that as well?

    • gWorldz says

      Yes, you could use more than 1 style for your blockquotes by adding css classes to your blockquotes using the html editor.

      Example:
      <blockquote class=”my-style-1″>QUOTE</blockquote>
      <blockquote class=”my-style-2″>QUOTE</blockquote>

      Then in the css above (or your own) add .my-style-1 to one and .my-style-2 to another right behind blockquote (no space) in the css.

      Example:

      blockquote.my-style-1 { /*Properties: Values;*/ }
      blockquote.my-style-1:before{ /*Properties: Values;*/ }blockquote.my-style-1 cite:before { /*Properties: Values;*/ }

      blockquote.my-style-2 { /*Properties: Values;*/ }
      blockquote.my-style-2:before{ /*Properties: Values;*/ }blockquote.my-style-2 cite:before { /*Properties: Values;*/ }

  11. Eleanore says

    How exactly do you use these codes to make a block quote? Where do you insert your text inwhich you wish to be in a block? Does this only work for posts or can you use it in a page in an article on a page?

    • Anant Vijay Soni says

      You can add in your Website CSS.

      Mostly theme structure:
      Go to admin > Appearance > Customize > Additional CSS

  12. Chris says

    I tried the first example in the live css editor in Headway 3.6. It showed the text 201C instead of the quotation marks. It was also centered over the entire quote instead of the top left. And there was a light gray left border that I couldn’t get rid of.

  13. Adrian Robertson says

    Time and again when looking for how to implement something, invariably I end up at this site (and must admit to looking for Syed’s picture in the Google results, so I know I am getting to the right place) .

    Your tutorials are fantastic.

  14. Preston Ehrler says

    I don’t have the coding capability to execute these. Is there a plugin that will do the same job?

  15. Leonard Grossman says

    Question: blockquote in WP defaults to italics Is there a way to turn that off?

    Thanks,

    Len

      • Leonard Grossman says

        Look at all the examples in this article. In each the text within the blockquotes appears in italics. That is what I am taking about. How can I use blockquotes without the resulting italics.
        Thanks.

        Len

  16. Khürt Williams says

    “This will add a little HTML in your post that we can use to customize the styling. Note: we are using the text mode in WordPress post editor. Below is an example of the HTML that you should see.”

    Your statement seems to indicate that the b- quote button add the <cite> tag. It does not.

  17. Khürt Williams says

    “This will add a little HTML in your post that we can use to customize the styling. Note: we are using the text mode in WordPress post editor. Below is an example of the HTML that you should see.”

    Your statement seems to indicate that the b- quote button add the tag. It does not.

  18. Ambika Choudhary Mahajan says

    Absolutely brilliant!!
    Thanks a ton for sharing. I’d been wanting to do something like that with the blockquotes on my blog. But didnt know how to go about it!
    Now, I do. :)

  19. Sue Surdam says

    Great collection of block quote effects! With so many plugins around, it is easy to forget what a few lines of css can do to create magic.

    • Zimbrul says

      Absolutely agree with your statement. And doing so you can learn by doing it.
      Thanks WP Beginner for the article, it goes into my Instapaper

  20. Andre Costa says

    Thank you for these tips. I have used blockquotes in the past, and it is wonderful to find out about the different possibilities.

Leave a Reply to Sue Surdam Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.