How To

How to Have 2 Lines of Text in WordPress Header

Shashank Dubey
·4 min read
How to Have 2 Lines of Text in WordPress Header

In WordPress, the header is often the first thing a visitor sees, which makes it a critical piece of your site’s design. Most themes only give you room for a single line of text there, but sometimes you want more - a tagline under your site name, a business slogan, or extra context. Here’s how to get two lines of text into your WordPress header cleanly.

Why Use Two Lines of Text in Your Header?

A second line in your header can help in a few ways:

  1. Enhanced Clarity: Separating your site’s name from a slogan or additional information makes it easier for visitors to understand your brand’s message.
  2. Better Design Flexibility: It gives you more room for distinct typography and layout choices that help your header stand out.
  3. Improved SEO: A well-structured header with relevant text adds context about your site’s content.
Also Read: How to Restore WordPress Category

Steps to Add 2 Lines of Text to a WordPress Header

Step 1: Choose the Right Theme

Before you start, make sure your WordPress theme actually supports customizing the header area. Some themes have built-in options to add multiple lines of text, while others need custom coding.

  1. Check Theme Documentation: Review your theme’s documentation or settings panel to see if it offers an option to add multiple lines of text in the header.
  2. Consider a Theme Upgrade: If your current theme doesn’t support this, you might need a theme that does. Astra, OceanWP, and Neve are all known for flexible header customization.

Step 2: Using the Customizer

For many WordPress themes, the built-in Customizer is the easiest route:

  1. Access the Customizer: Go to your WordPress dashboard and navigate to Appearance > Customize.
  2. Find the Header Section: Look for Header or Site Identity. The exact name varies by theme.
  3. Edit Header Text: If your theme supports multiple lines, you’ll see fields for your main header text and a tagline or secondary line.
  4. Save Changes: Click Publish to save.

Step 3: Customizing the Header with Widgets

If your theme supports widgets in the header area, you can use that instead:

  1. Go to Widgets: Navigate to Appearance > Widgets in your WordPress dashboard.
  2. Select the Header Widget Area: Find the widget area designated for the header.
  3. Add a Text Widget: Drag a Text widget into the header widget area and enter HTML to format your text into two lines, for example:
    <div class="header-text">
    <p>Your Main Header Text</p>
    <p>Your Secondary Line of Text</p>
    </div>
  • Save Changes: Click Save to apply.
  • Also Read: What’s a Bold New Font Style Used in WordPress?

    Step 4: Custom CSS for Styling

    If the Customizer or widgets don’t give you enough control, Custom CSS will:

    1. Access Additional CSS: Go to Appearance > Customize and select Additional CSS.
    2. Add Custom CSS: Enter CSS to style your header text, for example:
      .site-header .site-title {
      font-size: 24px; /* Adjust font size as needed */
      line-height: 1.2; /* Adjust line height for spacing */
      }

      .site-header .site-tagline {
      font-size: 16px; /* Adjust font size for tagline */
      line-height: 1.4; /* Adjust line height for tagline */
      }

    Replace .site-header .site-title and .site-header .site-tagline with the actual class names your theme uses - browser developer tools will help you find them.
    Publish Changes: Click Publish to apply your custom CSS.

    Step 5: Editing Theme Files (Advanced)

    For more advanced users, you can edit theme files directly. This takes a basic understanding of PHP and HTML:

    1. Access Theme Editor: Go to Appearance > Theme Editor and select the header.php file.
    2. Modify Header Code: Locate the code that outputs the header text and add HTML to create two lines, for example:
      <div class="header-text">
      <h1><?php bloginfo('name'); ?></h1>
      <p><?php bloginfo('description'); ?></p>
      </div>
  • Save Changes: Click Update File to save.
  • Note: Editing theme files directly is risky and can break your site if not done correctly. Always back up your site before making changes.

    Getting a Clean Two-Line Header

    Adding two lines of text to your WordPress header is a small change that can meaningfully improve your site’s design and clarity. Whichever method fits you - Customizer, widgets, custom CSS, or theme file edits - choosing the right theme and applying thoughtful design principles will get you a header that communicates your brand clearly and holds up visually.

    If you run into trouble, your theme’s own support forum or a WordPress developer is usually the fastest way to sort it out.

    Interesting Reads:

    How to Change the Background Color of Your Header in WordPress

    Are WordPress Hooks Coding Mechanisms?

    How to Mask URL for Subdomain in WordPress

    Part of the Wbcom Designs family

    The all-in-one WordPress community stack

    Also ours: wbcomdesigns.comvapvarun.combrndle.com