WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
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

WPBeginner» Blog» Themes» How To Customize Blockquotes Style in WordPress Themes

How To Customize Blockquotes Style in WordPress Themes

Last updated on June 18th, 2013 by Editorial Staff
88 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
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.

88 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

48 Comments

Leave a Reply
  1. Syams Qomar says:
    Jan 27, 2021 at 6:35 pm

    How to make it responsive?

    Reply
    • WPBeginner Support says:
      Jan 28, 2021 at 9:50 am

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

      Reply
  2. JULIE says:
    May 14, 2020 at 12:03 am

    Hi

    This is great, but how do you make it mobile responsive?

    thanks
    Julie

    Reply
    • WPBeginner Support says:
      May 14, 2020 at 9:14 am

      The quotes should be relatively responsive without any changes

      Reply
  3. Sachin Nayi says:
    May 30, 2019 at 2:39 pm

    is there any way to add social media share button at each blockquote?

    Reply
    • WPBeginner Support says:
      May 31, 2019 at 10:13 am

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

      Reply
  4. Rubnawaz Quraishi says:
    Oct 4, 2017 at 6:41 am

    Can we use blockquotes with author image?

    Reply
  5. Vishwas says:
    Jun 18, 2017 at 2:54 pm

    Thanks a ton, man! You’re a saviour.

    Reply
  6. Aakash Waghmare says:
    May 30, 2017 at 5:50 am

    Very thank’s Sir. You are always give me a right information. Thanks a lot Sir.

    Reply
  7. Per Thomsen says:
    May 24, 2017 at 7:26 pm

    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

    Reply
  8. David Riewe says:
    Feb 19, 2017 at 7:46 pm

    Makes sense but does not work with the tesseract theme.

    Reply
  9. Catherine says:
    Sep 18, 2016 at 11:30 pm

    Hi,

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

    Reply
  10. steve says:
    Sep 13, 2016 at 2:00 pm

    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?

    Reply
    • WPBeginner Support says:
      Sep 14, 2016 at 7:25 pm

      Since WordPress 4.4, WordPress started automatically embedding URLs from other WordPress sites. Here is how to turn off post oEmbed feature on your site.

      Reply
  11. Barb Keck says:
    Apr 22, 2016 at 8:55 am

    How do you add a closing quote?

    Reply
  12. Giampaolo says:
    Mar 25, 2016 at 7:06 am

    Thank’s very helpful.

    Reply
  13. Sameer Panda says:
    Jan 21, 2016 at 10:53 am

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

    Reply
  14. Chuka says:
    Dec 8, 2015 at 10:27 am

    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?

    Reply
    • Sameer Panda says:
      Jan 21, 2016 at 10:57 am

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

      Reply
    • Helmut Schütz says:
      Aug 19, 2016 at 9:23 am

      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

      Reply
  15. Kelli says:
    Nov 23, 2015 at 4:54 am

    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.

    Reply
  16. Leah says:
    Jul 17, 2015 at 5:26 pm

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

    Reply
  17. Carolina says:
    May 1, 2015 at 10:46 am

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

    Reply
    • Prabin Parajuli says:
      Sep 19, 2015 at 11:47 pm

      Inside your child theme’s style.css

      Reply
  18. Jessica says:
    Jan 2, 2015 at 12:50 am

    #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 :)

    Reply
  19. Scarlet says:
    Jul 6, 2014 at 5:12 pm

    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?

    Reply
  20. Akash KB says:
    May 14, 2014 at 3:47 am

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

    Reply
    • gWorldz says:
      Jun 23, 2014 at 3:23 am

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

      Reply
  21. Eleanore says:
    Mar 6, 2014 at 4:08 pm

    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?

    Reply
    • Anant Vijay Soni says:
      Jan 16, 2019 at 7:43 pm

      You can add in your Website CSS.

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

      Reply
  22. Chris says:
    Dec 31, 2013 at 8:20 pm

    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.

    Reply
  23. Adrian Robertson says:
    Dec 6, 2013 at 6:10 am

    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.

    Reply
  24. Abdul Samad says:
    Sep 15, 2013 at 5:17 pm

    Thanks Man For This Article

    Reply
  25. Preston Ehrler says:
    Aug 19, 2013 at 6:26 pm

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

    Reply
  26. Leonard Grossman says:
    Jul 17, 2013 at 12:18 am

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

    Thanks,

    Len

    Reply
    • Editorial Staff says:
      Jul 25, 2013 at 3:40 pm

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

      Reply
      • Leonard Grossman says:
        Jul 25, 2013 at 4:12 pm

        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

        Reply
  27. Kanan says:
    Jun 23, 2013 at 4:47 pm

    It is not working in thesis 2.0? any suggestion?

    Reply
    • Editorial Staff says:
      Jun 27, 2013 at 10:12 am

      See what thesis is using for their blockquote styles.

      Reply
  28. Khürt Williams says:
    Jun 21, 2013 at 7:20 pm

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

    Reply
  29. Khürt Williams says:
    Jun 21, 2013 at 7:19 pm

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

    Reply
  30. Ambika Choudhary Mahajan says:
    Jun 20, 2013 at 2:16 am

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

    Reply
  31. Jack says:
    Jun 19, 2013 at 1:28 am

    Thanks so much for this.

    Reply
  32. Akhil Gupta says:
    Jun 19, 2013 at 12:20 am

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

    Reply
  33. Sue Surdam says:
    Jun 19, 2013 at 12:15 am

    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.

    Reply
    • Zimbrul says:
      Jun 21, 2013 at 9:49 am

      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

      Reply
  34. Reid Peterson says:
    Jun 18, 2013 at 4:34 pm

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

    Reply
  35. Andre Costa says:
    Jun 18, 2013 at 8:35 am

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

    Reply

Leave a Reply 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.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
Smash Balloon
Smash Balloon
Add Custom Social Media Feeds in WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
SendinBlue Coupon Code
Sendinblue Coupon
Get Sendinblue, a powerful marketing automation toolkit for small businesses, for FREE.
Beaver Builder Coupon Code
Beaver Builder Coupon
Get the best possible price on this easy drag-and-drop page builder plugin. From just $99 in 2020.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.