How to Have 2 Lines of Text in WordPress Header
The header is usually the first thing a visitor actually looks at, before the hero image, before the menu, sometimes before they even scroll. A site title sitting alone often wastes that attention. Adding a second line, a tagline, a phone number, a short call to action, gives that prime real estate a second job without redesigning the whole header. This guide walks through four real ways to get two lines of text into a WordPress header: the Customizer’s built-in fields, direct HTML in those fields, editing header.php in a child theme, and a no-code plugin route, with actual working code for each rather than vague instructions to “add HTML.”
Why a second header line is worth the effort
A few common reasons come up again and again when site owners want this. A business wants its name paired with a tagline that actually explains what it does, since “Riverside Studio” alone tells a first-time visitor nothing, while “Riverside Studio, Wedding Photography in Austin” does real work. A local service business wants a phone number visible in every page’s header without dedicating a whole navigation slot to it. A store running a sale wants a temporary announcement line above or below the logo. And some sites simply want a secondary line for social proof, a review score, a “trusted by 10,000 customers” line, that reinforces credibility before a visitor scrolls an inch.
Whatever the reason, the method you should use depends mostly on your comfort with code and how permanent you want the change to be. The Customizer route is fastest and safest for a one-off tagline. Editing header.php gives the most control but needs a child theme to survive updates. A plugin sits in between: no file editing, but more flexible than the Customizer’s plain text fields.
Method 1: The WordPress Customizer (fastest, least flexible)
Every WordPress theme ships with a Site Title and Tagline field, and this is the quickest way to get a second line showing without touching any code.
- From your dashboard, go to Appearance > Customize, then open the Site Identity section (some themes label it Header or Header Settings instead).
- Enter your main header text in the Site Title field.
- Enter your second line in the Tagline field.
- Preview the result. Most themes display the tagline directly under the title automatically, which already gives you two lines without any extra work.
If your specific theme squeezes the tagline onto the same line as the title, or you need a manual line break inside a single field for some other reason, try inserting an HTML break tag directly into the Tagline field:
<strong>Riverside Studio</strong><br>Wedding Photography in AustinThis works on themes that don’t strip HTML tags from the tagline output before displaying it. A meaningful number of themes do strip tags for security reasons, in which case the break tag shows up as literal text (“<br>”) instead of an actual line break, and you’ll need one of the other three methods below instead.
Pros: no coding knowledge required, works in every theme for the basic version, changes are instant and reversible.
Cons: limited styling control, and the HTML break-tag trick only works on themes that don’t sanitize the tagline field.
Method 2: Direct HTML in the Customizer fields, with real markup
If your theme allows raw HTML in the Site Title or Tagline field (check by saving a test tag and previewing), you get more control than the plain break tag above. A common pattern wraps the title and a styled subtitle together:
<h1 class="site-title">Riverside Studio</h1>
<span class="site-tagline">Wedding Photography in Austin</span>The h1 tag carries your main title, and the span holds the second line so you can target it separately with CSS later, through the Customizer’s Additional CSS panel, for spacing or font-size adjustments:
.site-tagline {
display: block;
font-size: 14px;
font-weight: 400;
color: #666666;
margin-top: 4px;
}That small CSS block turns a cramped, same-line tagline into a properly spaced second line without editing any theme files. It’s a reasonable middle ground if editing header.php feels like overkill but the Customizer’s default output looks too plain.
Pros: real styling control without file editing, changes live entirely in the Customizer so they’re easy to undo.
Cons: not every theme allows HTML in these fields, and Additional CSS doesn’t survive a full theme switch, only a theme update.
Method 3: Editing header.php inside a child theme (most control)
For permanent, update-safe control over exactly how your two lines render, editing the theme’s header template inside a child theme is the right tool. Editing a parent theme’s files directly works until the next theme update silently wipes the change, so a child theme is not optional here if you want this to last.
- Set up a child theme if you don’t already have one. A plugin like Child Theme Configurator handles this without manual file creation, or you can build one manually with a
style.cssandfunctions.phpin a new theme folder. - Copy
header.phpfrom the parent theme into your child theme folder so you’re editing a copy, not the original. - Locate the code block that outputs the site title, usually inside a call to
bloginfo( 'name' )or a custom title function, and add your second line directly beneath it:
<div class="site-branding">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<p class="site-tagline"><?php bloginfo( 'description' ); ?></p>
</div>Using bloginfo( 'description' ) instead of hardcoding your tagline text directly into the template means the second line still pulls from the Tagline field in Settings > General, so non-technical site owners can update the wording later without touching code again. If you want a genuinely static second line unrelated to the tagline setting, like a permanent phone number, hardcode it instead:
<p class="site-tagline">Call us: (555) 010-2938</p>Then add matching CSS to your child theme’s style.css:
.site-tagline {
display: block;
font-size: 15px;
color: #555555;
margin-top: 2px;
line-height: 1.4;
}Pros: complete control over markup and styling, survives parent theme updates since it lives in the child theme.
Cons: requires basic PHP and template comfort, and a typo in header.php can break your site’s header display until it’s fixed, so always test on a staging copy first if you have one available.
Method 4: A no-code plugin, using WPCode
If editing template files isn’t something you want to do, WPCode (the plugin formerly known as Insert Headers and Footers, rebranded in 2022) lets you inject custom HTML and CSS into your site without touching a single theme file.
- From your dashboard, go to Plugins > Add New, search for WPCode, install it, and activate it.
- Go to Code Snippets > Header & Footer inside the WPCode menu.
- In the header section, add a small custom snippet targeting your header area. Since every theme structures its header markup differently, the more reliable version of this method uses CSS to style an existing tagline element rather than trying to inject new HTML blindly into an unknown header structure:
<style>
.site-description {
display: block;
font-size: 14px;
color: #666666;
margin-top: 4px;
}
</style>Pair that with a tagline already set in Settings > General, and most themes will now display it on its own visually distinct line instead of crowding the title. If your theme doesn’t output a tagline element at all, WPCode also supports inserting a small snippet of custom HTML directly before or after specific hooks, though that requires knowing your theme’s hook names, which vary theme to theme and are worth checking in your specific theme’s documentation.
Pros: no file editing or child theme setup required, changes are centralized and easy to disable.
Cons: less predictable than editing header.php directly, since it depends on your theme already outputting an element you can target or hook into.
Method 5: block themes and the Site Editor
Everything above assumes a classic, PHP-template-based theme, which is still what most existing WordPress sites run. But if your site uses a block theme, one built around theme.json and full site editing rather than header.php, the process is different and generally easier, since you’re editing the header visually instead of touching code at all.
- From your dashboard, go to Appearance > Editor to open the Site Editor.
- Select the Header template part from the sidebar, or click directly into the header area if you’re already viewing a template that includes it.
- Click on the Site Title block. Most block themes let you add a paragraph block directly beneath it inside the same group, which becomes your second line without any HTML at all.
- Style that new paragraph block using the block-level typography and spacing controls in the right-hand panel, adjusting font size, color, and top margin until it reads as a clear second line rather than a cramped afterthought.
- Save the template. Since this lives in the Site Editor rather than a theme file, it survives theme updates automatically, the same protection a child theme provides for classic themes, without requiring you to set one up.
This is genuinely the easiest method available if your theme supports it, since there’s no code involved at any step and no risk of a typo breaking the header display. The catch is that it only works if your active theme is a block theme. Most themes built or updated for the block editor era support this, but a number of long-running classic themes still don’t, in which case Methods 1 through 4 remain your options.
A quick note on SEO and accessibility for a two-line header
A second header line is a small change, but it’s worth getting the semantics right rather than just the visuals. Search engines and screen readers both pay attention to heading structure, so avoid wrapping both lines in separate h1 tags, a page should have exactly one h1, typically the site title or, on individual posts and pages, the page’s own title depending on your theme’s structure. Use a span, p, or small tag for the second line instead of a second heading tag, which keeps the document outline clean for both search engines and assistive technology.
Contrast matters more than people expect for a tagline specifically, since site owners often style it in a lighter gray to visually de-emphasize it relative to the title, and that lighter color can drop below accessible contrast ratios against a light background. Run the final color combination through a contrast checker rather than eyeballing it, particularly if the tagline carries any actual information, like a phone number, rather than being purely decorative.
Troubleshooting the problems people actually run into
The line break isn’t showing up. This is almost always a theme stripping HTML tags from the Tagline field for security. Check your theme’s documentation for whether it allows HTML there, or switch to Method 3 or 4, which don’t depend on that field being unfiltered.
The two lines don’t fit inside the header without overlapping the logo or menu. This is a spacing issue, not a text issue. Increase the header’s height slightly in your theme’s layout settings, or reduce the tagline’s font size with the CSS snippets above. Avoid shrinking the tagline below about 12px, since it becomes hard to read on smaller screens at that point.
It looks fine on desktop but breaks on mobile. Wrap your tagline CSS in a media query so it can shrink or hide entirely below a certain screen width rather than forcing two full-size lines into a cramped mobile header:
@media (max-width: 480px) {
.site-tagline {
font-size: 12px;
margin-top: 2px;
}
}
The change disappeared after a theme update. This happens when the edit was made directly to the parent theme’s header.php instead of a child theme. There’s no fix after the fact except redoing the edit in a proper child theme, which is exactly why Method 3 above insists on one from the start.
The second line shows up but pushes the logo or navigation out of alignment. This usually means the header’s container has a fixed height that wasn’t sized for two lines of content. Check for a fixed height value on the header container in your theme’s CSS and either remove it in favor of a min-height, which lets the container grow to fit its content, or manually increase it to accommodate both lines plus normal padding. Fixed-height containers are one of the most common causes of an overlapping or clipped second line, and it’s rarely the tagline’s own CSS that’s actually at fault.
Which method should you actually use
For a quick tagline that doesn’t need special styling, start with Method 1. It takes two minutes and needs no code at all. If your theme strips HTML from that field or you want real spacing and font control without editing template files, Method 2’s CSS approach through Additional CSS is the next step up, still fully reversible. Reach for Method 3, the child theme edit, only when you need the second line hardcoded and update-proof, like a permanent phone number that has nothing to do with your Tagline setting. Method 4 is the right pick specifically when you’re not comfortable with any file editing at all but Method 1 alone isn’t giving you enough control over how the second line looks.
None of these methods are mutually exclusive test runs either. It’s entirely reasonable to start with the Customizer to confirm the wording and placement you want, then move that same text into a child theme edit once you’re confident it’s staying permanently, so it survives every future theme update without another round of guesswork.
One last thing worth deciding before you touch anything: what the second line is actually for. A tagline meant purely to describe the business reads and behaves differently than a phone number meant to drive calls, or a temporary promotional message meant to disappear after a sale ends. Treat permanent, brand-level text as something worth the child theme investment, since it should survive theme changes cleanly. Treat temporary or seasonal text as something better handled through the Customizer or a plugin, precisely because those are faster to edit and remove again once the promotion is over. Matching the method to the actual lifespan of the content saves a surprising amount of rework down the line.
Frequently asked questions
Will adding a second line to my header slow down my site?
No, not in any measurable way. A second line of text, whether added through the Customizer, a child theme edit, or a plugin like WPCode, adds a trivial amount of HTML and CSS. It won’t show up in any real performance audit. The one exception is if you use a heavy plugin purely for this one small task when a simple CSS snippet would have done the job, since plugin overhead comes from everything else the plugin loads, not from the specific feature you’re using.
Can I use a different font for the second line than my site title?
Yes, and it’s a common way to create visual hierarchy between the two lines. Once your second line has its own CSS class, whether from Method 2, 3, or 4 above, you can set a completely different font-family, size, weight, and color on it independent of the title. Just make sure any custom font you load is actually available to the browser, either through your theme’s existing font stack or a properly enqueued web font, rather than referencing a font name that silently falls back to a generic system font.
Do I need to know PHP to add a second header line?
Not necessarily. Methods 1, 2, and 4 above require no PHP at all, just the Customizer’s built-in fields, CSS, and a plugin’s settings page. PHP only becomes relevant with Method 3, editing header.php directly inside a child theme, which is also the method that gives you the most permanent, precise control. Pick based on how much control you actually need rather than defaulting to the code-heavy option out of habit.
Why does my tagline disappear when I switch themes?
The Tagline field itself, set in Settings > General, persists across theme switches since it’s stored independently of any theme. What disappears is any custom styling or placement you applied through Additional CSS or a child theme, since both are tied to the specific theme you set them up in. If you switch themes, expect to redo the visual styling, even though the underlying text survives.
Getting a two-line header that actually looks intentional
A second header line only helps if it looks designed rather than accidental. Keep the two lines visually distinct, a different size or weight for the tagline than the title, so it reads as a hierarchy rather than two competing headlines. Test the result at a phone-sized viewport before calling it finished, since a header that looks balanced at desktop width frequently crowds or overlaps at 375px if nobody checked. And whichever method you pick, from the two-minute Customizer tweak to a full child theme edit, the underlying goal is the same: give visitors a second piece of useful information in the header without making it feel cluttered or forced.
Interesting Reads
10 Best WordPress Header Plugins
How to Change the Background Color of Your Site Header in WordPress
