Quote and pullquote are two elements used in WordPress websites to emphasize, quote, or cite content. The process was difficult in the past because WordPress didn’t have a Quote Block element until version 5.0. The block can be put anywhere in the text and edited to include a quote or a citation. Thanks to the CSS (Cascading StyleSheets) themes bring, the quote will differ from the rest of the content. The distinction is frequently another font, background color, gradient, and quotation marks to draw the attention of readers. We will now show you how to quote in WordPress.
1. Use the Quote Block in WordPress Gutenberg Editor
As mentioned, the Quote Block functionality was added in WordPress 5.0 and became the go-to beginner-friendly option. Common use case includes citations, inspirational quotes, and customer reviews. To add a Quote Block to your WordPress page or post, do the following:
- Open a post or page, then click anywhere on the editor page to start a new row.
- Click the + block inserter icon or the one in the top left corner. Search for “quote” and select Quote from the list of options.
Note. You can also type “/quote” in a new line instead of step 2, then choose Quote from the options. - You will now see an “Add quote” message. Copy/paste the desired quote text or type it out. Don’t include quotation marks, since they’re likely to be included in the quote design.
- In the “Add citation” field you can enter the name of the individual and organization the quote comes from. Add a date, time, year, circumstances, source, and so forth.
- Optional. Click on Save Draft then Preview in the top right corner to see the quote on the front end.
The appearance of your quote block varies based on the CSS and coding for your active WordPress theme. We propose that beginners avoid coding and first try switching a theme or available styles if the appearance is inadequate.
Apply quote options in the Block Toolbar
Clicking the quote block makes a toolbar appear above. That provides a host of Block Toolbar options useful for adding quotes in WordPress:
- Transform — Lets you convert the appearance of the block from default to pullquote, heading, paragraph, list, column, and much more. You can preview the result. The Styles section shows a list of different designs for quotes defined in CSS by your activated theme. Group lets you add another block into the fold to modify the border, background, or configure spacing.
- Drag and move — Clicking or tapping, then holding the icon lets you drag the block and change its position in your post or page editor. Arrows let you move the quote one block up or down.
- Align — Permits you to align the quote block to left, right, or center. You’ll almost never see the option to go full width or wider than content width unless you transform it into a group.
- Bold and Italic — Classic text formatting options to change the appearance of text.
- Link — Another classic option that lets you add an anchor link or link to WordPress pages.
Configuring more options and standard options
You will notice two options at the end of the block toolbar:
- More Options — The down arrow lets you modify the text in some less-common way:
- Inline code — Lets you format the text to resemble
inline code
. - Highlight — Permits you to highlight by switching the color of the text and its background.
- Inline image — You can add an image from Media Library as part of the quote. Transforming into a group we mentioned above permits you to add an image as a background
- Keyboard input — This formats the quote as a keyboard HTML.
- Strikethrough — Lets you add a strike-through line
across your text. - Subscript — Permits you to change the text to look like a subscript, i.e., X2.
- Superscript — Does the opposite of subscript, makes text appear above, like m2.
- Text color — Self-explanatory. Supports RGB, hex code, and HSL code.
- Inline code — Lets you format the text to resemble
- Standard Options — Typical block settings such as Copy, Duplicate, Insert before/after, Move To, Edit as HTML, Add to Reusable Blocks, Remove Block, and Group.
Configure Block Settings for a Quote
This is a crucial section to configure the appearance of a Quote Block. After clicking the block, modify it by switching to the Block tab on the right-hand side. If you don’t see it, click the cogwheel/gears icon. Then, use one of these options:
- Layout or Styles — Theme-dependent list of styles for quotes, such as Modern, Default, Large, Plain, or Indented. Theme developers may add more options if you request or pay for an upgrade.
- Color — Lets you select the color of the background or the text of a code. Useful and more beginner-friendly than using the “Group” option.
- Typography — Permits configuring the font choice and its size. Includes letter case, line height, letter spacing, and much more.
- Appearance — Adds extra options to your styles. In most cases only lists available versions for the chosen font.
- Advanced — Lets you:
- Add a name for the quote block under “HTML anchor” letting you mark it as anchor text link for WordPress. For example,
quote-block
. - Enter a class name, e.g.,
quote-block
, under “Additional CSS class(es)”. This option allows users to configure a CSS class in coding, then enter its name to apply defined CSS settings to a quote block.
- Add a name for the quote block under “HTML anchor” letting you mark it as anchor text link for WordPress. For example,
2. Create a quote via HTML or CSS in WordPress
The quotes you see on the front end are the result of HTML and CSS behind the scenes. If you can’t find the desired option for appearance, you can do it yourself. In most cases, users want to settle on one style for a quote, then keep it consistent throughout the website. We already taught you to edit CSS in WordPress. All that’s left is to decide whether to edit the one for your child theme or define a CSS class then use option 5, sub-option 2 above to enter its name. Here’s an example of a simple blockquote:
blockquote {
width: 500px;
background-color: #f7f7f7;
border: 1px solid #ccc;
border-radius: 7px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2015 \2010";
}
3. Use a WordPress plugin for quotes
Another option is installing a WordPress plugin for blockquotes, pullquotes, and citations. Those make it easy to preview changes, add more options, and permit users to post quotes as shortcode anywhere on the website. Although we have no affiliation, one beginner-friendly example is Quotes Shortcode and Widget by OTWthemes. Some plugins even let you add custom CSS classes as a code snippet, removing the need to edit your source files.