Two lines in a WordPress header usually means one of two things: a site title stacked over a tagline, or a single longer piece of text (an address, a phone number, a slogan) that needs to wrap in a controlled way rather than however the browser decides to break it. The two problems have different fixes, and mixing them up is why a lot of attempts at this end up either not working or breaking on mobile.
Most tutorials jump straight to a code snippet. Worth checking the theme’s own settings first, since a surprising number of “custom” two-line headers turn out to be a Customizer field the site owner never noticed.
First, Check If Your Theme Already Has This Built In
WordPress has shipped Site Title and Tagline as two separate fields since forever, under Appearance > Customize > Site Identity. Most themes display both by default, title on one line, tagline underneath, which is already the two-line result a lot of people are trying to build from scratch with custom HTML.
If your header only shows the title, check the theme’s header settings or theme.json (on block themes) for a tagline visibility toggle before writing any code. Some themes hide the tagline by default and only show it on the homepage, or hide it entirely unless a specific header layout is selected. This is worth five minutes of checking, since it can turn a CSS project into a single settings toggle.
If the Theme’s Tagline Field Is What You Want
Go to Appearance > Customize > Site Identity. Fill in both Site Title and Tagline. Preview. If both appear stacked already, you’re done, no CSS needed.
If the tagline exists but isn’t visually distinct enough (same size as the title, wrong color, wrong spacing), that’s a styling problem, not a structural one, and it’s the easier fix:
.site-description {
font-size: 14px;
color: #667085;
margin-top: 4px;
}
The exact class name (.site-description.tagline.site-tagline) varies by theme; inspect the element to confirm before writing the rule.
Building a Genuine Two-Line Header From Scratch
If the theme doesn’t have a built-in second field, or the two lines aren’t a title/tagline pair at all (a business name plus a phone number, for instance), you’re editing the header template directly, either through a child theme’s header.php on a classic theme, or the Site Editor’s header template part on a block theme.
Classic Themes: header.php
Back up header.php first, or better, copy it into a child theme so the original stays untouched and updates don’t wipe your change. Find where the site title currently outputs, usually inside a function like the_custom_logo() or bloginfo(‘name’), and wrap the two pieces of text in their own elements:
<div class=”header-text”>
<h1 class=”site-title”>First Line</h1>
<p class=”site-subline”>Second Line</p>
</div>
Then style each independently:
.site-title { font-size: 24px; margin-bottom: 4px; }
.site-subline { font-size: 16px; color: #667085; margin: 0; }
Block Themes: Header Template Part
In the Site Editor (Appearance > Editor > Header), add a second Paragraph or Heading block directly below the existing Site Title block inside the header template part, rather than editing PHP. This keeps the change inside the block editor’s own persistence layer instead of a file that could get overwritten by a theme update.
Why a Literal <br> Is the Wrong Tool
The quickest-looking fix is dropping a <br> tag inside the existing title text: “My Business<br>Since 1995”. It works visually and it’s the wrong approach for two real reasons.
First, accessibility. Screen readers announce a <br> inconsistently across different software, sometimes as a pause, sometimes not at all, and it turns what should be one clean heading announcement into something structurally messy for assistive technology. A heading is supposed to represent one semantic unit; splitting it with a forced line break inside the same element muddies that.
Second, responsiveness. A hardcoded break happens at the exact same character position on every screen size. On mobile, where the container is much narrower, that fixed break can produce an awkward, uneven wrap while the rest of the text still wraps naturally around it, since you’ve forced a line break the browser has to honor regardless of available width.
Two separate elements, styled with CSS, solve both problems: each is announced as its own text node, and you can control (or remove) the visual line break independently per breakpoint with a media query instead of it being baked into the markup itself.
Making the Two Lines Collapse to One on Mobile, If That’s What You Want
Sometimes the two-line layout only makes sense on wider screens, and a single condensed line reads better on a 390px viewport. Handle this with a media query rather than hiding one line entirely, which would remove real content instead of just changing its presentation.
@media (max-width: 480px) {
.header-text { display: flex; align-items: baseline; gap: 6px; }
.site-subline { font-size: 12px; }
}
Switching the wrapper to a flex row on small screens puts both lines side by side instead of stacked, which is often a better use of vertical space in a mobile header where every pixel of height matters against the visible content below.
Using Flexbox or Grid Instead of Fighting Default Block Flow
If the two lines need precise alignment against a logo image sitting beside them (a very common header layout: logo left, two-line text block right), flexbox on the parent header container handles this more reliably than floats or manual margins.
.site-branding { display: flex; align-items: center; gap: 12px; }
.header-text { display: flex; flex-direction: column; justify-content: center; }
This keeps the two lines vertically centered against the logo regardless of the logo’s exact height, which is fragile to get right with margin-based positioning and tends to drift out of alignment the next time the logo image changes size.
Vertical Alignment Against the Logo Is the Detail That Usually Looks Off
The most common visual complaint after adding a second line isn’t the text itself, it’s that the whole text block now sits slightly too high or too low next to the logo, since the container grew taller but the alignment rule was written when there was only one line to center.
align-items: center on the flex parent (shown in the earlier example) handles most cases automatically, but if the logo and text sit in separate columns rather than a single flex row, check the logo’s own vertical-align or margin values, which may have been tuned specifically for a single-line neighbor and now need adjusting for the taller two-line block beside it.
A quick way to spot this: zoom into the header at 200% in your browser and look at the gap above the first line versus below the second line. If they’re visibly uneven, the block isn’t actually centered, it’s just close enough to not notice at normal zoom, and it’s worth the extra thirty seconds to fix properly rather than leaving it slightly off.
RTL Sites Need a Direction Check
If the site serves a right-to-left language (Arabic, Hebrew) alongside or instead of English, verify the two-line block doesn’t visually reverse in a way that breaks reading order. Flexbox respects the page’s dir attribute automatically for row direction, but a manually set text-align: left in your custom CSS won’t flip on its own and needs its own RTL override:
[dir=”rtl”] .header-text { text-align: right; }
Test this with an actual RTL language active, not just by guessing, since a two-line header that looks fine in English can end up with the second line’s alignment fighting against the first line’s direction if this is missed.
A Worked Example: Business Name Over a Phone Number
This is a common request that isn’t a title/tagline pair at all, a service business wanting their phone number visible in the header at all times, styled as a clear second line under the business name.
The markup, added to a child theme’s header.php near the logo output:
<div class=”header-text”>
<span class=”site-title”>Riverside Plumbing</span>
<a href=”tel:+15551234567″ class=”header-phone”>(555) 123-4567</a>
</div>
Making the phone number an actual tel: link matters beyond just styling. On mobile, a linked phone number is tappable to dial directly, which a plain text string isn’t. This is a small detail that gets missed constantly when people focus purely on the visual two-line layout and forget the functional reason a phone number belongs in a header in the first place.
.header-phone {
display: block;
font-size: 14px;
font-weight: 600;
color: inherit;
text-decoration: none;
margin-top: 2px;
}
display: block forces it onto its own line beneath the site title without needing a separate break element, which keeps the markup clean and the accessibility tree simple, one heading, one link, both self-contained.
Testing the Change Properly Before Calling It Done
A two-line header change deserves the same verification pass as any other header edit, not just a glance at the homepage in a wide desktop browser window.
Check the longest realistic content in both fields, not just placeholder text. A short test tagline like “Welcome!” will always fit comfortably; a real tagline that’s a full sentence might wrap unexpectedly or overflow its container in a way the short placeholder never revealed. Test with the actual final copy, not a shorter stand-in.
Check the header at 390px specifically, since that’s the narrowest common mobile viewport and the one most likely to reveal overflow or cramped spacing that a tablet-width test misses. Check it again with the browser’s text zoom increased to 200%, since low-vision users browsing at larger text sizes are one of the more common ways a “fits fine” two-line header breaks in practice, text overlapping the logo or overflowing its container.
Check both a logged-in and logged-out state if the header includes any conditional elements (a cart icon, an account menu), since those can shift the available horizontal space for the two-line text block and cause a wrap that doesn’t happen for anonymous visitors.
Checking the Result With a Real Screen Reader, Not Just the Accessibility Tree
Inspecting the DOM in dev tools tells you the markup is structurally sound. It doesn’t tell you what the header actually sounds like to someone using assistive technology, and those are two different checks.
VoiceOver ships free on every Mac. Turn it on with Cmd+F5, then tab into the header using the keyboard alone. Listen to how the site title and the second line get announced. A properly separated title and subline reads as two distinct items, often with a short pause between them. A header still using a hidden hardcoded break, or one where both lines somehow ended up inside the same link element, tends to announce as one long run-on phrase with no clear boundary.
NVDA is the equivalent free option on Windows, and it’s worth testing there too if any real portion of your audience is on Windows, since VoiceOver and NVDA don’t always announce identical markup the same way. A gap between how the two tools handle the same header is a signal worth investigating rather than picking whichever result sounds better and calling it done.
A specific thing to listen for: if the phone number example from earlier in this piece is wrapped as a tel: link, confirm the screen reader actually announces it as a link, not just as plain text. If it reads as plain text despite being wrapped in an anchor tag, something in the surrounding markup or a competing ARIA attribute is likely suppressing the link semantics, and that’s worth tracking down before considering the header finished, since a phone number that’s visually a link but not announced as one is a real, if quiet, functional gap for anyone navigating by link rather than by sight.
Common Mistakes Worth Naming Directly
Using a hardcoded <br> instead of two separate elements, creating both an accessibility inconsistency and a responsive layout that can’t adapt per breakpoint.
Styling only the desktop view and never checking how the two lines behave at 390px, where a stacked layout that looked fine wide can suddenly eat too much vertical space.
Forgetting that some themes already have a tagline field, and rebuilding the same functionality manually when a Customizer setting would have done it.
Skipping the RTL check on multilingual sites, where a two-line layout can visually break once the page direction flips.
Sticky Headers and the Extra Height Problem
If the theme uses a sticky header (one that stays fixed at the top while scrolling), the extra height from a second line has a knock-on effect worth checking specifically: sticky headers are frequently given a fixed pixel height in CSS, and adding real content above what that height was calculated for can cause the second line to get clipped or overlap the content immediately below it once the header sticks.
Inspect the sticky header’s CSS for a fixed height or min-height value. If one exists and your new second line pushes past it, either increase that value to match the new content height or switch it to a min-height so the container can grow naturally instead of clipping. Also check whether the theme adds top padding to the main content area to compensate for the sticky header’s height, since that value likely needs the same adjustment or the page content will sit partially hidden behind the now-taller header the moment it becomes sticky on scroll.
What This Looks Like With a Community or Membership Theme
On community-focused themes, the header often carries more than a logo and tagline already, a search icon, a notifications bell, a member avatar dropdown, which means the two-line text block has less available horizontal space to work with than a typical brochure site header. Test the two-line layout specifically with all of those elements present and logged in, not just on a stripped-down logged-out view, since that’s the state most of a community site’s actual visitors will be in most of the time.
If space is genuinely tight, consider whether the second line needs to be visible in the header at all times, or only on the homepage, a pattern several community themes already support through a homepage-specific header variation, before committing to squeezing two lines into an already busy top bar sitewide.
FAQ
Will adding a second line make my header taller and push content down?
Yes, unless you compensate elsewhere. Check whether the header has a fixed height set anywhere in the theme’s CSS; if so, either increase it slightly or let it auto-size, and re-check that a sticky header (if the theme uses one) doesn’t now overlap the top of your page content once it’s taller.
Can I use two different fonts for the two lines?
Yes, style each element independently. Keep the same general type family for both if the goal is a cohesive look, a heavier weight or slightly different size communicates hierarchy without needing an entirely different typeface.
Does this work the same way in Elementor’s Theme Builder header?
The concept is identical, add a second Heading or Text widget inside the header section, stacked under the first. The implementation is drag-and-drop instead of editing header.php, but the same accessibility point about avoiding manual line breaks inside a single widget still applies.
Should the second line be a heading or plain text semantically?
Only one h1 should exist on a given page. That slot is typically reserved for the actual page content title on a well-structured site, not the site name sitting in the header (which is usually a link back to the homepage, wrapped in a lower heading level or no heading at all). Check what heading level, if any, your theme already uses for the site title, and keep the second line as a paragraph or span rather than another heading, to avoid an odd heading hierarchy for screen reader users navigating by headings.
Where This Leaves You
Check the theme’s existing tagline field first. If it’s there and just needs styling, that’s the fastest path.
If you genuinely need custom two-line text that isn’t a title and tagline pair, build it with two separate elements and CSS, not a forced line break.
Verify the mobile and RTL behavior. Check the sticky header height if one exists. Test with real, final copy instead of short placeholder text. A header edit that looks finished on a wide desktop screen with placeholder text is not the same thing as one that’s actually done.
