The quickest way to add a drop cap in WordPress is to select the opening Paragraph block, open Typography, enable Drop cap, and preview the result on desktop and mobile. You can adjust the appearance with CSS, while block-theme authors can control whether the editor offers the feature through theme.json.
Add a drop cap with the WordPress Block Editor
This method applies a drop cap to one paragraph and requires no plugin or code.
- Edit the post. Open the post in the WordPress Block Editor.
- Select the opening paragraph. Click the Paragraph block whose initial letter should be enlarged. The feature is intended for the first text or first letter of that paragraph.
- Open Typography settings. In the block settings sidebar, open Typography. If Drop cap is not listed, open the Typography options menu and enable that control.
- Turn on Drop cap. WordPress enlarges the paragraph’s initial letter and aligns it to the left of the text, as described in WordPress.org’s Typography Settings documentation.
- Check responsive layouts. Use Preview at desktop and mobile widths. Confirm that the enlarged letter does not overlap text or create an awkward short line, then select Update or Publish.
Why the Drop cap control may be missing
The selected block is not a Paragraph
Drop caps are a Paragraph-block typography feature. Select the paragraph itself rather than a Group, Columns, Heading, or other wrapper.
Typography controls are hidden
Open the Typography panel’s options menu and turn on Drop cap. Block-editor panels can hide individual controls until you enable them.
#1 Best Overall
- Used Book in Good Condition
Your block theme disabled the setting
Block-theme authors can expose or remove the control with settings.typography.dropCap in theme.json. The Theme Handbook documents a default of true; a theme that sets it to false prevents users from enabling the option in the editor.
Control the size and appearance with CSS
When the built-in styling does not match your design, WordPress adds the has-drop-cap class to the paragraph. Add a rule in Appearance → Customize → Additional CSS (for classic themes) or your theme’s supported style system:
.has-drop-cap:not(:focus)::first-letter {
font-size: 3.55em;
}Change the value to make the initial letter larger or smaller. The WordPress.org Support guidance identifies has-drop-cap as the class on the text element and recommends custom CSS for styling the drop cap. Your theme’s existing font, line-height, color, and margins still affect the result, so preview after each change.
Use a first-paragraph selector for a theme-wide pattern
If you want every post’s opening paragraph to receive the same treatment, a classic-editor or theme-level rule can target the first paragraph. Replace .entry-content with the content wrapper used by your theme:
Free tools Windows power users keep installed
One-click scans. No signup required.
.entry-content p:first-child:first-letter {
float: left;
font-size: 3em;
font-weight: bold;
line-height: 0.9;
margin: 0.05em 0.1em 0 0;
}This follows the standard :first-letter approach described in the WordPress Codex: the first letter of the first displayed paragraph is enlarged and drops below the normal text line. Inspect your page markup before choosing a selector, because wrapper names differ between themes.
Theme-level implementation in theme.json
For a block theme, the relevant setting is:
{
"settings": {
"typography": {
"dropCap": true
}
}
}Set the value to false when the design system should not expose the editor control. The Theme Handbook warns that the current drop-cap implementation is “notoriously buggy with different font families, font sizes, and line heights.” Treat the setting as an editor capability, not a guarantee that every font combination will look correct; use CSS and visual checks to refine the output.
Rank #4
Choose the right approach
| Approach | Editor simplicity | Scope | Control | Maintenance and compatibility |
|---|---|---|---|---|
| Paragraph block’s Drop cap toggle | Fast, no code | One selected paragraph | Uses theme’s default styling | Best for block-editor posts; appearance follows theme updates |
has-drop-cap custom CSS |
Requires CSS | Selected drop-cap paragraphs | Precise size and related styling | Requires checking theme overrides after updates |
:first-child:first-letter rule |
Requires CSS and markup knowledge | Potentially site-wide opening paragraphs | Full selector and typography control | Works with classic-theme patterns, but selectors vary by theme |
theme.json setting |
Developer configuration | Controls whether the editor option is available | Capability control, not detailed visual styling | Block-theme specific |
Troubleshoot a drop cap that looks wrong
The front end does not change
- Inspect the paragraph and verify that WordPress added
has-drop-cap. - Check whether theme CSS has a more specific rule overriding the generated style.
- Clear any page or browser cache after saving CSS.
The letter overlaps text or lines
- Test the actual font family, font size, and line-height used on the site; WordPress documents bugs across these combinations.
- Adjust
font-size,line-height, and margins together rather than changing only the letter size. - Preview narrow mobile widths, where a large initial can consume most of the first line.
The effect appears in every paragraph
Limit the selector to the opening paragraph or apply the editor toggle only to the intended block. Repeating drop caps throughout a long post can make scanning harder unless that repetition is a deliberate design choice.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Accessibility and design checks
- Keep sufficient contrast between the drop cap and its background.
- Do not use the enlarged letter as the only way to communicate meaning; the paragraph text must remain unchanged and readable.
- Check keyboard focus and links around the opening paragraph, especially when using
:not(:focus)selectors. - Review desktop, tablet, and mobile widths after changing fonts, line heights, or responsive type settings.
The Bottom Line
For most posts, use the Paragraph block’s Drop cap toggle, then refine it with narrowly scoped CSS only if the theme’s default sizing needs adjustment. Use theme.json to control availability in a block theme, and always test the opening paragraph across fonts and screen sizes.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Quick Recap
Best Value
- Keep track of everything from attendance to test scores
- Spiral bound
- Measures 8-1/2" x 11"
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
