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?


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

Download the free guide!

Comments ( 52 )

  1. Kevin

    January 17, 2019

    Thanks I used this code in my website...

  2. Nimesh Patel

    October 18, 2018

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

  3. Rajkumar

    October 14, 2018

    Yes this is what we are looking for.

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

  5. guri saini

    September 22, 2018

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

  6. kalpana

    September 16, 2018

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

  7. Shefali

    September 14, 2018

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

  8. Anonymous

    September 13, 2018

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

  9. Sandy

    September 8, 2018

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

  10. Ayush

    September 7, 2018

    Thanks for sharing this knowledge. Helped a lot.

  11. James Pal

    August 16, 2018

    Thanks Morgan Smith, Loved it.

  12. Thedroidhax

    August 11, 2018

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

  13. ankita

    July 31, 2018

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

  14. talktowendys

    July 25, 2018

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

  15. mycreditscardsguide

    July 7, 2018

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

  16. Tutuapp

    July 1, 2018

    Thanks a ton. Learned a lot from this post.

  17. http://ucminiapp.in/

    July 1, 2018

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

  18. Akash Kumar

    June 29, 2018

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

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

  20. Hacking Press

    June 21, 2018

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

  21. Android Jungles

    June 7, 2018

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

  22. Lucky Patcher

    June 7, 2018

    Nice Guide, I will change my blog layout.

  23. Android Jungles

    June 7, 2018

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

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

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

  26. Ashish Patel

    May 20, 2018

    Amazing Guide. it helped me a lot.

  27. Stuffroots

    May 14, 2018

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

  28. A.S Mughal

    May 6, 2018

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

  29. Whatsapp plus apk

    May 3, 2018

    Love the post!!

  30. Vidmate for iOS

    May 3, 2018

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

  31. John Doji

    April 11, 2018

    Wow, It was simple :p

  32. Source

    April 10, 2018

    Thanks for sharing great post

  33. rfid

    April 2, 2018

    i love this post....thanks for sharing

  34. intech-bb

    April 2, 2018

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

  35. wifikill app download

    March 7, 2018

    Very Interesting and wonderfull information keep sharing

  36. Ameer

    March 5, 2018

    Thanks for providing such a nice guide.

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

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

  39. therichpost

    February 15, 2018

    Thanks for the useful guide. Learned styling blockquotes.

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

  41. uray madhu

    January 26, 2018

    nice article. thanks for the information about blockquotes.

  42. snaptube for ios

    January 19, 2018

    Really wonderful post!!

  43. keepvid apk

    January 19, 2018

    Nice Post!!

  44. lucky patcher original

    January 19, 2018

    Wonderful Post!!

  45. vidmate online

    January 19, 2018

    Thanks for sharing information!!

  46. Rahul Singhal

    December 17, 2017

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

  47. Jitender singh

    December 11, 2017

    Thanks for the useful guide. Learned styling blockquotes.

  48. arjun

    November 29, 2017

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

  49. M Yousuf Soomro

    November 27, 2017

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

  50. umar

    October 12, 2017

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

  51. Simraan

    May 29, 2017

    Thanks a ton!
    It helped me.

  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.

Join the discussion