Skip to content
WordPress

How to Add 2 Lines of Text in a WordPress Header (2026 Guide)

· · 11 min read
Have 2 Lines Text in WordPress Header

A site header carrying both a business name and a short tagline underneath it, “Riverside Dental” on one line, “Gentle Care for the Whole Family” on the next, reads as more established than a single cramped line trying to say both at once. WordPress does not make this obviously easy. The Site Title field in the Customizer or Site Editor expects one line of text, and typing a line break directly into it usually gets stripped out the moment you save, leaving the tagline squeezed onto the same line or dropped entirely.

The right fix depends entirely on which kind of theme you are running: a block theme built for Full Site Editing, or a classic theme using the older Customizer. Mixing up the two approaches is the single most common reason this task takes longer than it should, since a method that works cleanly in one context does nothing, or actively breaks the layout, in the other.

Figuring out whether you are on a block theme or a classic theme

Check your dashboard under Appearance. If you see an option labeled “Editor” that opens a full-page visual editor covering your entire site, templates and all, you are on a block theme with Full Site Editing support (Twenty Twenty-Four and newer default WordPress themes, along with most themes built in the last two years, fall into this category). If Appearance instead shows “Customize” and opens a sidebar-based settings panel, you are on a classic theme, and the two-line header approach works differently.

This distinction matters because block themes render the site title as an actual Gutenberg block you can edit directly, with full control over line breaks, styling, and layout. Classic themes generate the site title through PHP template code, which means adding a genuine line break usually means either finding a specific theme setting, or falling back to a widget, HTML snippet, or CSS trick since the Customizer’s plain text field will not accept one.

Method 1: Block Theme Site Editor (the clean way)

This is the most reliable method if your theme supports it, since it works with the actual block structure of your site rather than fighting against it.

  1. Go to Appearance → Editor in your dashboard.
  2. Click into the Header template part (or open the template that contains your header if your theme structures things differently).
  3. Find the block displaying your site title. If it is currently a Site Title block, you have two options: add a second, separate Heading or Paragraph block directly beneath it for your tagline, styled smaller, or convert the header area to use a plain Heading block instead of the Site Title block so you have full text control including manual line breaks.
  4. If using a Heading block directly, click into the text and press Shift + Enter at the point where you want the second line to start. A plain Enter creates a new block entirely, which is not what you want here, Shift+Enter creates a soft line break within the same block.
  5. Adjust font size on the second line specifically if you want the tagline visually smaller than the main title, using the block’s typography settings or by wrapping the second line in its own smaller Heading or Paragraph block instead.
  6. Save the template, then check the live front end, not just the editor preview, since some themes apply additional CSS on the actual page that is not visible inside the editor canvas.

Method 2: Classic Theme Customizer

Classic themes vary more in what they allow directly through the Customizer, so start here and fall back to the alternatives below if your specific theme does not cooperate.

  1. Go to Appearance → Customize → Site Identity.
  2. Check whether your theme’s Site Title field accepts HTML. Most do not, since WordPress core sanitizes this field by default to strip tags for security reasons, which means typing <br> directly will not work in the vast majority of classic themes.
  3. If your theme includes a dedicated “Tagline” field (many do, separate from the Site Title), use that field for your second line instead of trying to force two lines into the title field itself. Check your theme’s typography settings to control how large or small the tagline renders relative to the title.
  4. If there is no usable tagline field and the theme genuinely will not accept a line break in the title, move to the CSS or widget approach below.

Method 3: CSS Approach (works across most themes when the above options fail)

If your theme’s markup outputs the site title and tagline as separate elements already, even if they currently render on the same visual line, CSS can force them onto separate lines without touching any HTML:

.site-title { display: block; }
.site-description { display: block; }

Add this under Appearance → Customize → Additional CSS for a classic theme, or in a block theme’s Styles panel using a custom CSS block if your theme supports it. This works because display: block forces each element to start on its own line rather than sitting inline next to whatever precedes it, without needing an actual line break character anywhere in the markup.

This method only works if your theme genuinely outputs the tagline as a separate HTML element from the title in the first place. Inspect your header in browser DevTools (right-click the title text and choose Inspect) to confirm there are actually two separate elements, typically something like .site-title and .site-description, before assuming this CSS will apply.

Method 4: Custom HTML Widget or Block (maximum control, more manual work)

If your theme’s header widget area supports it, or if you are comfortable editing the header template directly, a Custom HTML widget or block gives you complete control:

<h1 class="site-title-custom">Riverside Dental</h1>
<p class="site-tagline-custom">Gentle Care for the Whole Family</p>

This bypasses the native Site Title field entirely, which means it will not automatically pull from your Settings > General site title if you ever change it there. That tradeoff is worth knowing upfront: you gain full formatting control but lose the automatic sync with your core WordPress site title setting, so update both places if your business name ever changes.

Common problems and how to actually fix them

The second line disappearing entirely after you save is almost always the Site Title field stripping HTML tags on save. WordPress core sanitizes this specific field aggressively, and no amount of retyping a <br> tag will make it stick. Move to a Heading block, a tagline field, or the CSS method instead of fighting the sanitization.

The two lines rendering correctly on desktop but collapsing back onto one cramped line on mobile usually means your theme’s mobile breakpoint applies a different font-size or line-height rule that was not accounted for in your custom CSS. Add a mobile-specific media query targeting the same elements, checked at an actual 390px viewport rather than just a resized desktop browser window, since resized-browser testing frequently misses touch-specific CSS rules some themes apply only under real mobile media queries.

If you used the Custom HTML approach and the tagline text does not visually match your theme’s typography (wrong font, wrong color, inconsistent spacing compared to the rest of your header), it is because a hand-written HTML snippet does not automatically inherit your theme’s block-level typography settings the way a native Heading or Paragraph block does. Either manually match the CSS properties your theme applies to headings elsewhere, or switch to using an actual Heading block styled through the block editor’s own typography panel instead.

Getting the visual hierarchy right, not just the line break

A second line of header text only reads well if it is visually subordinate to the first. Match the pattern most readers already expect: a larger, bolder site title on top, a smaller, lighter-weight tagline directly beneath it. Two lines of identical size and weight tend to read as confusing rather than intentional, since nothing in the visual treatment tells a visitor which line is the actual business name and which is supporting text.

Keep the tagline genuinely short. A single clear phrase, four to eight words, works far better than a full sentence crammed into the header. If you find yourself needing more than that to explain what the business does, that content belongs in a hero section below the header rather than squeezed into the header itself, which needs to stay scannable in the fraction of a second a visitor spends looking at it before scrolling further.

Check contrast between the two lines against your actual header background, not just against a white editor canvas. A tagline styled in a lighter gray that reads fine on white can become nearly invisible against a photo background or a dark header color scheme, which defeats the purpose of adding it in the first place.

Accessibility considerations most guides skip

A site title and tagline split into two lines still needs to make sense to a screen reader, which reads through the DOM structure rather than the visual layout. If you use a single Heading block with a Shift+Enter line break, a screen reader typically announces the whole heading as one continuous phrase with a brief pause at the break, which usually reads acceptably. If you use two entirely separate elements (a Heading for the title, a Paragraph for the tagline), confirm the tagline is not accidentally marked up as another Heading of the same level, since stacking two h1 elements in a header confuses the page’s heading hierarchy for anyone navigating by heading structure with assistive technology.

Check that your tagline text has sufficient color contrast against its background specifically, not just readable contrast in general. WCAG guidelines call for a minimum 4.5:1 contrast ratio for normal-sized text, and a lightly colored tagline that looks stylish against a plain white background often fails this ratio once placed over a photo or gradient header background. Run the actual color combination through a contrast checker rather than eyeballing it.

Testing across the themes and builders most stores actually use

Twenty Twenty-Four and other current default WordPress themes handle the Heading block method described above cleanly, since they were built from the ground up around Full Site Editing and expect exactly this kind of block-level control in the header template part. If you are on one of these themes, Method 1 should work with no surprises.

Popular classic-style themes like Astra, GeneratePress, and OceanWP each handle the tagline field slightly differently in their own theme options panels, sometimes duplicating the native WordPress Customizer tagline field with their own separate setting. Check both locations, the core Site Identity panel and any theme-specific typography or header options, since having a tagline set in one place but not the other is a common source of “why isn’t my change showing up” confusion.

Kadence and Blocksy, both increasingly common as flexible classic-to-block hybrid themes, generally expose more granular header customization directly in their own settings panels, including a built-in two-line title option in many cases, which can make this entire process unnecessary if the option already exists natively. Check your theme’s own header settings thoroughly before reaching for CSS or a Custom HTML widget, since a growing number of themes have started building this exact feature in directly given how commonly it gets requested.

Frequently asked questions

Why doesn’t <br> work when I type it directly into the Site Title field?

WordPress core strips HTML tags from the Site Title field by default as a security and data-integrity measure, since this field is used in many contexts across a site (browser tab titles, RSS feeds, meta tags) where raw HTML would cause problems. Use a Heading block with Shift+Enter, a dedicated tagline field, or CSS-based line breaking instead.

Will adding a second header line hurt my SEO?

No. A visual line break does not change the underlying text content, and search engines read the text itself rather than how it wraps visually. What matters for SEO is that your actual site title and tagline text remain accurate and descriptive, not whether they render on one line or two.

Can I do this in Elementor or another page builder instead of the native editor?

Yes. Most page builders that let you edit the header, either through a dedicated header builder module or a Custom HTML widget, support a manual line break inside a Heading widget the same way the block editor does, typically with Shift+Enter or a dedicated line-break option in the widget’s text formatting toolbar.

What if my header is generated entirely by my theme with no editable option at all?

Some themes hard-code the header markup with no built-in tagline support and no accessible template part to edit directly. In that case, the CSS approach from Method 3 is usually still viable if the theme’s markup happens to output separate elements for title and tagline already, and the Custom HTML widget approach works regardless of what the theme’s native header supports, since it bypasses the theme’s header logic entirely.

Do I need any code knowledge to do this safely?

The block theme method requires no code at all, just Shift+Enter inside a Heading block. The CSS method requires pasting a short snippet into a designated Additional CSS field, which is safe and reversible since it does not touch any template files directly. Only the Custom HTML widget method involves writing actual markup, and even that is a short, low-risk snippet rather than anything that could break your site if typed incorrectly.

What to do if you manage the site but did not build it

Plenty of site owners inherit a WordPress install someone else set up, without knowing whether it runs a block theme, a classic theme, or a heavily customized page builder layout. Before touching anything, take a full-page screenshot of the current header and save your Additional CSS field’s existing contents somewhere safe, since a header is one of the most visible things on a site and a botched edit is immediately obvious to every visitor.

If you are not confident which method applies, start with the least destructive option first: check Appearance > Customize > Site Identity for a native tagline field before touching any CSS or template code. This single check resolves the need for a two-line header on a meaningful share of WordPress sites without requiring any of the more involved methods above.

Picking the method that fits your actual setup

Start by confirming whether you are on a block theme or a classic theme, since that single fact determines which method will work cleanly versus which will fight you the whole way. Block themes: use a Heading block with Shift+Enter and skip everything else on this list. Classic themes: check for a native tagline field first, fall back to CSS if your theme’s markup already separates the two elements, and reach for the Custom HTML widget only when nothing else applies. Whichever method you land on, test the final result on an actual mobile device before calling it done, since header text is one of the first things every visitor sees and the least forgiving place on a site for something to render wrong.