style-blockqoutes-wordpress-large

Simple ways to style blockquotes in WordPress

Morgan Smith's Layout avatar

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.

style-blockquotes-wordpress-text

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:

style-bloclquotes-wordpress-lines

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

style-blockquotes-wordpress-side-shape

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.

style-blockquotes-wordpress-background

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.

style-blockquotes-wordpress-light-background

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?

Comments ( 52 )

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

  2. Simraan

    May 29, 2017

    Thanks a ton!
    It helped me.

  3. umar

    October 12, 2017

    Thanks for sharing. I tried this, it is so helpful.

  4. M Yousuf Soomro

    November 27, 2017

    Nice designs, easy to understand. btw, Thanks for sharing this useful :-)

  5. arjun

    November 29, 2017

    Thanks for sharing. I tried this, it is so helpful.

  6. Jitender singh

    December 11, 2017

    Thanks for the useful guide. Learned styling blockquotes.

  7. Rahul Singhal

    December 17, 2017

    hey,
    thanks a lot for this tutorial. Undoubtedly, this tutorial will be very helpful for me.

  8. vidmate online

    January 19, 2018

    Thanks for sharing information!!

  9. lucky patcher original

    January 19, 2018

    Wonderful Post!!

  10. keepvid apk

    January 19, 2018

    Nice Post!!

  11. snaptube for ios

    January 19, 2018

    Really wonderful post!!

  12. uray madhu

    January 26, 2018

    nice article. thanks for the information about blockquotes.

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

  14. therichpost

    February 15, 2018

    Thanks for the useful guide. Learned styling blockquotes.

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

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

  17. Ameer

    March 5, 2018

    Thanks for providing such a nice guide.

  18. wifikill app download

    March 7, 2018

    Very Interesting and wonderfull information keep sharing

  19. intech-bb

    April 2, 2018

    Your article is just excellent.I really love your article and thanks for sharing this resources.

  20. rfid

    April 2, 2018

    i love this post....thanks for sharing

  21. Source

    April 10, 2018

    Thanks for sharing great post

  22. John Doji

    April 11, 2018

    Wow, It was simple :p

  23. Vidmate for iOS

    May 3, 2018

    Thanks for sharing this wonderful information. looking forward to see other posts also.

  24. Whatsapp plus apk

    May 3, 2018

    Love the post!!

  25. A.S Mughal

    May 6, 2018

    Thank you ma'am. Now I clearly understand how to style blockquotes in wp.

  26. Stuffroots

    May 14, 2018

    I appreciate the help you make creating the post. I just change the layout of blockquote on my blog.

  27. Ashish Patel

    May 20, 2018

    Amazing Guide. it helped me a lot.

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

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

  30. Android Jungles

    June 7, 2018

    amazing information, i am gonna apply this for changing the layout of blockquote on my blog..

  31. Lucky Patcher

    June 7, 2018

    Nice Guide, I will change my blog layout.

  32. Android Jungles

    June 7, 2018

    thanks a lot for this tutorial. Undoubtedly, this tutorial will be very helpful for me.

  33. Hacking Press

    June 21, 2018

    Thanks for sharing this information. Blockquotes are a great way for improving readability.

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

  35. Akash Kumar

    June 29, 2018

    Really nice and informative post. Today I learned to design blockquotes with your help.

  36. http://ucminiapp.in/

    July 1, 2018

    Really nice and informative post. Today I learned to design blockquotes with your help.

  37. Tutuapp

    July 1, 2018

    Thanks a ton. Learned a lot from this post.

  38. mycreditscardsguide

    July 7, 2018

    Your work is just excellent.I really love your work and thanks for sharing this resources.

  39. talktowendys

    July 25, 2018

    thank for the great information, I learned a lot of blockquotes from this post.

  40. ankita

    July 31, 2018

    amazing website . great information provided . learned a lot . Thank you

  41. Thedroidhax

    August 11, 2018

    Your article is just excellent.I really love your article and thanks for sharing this resources.

  42. James Pal

    August 16, 2018

    Thanks Morgan Smith, Loved it.

  43. Ayush

    September 7, 2018

    Thanks for sharing this knowledge. Helped a lot.

  44. Sandy

    September 8, 2018

    I've always wanted to spruce up my blog more with block quotes. You've been very helpful.

  45. Anonymous

    September 13, 2018

    Your article is just excellent.I really love your article and thanks for sharing this resources.

  46. Shefali

    September 14, 2018

    Nice article!! Writer has done a very good job!

  47. kalpana

    September 16, 2018

    I’ve always wanted to spruce up my blog more with block quotes. You’ve been very helpful.

  48. guri saini

    September 22, 2018

    Awesome article!! The writer has done a very good job!

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

  50. Rajkumar

    October 14, 2018

    Yes this is what we are looking for.

  51. Nimesh Patel

    October 18, 2018

    Thank you so much for providing this kind of informatin...

  52. Kevin

    January 17, 2019

    Thanks I used this code in my website...

Join the discussion