How to Add Quote in WordPress (With Extra CSS Styles)

Quotes are considered the valuable and memorable part of your article. These parts are also the most shared part of any presentation or post. Adding procedure of Quote has been changed in the new Block editor. 

If you don’t know how to add quote in WordPress, then you are in the right place. In this post, I am going to show you how to Add quote in WordPress and customize them with custom CSS. 

Let’s begin, then. 

Adding Quote in WordPress

Adding a quote is very easy in WordPress. Earlier in the classic editor, you had to use custom coding to add quotes, but now only block editor is enough. 

Step 1: Add the Quote Block

To add quote in WordPress at first, open the page or post where you want to add a quote. Now click the Add block (+) button to add a block and search for ‘Quote’. 

Click on it, and it will be added to your post.

Step 2: Add Content

Now write whatever you need to inside the quote field.  

When you are done writing, you can customize your blockquote a little bit with WordPress editor.

You can also add citations below the quote.

Step 3: Customize

You will find the option in the block settings. From there you will be able to change the text color, background color, typography, and appearance.

If you need more than that, you can use CSS.  

Adding Styling Quote With Custom CSS

You may want to add a different style to your blockquote with custom CSS. To do this you need to know custom CSS. If you don’t know writing custom CSS, then don’t worry. I am here with some custom styling. All you have to do is add styling CSS code to your block.

Earlier, you could have added custom code directly, but now you can do it with the help of a plugin. This plugin’s name is Blocks CSS: CSS Editor for Gutenberg Blocks. After installing this plugin you will be able to add custom CSS by your own.

Step 1: Install the Blocks CSS Plugin

From your WordPress dashboard, navigate to Plugins -> Add New and search for ‘Blocks CSS’.

Install the plugin and don’t forget to activate it.

Step 2: Add Quote

From the above method, add a quote block and add your content.

After then you will be able to add Custom CSS.

Step 3: Styling With Custom CSS

Click on the block and then hit the block settings.

Now you will see a new option called ‘Custom CSS.’ In this field you can write your code or you can paste any of the styling code from below.

Simple Blockquote

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

White Blue and Blockquote

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

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

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

FAQ About the Blockquote

Conclusion

So, now you can add quote in the WordPress site of your, right? Well, it’s all up to you now. Go and add block quotes and style them using custom CSS. If you have any suggestions or questions, feel free to tell us. Don’t forget to leave your thoughts in the comment box below.