Quotes are one of the most effective ways to break up your content and draw a reader’s eye to something important — a testimonial, a statistic, or a line worth remembering. WordPress makes them easy with the built-in Quote block, and the underlying <blockquote> HTML tag gives you full control when you want it. This guide covers every way to add a quote, how to add a proper citation, how to style quotes with CSS to match your brand, and the difference between a blockquote and a pullquote.
In the WordPress editor, add a quote the fastest way by typing > followed by a space on a new line — it turns into a Quote block automatically. Or click the + inserter, search “Quote,” and add the block. Type your quote, add a citation, and you’re done.
What is a quote block in WordPress?
A quote block is a WordPress block that displays text as a visually distinct quotation — usually indented, with a vertical line or larger type, set apart from your normal paragraphs. Behind the scenes, it outputs the standard HTML <blockquote> tag, which is the semantic element browsers and search engines recognize as quoted content.
You’ll use quotes to highlight testimonials and reviews, cite a source or an expert, pull out an inspiring line, or emphasize a key takeaway. Because the quote stands apart visually, readers scanning your page are naturally drawn to it — which makes quotes a simple but powerful formatting tool.
WordPress actually offers two related blocks: the Quote block (for standard quotations from a source) and the Pullquote block (for emphasizing an excerpt of your own text). We’ll cover the difference near the end — most of the time, the Quote block is what you want.
Method 1: Add a Quote block (the easy way)
The simplest way to add a quote, no code required:
- In the post or page editor, click the + block inserter where you want the quote.
- Search for “Quote” and click the Quote block to insert it.
- Type or paste your quotation into the block.
- Below the quote, click “Add citation” and type the author or source (optional but recommended).
- Publish or update the page.
That’s it. The quote appears styled according to your theme, set apart from the surrounding text.
Method 2: The keyboard shortcut (fastest)
If you’d rather not reach for the inserter, WordPress has a shortcut that mirrors Markdown:
- On a new line, type a
>(greater-than sign) followed by a space, then start typing.
WordPress instantly converts the line into a Quote block. This is the quickest way to add a quote while you’re writing, without breaking your flow.
Method 3: The blockquote HTML tag (full control)
If you’re working in HTML — in a Custom HTML block, or the “Edit as HTML” view of a block — you can write the quote markup directly. The semantic element is <blockquote>:
<blockquote>
<p>The best way to predict the future is to invent it.</p>
<cite>Alan Kay</cite>
</blockquote>The <blockquote> wraps the quoted text, and the “ tag marks the source’s name. For quotes taken from another web page, you can add a cite attribute with the source URL — a semantic signal that tells browsers and search engines where the quote came from:
<blockquote cite="https://example.com/source">
<p>Quoted text here.</p>
</blockquote>Note the difference: the <cite> tag shows a visible source name to readers, while the cite attribute on <blockquote> is invisible metadata pointing to the source URL. Using both is good practice for quotes from external pages.
Putting other blocks inside a quote
The Quote block isn’t limited to a single line of text — it’s a container, so you can place other blocks inside it. This is what makes it perfect for rich testimonials: a quote with the customer’s photo and name, or a multi-paragraph statement.
To add blocks inside a quote, click inside the Quote block and use the + inserter that appears within it, or drag an existing block into it using the List View (the icon in the top-left toolbar). You can add:
- Multiple paragraphs — for longer quotations broken into parts.
- An image — the author’s or customer’s photo, above or beside the quote.
- A heading or button — for example, the person’s name as a heading, or a “Read the full review” button.
This turns a plain quote into a complete testimonial card, all within one block and without any code.
How to add a citation properly
A quote without attribution is just floating text — the citation is what gives it credibility. In the Quote block, use the “Add citation” field that appears below the quote; it renders the source in a smaller, styled font. Keep the citation to the author’s name, the publication, or both (“Jane Doe, Wired“). If the quote comes from a specific web page, linking the citation to that page is a nice touch and reinforces the source.
How to style quotes with CSS
WordPress themes each style quotes differently, and the default look doesn’t always match your brand. You have two easy ways to customize.
Before touching any code, try the built-in block styles. Select the Quote block and, in the settings sidebar, look at the Styles options. Every Quote block comes with at least two:
- Default — uses your theme’s standard quote styling (usually a vertical line or indentation).
- Plain — strips the visual styling for a cleaner, minimal look.
Many themes add a third, Large, which removes the vertical line, increases the font size, and italicizes the text for a bold, magazine-style quote. Hover over each style to preview it before applying. If one of these fits your design, you may not need any custom CSS at all.
Option 1 — the block settings (no code). Select the Quote block and open the settings sidebar. Depending on your theme, you can change the style (Default vs Plain), the color (text and background), typography (font, size, style), and spacing (padding and margin). This is enough for most sites.
Option 2 — custom CSS (full control). For a consistent, branded look across every quote, target the blockquote element in your CSS. Add this under Appearance → Editor → Styles → Additional CSS (block themes) or Appearance → Customize → Additional CSS (classic themes):
blockquote {
border-left: 4px solid #F26C21;
background: #fff4ec;
padding: 16px 20px;
font-style: italic;
margin: 24px 0;
}
blockquote cite {
display: block;
margin-top: 8px;
font-style: normal;
font-weight: bold;
}Adjust the colors, border, and spacing to fit your design. Because this targets the blockquote element itself, it applies to every quote on your site automatically — a single place to control the look of all your quotations.
Always add custom CSS through the Customizer or Styles panel (or a code-snippets plugin) — never by editing your theme’s files directly, or you’ll lose the changes on the next theme update. Custom CSS added this way survives updates and can be removed anytime.
Using a page builder or a blocks plugin? Page builders like Elementor and Divi, and advanced block plugins, include their own quote or testimonial widgets — often with extra design options built in, like an author photo, star ratings, or preset layouts, with no CSS required. If you already build your pages with one of these, check its blocks for a “Quote,” “Blockquote,” or “Testimonial” element before styling the default block by hand.
Best practices for using quotes
- Keep them reasonably short. A quote of roughly 40–100 words has the most impact; longer than that and the visual emphasis is lost.
- Always attribute. Cite the author or source — it’s both more credible and, for quoted material, the right thing to do.
- Don’t overuse them. Quotes work because they stand out. If half your page is quotes, none of them stand out anymore.
- Use real quotes, not for emphasis. For emphasizing your own text, a pullquote (or bold text) is the correct tool — a blockquote is for quoting a source. (More on that next.)
A memorable quote is one of the most-shared parts of any post. To turn it into a one-click share, a “click to tweet” feature lets readers post the quote to X (Twitter) with a tap. Several formatting plugins add a click-to-tweet block — a simple way to turn a good quote into free social reach.
Blockquote vs pullquote: what’s the difference?
This trips up a lot of people, because they look similar but serve opposite purposes:
- A blockquote (the Quote block) is a quotation from an external source — someone else’s words, which you’re citing. It’s about attribution.
- A pullquote (the Pullquote block) is an excerpt pulled from your own text, enlarged and set apart purely to grab attention — like the big quotes you see in magazine articles. It’s about emphasis, and the text is usually repeated from the body. For a full guide to creating and styling them, see how to use the WordPress Pullquote block.
In short: quoting someone else → blockquote. Highlighting your own words → pullquote.
WordPress lets you switch between the two in seconds if you picked the wrong one. Select the block, click the block type icon on the left of the toolbar (it shows the current block’s icon), choose Transform, and pick Pullquote (or Quote). Your text carries over — only the block type and styling change. This makes it easy to try both and see which fits your layout.
Well-formatted content deserves fast, reliable hosting. Copahost runs WordPress on LiteSpeed with NVMe storage and free SSL, so your pages load quickly and your quotes, images, and layouts always render perfectly.
See web hosting plansFrequently asked questions
How do I add a quote in WordPress?
The easiest way is the Quote block: click the + inserter, search “Quote,” add the block, and type your quotation. Even faster, on a new line type a > followed by a space — WordPress converts it into a Quote block automatically. Add a citation below the quote to credit the source.
What is the blockquote tag in WordPress?<blockquote> is the HTML tag that marks quoted content. The WordPress Quote block outputs this tag automatically, but you can also write it by hand in a Custom HTML block for full control, including a <cite> tag for the source name and a cite attribute for the source URL.
How do I style a blockquote in WordPress?
Two ways: select the Quote block and use the settings sidebar to change color, typography, and spacing (no code); or add custom CSS targeting the blockquote element (via Appearance → Customize → Additional CSS) to style every quote on your site consistently.
What’s the difference between a blockquote and a pullquote?
A blockquote quotes an external source — someone else’s words you’re citing. A pullquote highlights an excerpt of your own text, enlarged for emphasis, like in magazine layouts. Quoting someone else uses a blockquote; emphasizing your own words uses a pullquote.
How long should a quote be?
Around 40 to 100 words works best. Short enough to keep its visual impact, long enough to carry meaning. Very long quotes lose the emphasis that makes a quote block effective.
Conclusion
Adding a quote in WordPress takes seconds — the Quote block, the > shortcut, or the <blockquote> tag all get you there, and a citation gives the quote its credibility. When you want quotes to match your brand, the block settings handle quick changes and a bit of custom CSS gives you a consistent look across the whole site. Remember the distinction: a blockquote is for quoting someone else, a pullquote is for emphasizing your own words. Use them deliberately, keep them concise, and always attribute your sources — and your content will be easier to read and more engaging.
