This guide walks you through how to create a WordPress header using built-in theme options, page builders like Elementor, or custom code. You’ll learn to add logos, menus, and styling for a professional look.
Key Takeaways
- Use your theme’s header settings: Most modern WordPress themes offer built-in tools to customize headers without coding.
- Elementor simplifies design: The drag-and-drop editor lets you build responsive headers visually, even if you’re not a developer.
- Child themes protect your work: Always use a child theme when editing header.php to avoid losing changes during updates.
- Mobile responsiveness matters: Test your header on phones and tablets to ensure menus and logos display correctly.
- Keep it clean and fast: Avoid cluttering your header with too many elements—focus on navigation and branding.
- Custom CSS adds polish: Small tweaks with CSS can improve spacing, colors, and hover effects for a professional finish.
How to Create a WordPress Header: A Complete Step-by-Step Guide
Your website’s header is one of the first things visitors see. It sets the tone for your brand and helps users navigate your site. Whether you’re building a blog, business site, or online store, knowing how to create a WordPress header gives you full control over your site’s appearance and usability.
In this guide, you’ll learn multiple methods—from using your theme’s built-in tools to advanced custom coding. We’ll cover everything you need to design a clean, responsive, and functional header that works on all devices.
Method 1: Using Your Theme’s Built-In Header Options
Most modern WordPress themes come with customization options that let you modify the header without touching any code. This is the easiest and safest method for beginners.
Step 1: Go to the WordPress Customizer
Log in to your WordPress dashboard. Navigate to Appearance > Customize. This opens the WordPress Customizer, where you can preview changes in real time.
Visual guide about How to Create WordPress Header
Image source: designed-4-u.com
Step 2: Find the Header Section
Look for sections like Header, Site Identity, or Header Settings. The exact name depends on your theme. For example, themes like Astra, GeneratePress, and Kadence have dedicated header panels.
Step 3: Upload Your Logo
Under Site Identity, click Select Logo and upload your logo image. Most themes recommend a transparent PNG file sized between 200×80 and 300×120 pixels for best results.
Step 4: Adjust Header Layout
Some themes let you choose between layouts like “Logo Left, Menu Right” or “Centered Logo.” Experiment with these options to find what fits your design.
Step 5: Save and Publish
Once you’re happy with the look, click Publish to make your changes live.
Pro Tip: If your theme doesn’t offer enough header options, consider switching to a more flexible theme. Check out our guide on how to apply a WordPress theme for a smooth transition.
Method 2: Creating a Header with Elementor
Elementor is a popular drag-and-drop page builder that also supports full-site editing, including headers. If your theme supports Elementor Header & Footer Builder or you’re using a compatible theme like Hello Elementor, this method gives you complete design freedom.
Step 1: Install and Activate Elementor
Go to Plugins > Add New, search for “Elementor,” and install it. Activate the plugin.
Step 2: Enable Theme Builder (if needed)
If you’re using Elementor Pro, go to Templates > Theme Builder. Click Add New and select Header.
Step 3: Design Your Header
Use Elementor’s widgets to build your header:
- Site Logo: Drag the Site Logo widget and link it to your homepage.
- Navigation Menu: Add the Nav Menu widget and select your existing menu or create a new one.
- Search Bar or CTA Button: Optional elements to enhance usability.
Step 4: Set Responsive Breakpoints
Click the responsive mode icon (phone/tablet) at the bottom of the editor. Adjust font sizes, padding, and menu layout for mobile devices. Many users abandon sites with poor mobile headers—don’t let that happen to yours!
Step 5: Assign Display Conditions
In Elementor Pro, set where your header appears—e.g., “Entire Site” or “All Pages Except Blog.” Click Publish to save.
Note: If you’re new to Elementor, our guide on how to create a WordPress theme with Elementor walks you through the basics.
Method 3: Editing Header.php with a Child Theme
For advanced users who want full control, editing the header.php file directly is an option—but only if you use a child theme. This prevents your changes from being overwritten when the parent theme updates.
Step 1: Create a Child Theme
If you don’t already have one, create a child theme. You can use plugins like “Child Theme Configurator” or follow WordPress’s official guide.
Step 2: Copy header.php to Your Child Theme
Go to Appearance > Theme File Editor. Locate header.php in your parent theme, copy its content, and paste it into a new header.php file in your child theme folder.
Step 3: Customize the Code
You can now modify the HTML and PHP. For example, to add a custom banner above the menu:
<div class="custom-banner">Welcome to our site!</div>Or replace the default menu with a custom one using wp_nav_menu().
Step 4: Add Custom CSS
Use the Customizer’s Additional CSS panel or your child theme’s style.css to style your header. For example:
.custom-banner {
background: #0073aa;
color: white;
text-align: center;
padding: 10px;
}Warning: Always back up your site before editing theme files. A single typo can break your site. For safer CSS changes, see our article on the best way to add CSS in WordPress.
Troubleshooting Common Header Issues
Even with careful planning, you might run into problems. Here’s how to fix the most common ones.
Header Not Updating?
Clear your browser cache and any caching plugins (like WP Super Cache or W3 Total Cache). Sometimes changes don’t appear immediately due to cached versions.
Menu Not Showing on Mobile?
Check your theme’s mobile menu settings. Some themes hide the menu behind a hamburger icon. If it’s missing, ensure your menu is assigned to the correct location under Appearance > Menus.
Logo Looks Blurry?
Upload a high-resolution image (at least 2x the display size). Use SVG for crisp scaling or a PNG with transparency. Avoid JPEG for logos with text.
Header Overlaps Content?
This usually happens when the header has a fixed position. Add padding to the top of your page content using CSS:
body {
padding-top: 80px; /* Adjust based on header height */
}Best Practices for a Great WordPress Header
A well-designed header improves user experience and SEO. Follow these tips:
- Keep it simple: Don’t overload with buttons, ads, or animations.
- Prioritize navigation: Make sure your main menu is easy to find and use.
- Use consistent branding: Match colors, fonts, and logo style to your overall design.
- Optimize for speed: Compress images and avoid heavy scripts in the header.
- Test across devices: Use Google’s Mobile-Friendly Test tool to check responsiveness.
Conclusion
Creating a WordPress header doesn’t have to be complicated. Whether you use your theme’s built-in tools, a page builder like Elementor, or custom code, you now have the knowledge to design a header that looks great and works perfectly.
Start with the method that matches your skill level. Beginners should stick to theme options or Elementor, while developers can dive into header.php. And remember—always use a child theme and test on mobile!
With a clean, functional header, your site will make a strong first impression and keep visitors engaged. Happy building!