Development
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 (more on that here!)
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.
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:
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;
}
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.
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.
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. What are some of your favorite ways to style blockquotes?
Free download
Whether you need to convince a client or are concerned about your own site’s current host, this free guide breaks down all the brilliant reasons why managed WordPress hosting is the way to go (and is way better than shared hosting!).
Comments (52 )
Steve Williams
February 28, 2017
Hi Morgan,
Thanks for your useful insights. With your advice, I've finally customized my block quotes. I was able to add code to the Custom CSS box provided by my theme -- I use Thrive Themes.
Off to share your post.
Simraan
May 29, 2017
Thanks a ton!
It helped me.
umar
October 12, 2017
Thanks for sharing. I tried this, it is so helpful.
M Yousuf Soomro
November 27, 2017
Nice designs, easy to understand. btw, Thanks for sharing this useful :-)
arjun
November 29, 2017
Thanks for sharing. I tried this, it is so helpful.
Jitender singh
December 11, 2017
Thanks for the useful guide. Learned styling blockquotes.
Rahul Singhal
December 17, 2017
hey,
thanks a lot for this tutorial. Undoubtedly, this tutorial will be very helpful for me.
vidmate online
January 19, 2018
Thanks for sharing information!!
lucky patcher original
January 19, 2018
Wonderful Post!!
keepvid apk
January 19, 2018
Nice Post!!
snaptube for ios
January 19, 2018
Really wonderful post!!
uray madhu
January 26, 2018
nice article. thanks for the information about blockquotes.
Dumitru Brinzan
February 4, 2018
Some good tips, though I think it is much better to keep the text aligned to the left (or right on RTL websites), instead of always centering the text.
If it's just a short sentence sure, centered text works, but centering longer quotes is a bad idea, as it reduces readability by a lot.
therichpost
February 15, 2018
Thanks for the useful guide. Learned styling blockquotes.
Keerthan
February 20, 2018
Hey Morgan,
Thanks a lot for this informative post, with the help of this post I finally customized blockquotes in my website as I wanted!
Anwer Ashif
February 25, 2018
Morgan, I just don't want to thank you but I appreciate the help you make creating the post. I just change the layout of blockquote on my blog. I will be happy if you took a look at RainaStudio.com
Ameer
March 5, 2018
Thanks for providing such a nice guide.
wifikill app download
March 7, 2018
Very Interesting and wonderfull information keep sharing
intech-bb
April 2, 2018
Your article is just excellent.I really love your article and thanks for sharing this resources.
rfid
April 2, 2018
i love this post....thanks for sharing
Source
April 10, 2018
Thanks for sharing great post
John Doji
April 11, 2018
Wow, It was simple :p
Vidmate for iOS
May 3, 2018
Thanks for sharing this wonderful information. looking forward to see other posts also.
Whatsapp plus apk
May 3, 2018
Love the post!!
A.S Mughal
May 6, 2018
Thank you ma'am. Now I clearly understand how to style blockquotes in wp.
Stuffroots
May 14, 2018
I appreciate the help you make creating the post. I just change the layout of blockquote on my blog.
Ashish Patel
May 20, 2018
Amazing Guide. it helped me a lot.
Patrick Zack
June 3, 2018
hey this is quite interesting post. even i had not changed the blockquote on my blog but i will try it definitely because you made the things so clear. i am gonna try this definitely.
Rosie Vela
June 3, 2018
amazing information, i am gonna apply this for changing the layout of blockquote on my blog.. all your efforts appreciated.
Android Jungles
June 7, 2018
amazing information, i am gonna apply this for changing the layout of blockquote on my blog..
Lucky Patcher
June 7, 2018
Nice Guide, I will change my blog layout.
Android Jungles
June 7, 2018
thanks a lot for this tutorial. Undoubtedly, this tutorial will be very helpful for me.
Hacking Press
June 21, 2018
Thanks for sharing this information. Blockquotes are a great way for improving readability.
ea cricket
June 27, 2018
This is an excellent post I saw thanks for sharing it. It is really what I wanted to see hope in future you will continue for sharing such an excellent post.
Akash Kumar
June 29, 2018
Really nice and informative post. Today I learned to design blockquotes with your help.
http://ucminiapp.in/
July 1, 2018
Really nice and informative post. Today I learned to design blockquotes with your help.
Tutuapp
July 1, 2018
Thanks a ton. Learned a lot from this post.
mycreditscardsguide
July 7, 2018
Your work is just excellent.I really love your work and thanks for sharing this resources.
talktowendys
July 25, 2018
thank for the great information, I learned a lot of blockquotes from this post.
ankita
July 31, 2018
amazing website . great information provided . learned a lot . Thank you
Thedroidhax
August 11, 2018
Your article is just excellent.I really love your article and thanks for sharing this resources.
James Pal
August 16, 2018
Thanks Morgan Smith, Loved it.
Ayush
September 7, 2018
Thanks for sharing this knowledge. Helped a lot.
Sandy
September 8, 2018
I've always wanted to spruce up my blog more with block quotes. You've been very helpful.
Anonymous
September 13, 2018
Your article is just excellent.I really love your article and thanks for sharing this resources.
Shefali
September 14, 2018
Nice article!! Writer has done a very good job!
kalpana
September 16, 2018
I’ve always wanted to spruce up my blog more with block quotes. You’ve been very helpful.
guri saini
September 22, 2018
Awesome article!! The writer has done a very good job!
Joshi Bhavya
September 30, 2018
Hi Smith, Thanks for the article. Actually, I was using some WordPress plugins for blockquote but I wasn't happy with their performance and Output. I tried your suggestion and I must say I can see the Difference. Thanks
Regards,
Joshi Bhavya
Rajkumar
October 14, 2018
Yes this is what we are looking for.
Nimesh Patel
October 18, 2018
Thank you so much for providing this kind of informatin...
Kevin
January 17, 2019
Thanks I used this code in my website...