Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How To Customize Blockquotes Style in WordPress Themes

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How 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 post or presentation. This is why newspapers and main stream media sites customize their blockquote style to make it stand out. In this article, we will show you how to customize blockquotes style in WordPress along with showing you 9 beautiful examples of customized blockquotes style.

WordPress allows you to add blockquotes within your posts and pages by using the toolbar area in your write section.

Add Blockquote in WordPress

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.

<blockquote>Ea possunt paria non esse. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Urgent tamen et nihil remittunt. An vero displicuit ea, quae tributa est animi virtutibus tanta praestantia? Sint ista Graecorum; Cur igitur, cum de re conveniat, non malumus usitate loqui? Huius ego nunc auctoritatem sequens idem faciam.
<cite>Wise Man</cite></blockquote>

In order to customize the blockquotes style in your WordPress theme, we would need to modify the style.css file of your theme. You can do this by either going to Appearance » Editor in your WordPress admin or edit the files via FTP.

Next, you would need to use one of the styles suggested below and override your blockquote styles. If none exist, then simply add these. You are also more than welcome to combine the two styles and customize to your heart’s desire.

1. Classic CSS Blockquote

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

Classic CSS only blockquote example

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 Blockquote with Image for Quotation Marks

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 background color and dashed left border instead of blockquotes. Feel free to play with the colors.

Simple CSS blockquote example

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 standout and they can be just as colorful as you want them to be.

Blue background and white font blockquote example


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 Google web fonts library.

Importing Google Web font in CSS for Blockquote

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 blockquote with rounded corners and we have used drop shadow for borders.

Round corners blockquote


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 CSS3 gradient to enhance background of blockquote. CSS gradients are tricky, because of cross-browser compatibility. We recommend using colorlabs, CSS gradient generator.

Adding CSS Gradient as background for Blockquote

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

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

CSS blockquote with background image pattern


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";
}

9. Using Multiple Images in Blockquote Background

You can use multiple images in blockquote background using css. In this example we have used blockquote:before pseudo element to add another background image to blockquote.

Adding multiple background images in blockquote using CSS


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";
}

We hope that you found this article helpful in learning how to customize blockquotes style in WordPress. If you have any questions or suggestions, then please feel free to leave a comment below.


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Catherine says:

    Hi,

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

  2. 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?

  3. Barb Keck says:

    How do you add a closing quote?

  4. Giampaolo says:

    Thank’s very helpful.

  5. Sameer Panda says:

    Very helpful. I used the left border one. Thanks for sharing.

  6. 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?

    • Sameer Panda says:

      Hey CHUKA, it’s working perfect on mobile too.

    • 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

  7. 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.

  8. 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. :-)

  9. Carolina says:

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

  10. 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 :)

  11. 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?

  12. Akash KB says:

    Is it possible to use 2 types of blockquotes on a single blog?

    • 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;*/ }

  13. 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?

  14. 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.

  15. 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.

  16. Abdul Samad says:

    Thanks Man For This Article

  17. Preston Ehrler says:

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

  18. Leonard Grossman says:

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

    Thanks,

    Len

    • Editorial Staff says:

      It doesn’t default to italics. It is probably a styling thing in your theme.

      • 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

  19. Kanan says:

    It is not working in thesis 2.0? any suggestion?

  20. 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.

  21. 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.

  22. 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. :)

  23. Jack says:

    Thanks so much for this.

  24. Akhil Gupta says:

    Thanks for this beautiful Article, now i have many ideas to customize blockquotes.

  25. 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

  26. Reid Peterson says:

    Many thanks for these tips! I mixed tips 4 and 6 and had a really nice result!

  27. 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.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.