Quotations, English is Quote, are paragraphs of text with important properties, summaries, … that need to be noticed by readers. Use quotes in between paragraphs to create emphasis for the article and draw the reader’s attention to the quoted content.
By default, the WordPress editor allows you to create a quote for a paragraph. You can do this by highlighting the paragraph you want to quote and clicking the quote button as shown in the image below:
And this is the display of the excerpt when you view the article off the homepage. It also looks outstanding, but perhaps for many people it is quite monotonous. Therefore, I can create a quote according to my wishes by the following way.
Create a citation for the article
I will guide you to create citations for articles with code. Copy and paste the following code into the child theme’s function.php file:
function make_quote($atts, $content = null) {
return '<p style="background-color: #1fc8db; background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%); color: #fff; font-style: italic; font-size: 1.2em; clear: both; margin-bottom: 18px; overflow: hidden; padding: 13px;">' . do_shortcode($content) . '</p>';
}
add_shortcode('quote', 'make_quote');
<div>
<span>1</span><span>2</span><span>3</span><span>4</span>
</div>
Then, when you write the article, you will insert a pair of [quote] … [/quote] tags at the beginning of the quote paragraph as shown below. Such as:
[quote]This is an important quote that needs your attention![/quote]
That’s it, now see the post off the homepage, it will be highlighted with a background color like this. You can also display the quote as you like by modifying the CSS in the above code to change the background color, add a background image, change the font style, and more.
