Insert a Blockquote with cite in a WordPress article

To use the following solution to insert a quote and its caption in a WordPress article, you need to be writing your article in the Classic Visual Editor! If you do not know how to get this Editor refer to the explanation I gave in the previous article whose subject was “How to insert code examples in a WordPress article?“.

Insert a standard blockquote in a WordPress article

You are writing your article and want to insert a quote — I mean, a sentence without any information about the author or the support — via the standard blockquote HTML element provided by the Classic Visual Editor tools.

Insert the Quote (blockquote)

1. Type your quoted sentence in the Classic Visual Editor.
2. Select it.
3. Click on the Blockquote icon tool (the one with the quotes). A vertical bar appears at the beginning of the line, just before your sentence.
4. Save.
5. Have a look at the preview to discover the final aspect of your inserted quote.
6. Go back to the Editor to continue to type or article or improve the aspect of your inserted quote.

Suggestion: If you are a little bit curious and have some development skills,

• have a look to the Code Editor: you will discover that your sentence has been put between blockquote HTML tags, <blockquote>Quote text</blockquote>
• have a look to the inspector in the preview: you will discover that your sentence has been generated in a paragraph inside the blockquote HTML tags, <blockquote><p>Quote text</p></blockquote>;

Improve the aspect of the inserted quote

If the way the quote is displayed does not satisfy you, there are two main solutions to improve its aspect:

• apply slight improvements by selecting the text and using the Classic Visual Editor tools icons like B (bold), I (italic), A (color)… as explained in the previous article;
• apply important improvements by adding CSS properties:
  • via the custom theme CSS file if you are developing this custom theme,
  • via the additional CSS in the Customizer of the current installed theme (refer to the previous article).

Tricks:

• If you want to add CSS properties like background-color, padding, margin or font-family… use the inspector first to decide which selector to use or which class to add. Do you remember how to add a class?
• The path to the textarea in which adding the CSS rules is:  Dashboard > Appearance > Customize > Additional CSS.

You could obtain this kind of result for example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Insert a blockquote with its caption and cite in a WordPress article

To insert a blockquote with its caption and cite… we need to insert 4 HTML elements instead of one: a blockquote, a caption, a cite and a figure.

As WordPress insert automatically only the blockquote we will need to add manually the other ones: your hands are the solution!

However will start with the same steps as for the standard blockquote. That is not a joke, I promise!

Insert the sentence in a blockquote element

As this element is automatically generated, why do not use it?

Refer to the above section if you do not remember how to insert it!

Use the Code Editor to insert the caption and the cite

1. In the Classic Visual Editor, Save your article.
2. Switch to the Code Editor (3 dots menu > Code Editor).
3. Look for the <blockquote>Your quote text here</blockquote>.
4. Above the <blockquote>Your quote text here</blockquote>, add a <figure> HTML tag.
5. Below the <blockquote>Your quote text here</blockquote> add the <figcaption></figcaption> HTML tags.
6. Insert the text of the source and the author’s quote between these tags.
7. Enclose the source between the <cite></cite> tags.
8. You can add a <br/> HTML tag just before the author’s name if you want to.
9. Add the </figure> HTML tag just after the </figcaption> tag.
10. Save.
11. Exit the Code Editor or switch to the Classic Visual Editor (3 dots menu > Visual Editor)

The blockquote, its caption and cite in the WordPress Code Editor

Remark: if you want to know how to obtain the inserted inline code examples as the ones above, refer to my previous article How to add code examples in a WordPress article.

Improve the aspect of the inserted quote and its caption and/or cite

As for the standard blockquote element, it is possible to improve the final aspect of the caption and the cite. The solutions are the same as indicated above.

You could obtain this kind of result when applying CSS properties:

You can find some ideas in this codepen collection of Blockquotes.

In conclusion

We have quickly inserted a blockquote and its caption included a cite, haven’t we? That was not so difficult, finally!

Do not hesitate to insert beautiful quotes in your next articles.

Just before leaving, maybe would you be interested in articles I have already written on subjects like inserting pens and code examples in your WordPress article or using the WordPress post_thumbnail as background image…