As an experienced WordPress user with over 15 years designing websites, I often get asked: what exactly is the header?
The header may seem simple, but it‘s one of the most important parts of any WordPress site. This in-depth beginner‘s guide will teach you everything you need to know.
Contents
Header Basics: What Does It Do?
The header appears at the top of every page on your WordPress site. It typically includes:
-
Your logo – For branding and helping visitors associate your site with your business name.
-
Site title – Usually displayed next to or below the logo. Reinforces what your site is about.
-
Navigation menu – Lets visitors move between pages and find what they need. Most headers feature a primary menu.
-
Search bar – Allows visitors to search your content. Include in header for easy access on all pages.
-
Tagline or slogan – Summarizes what your brand promises. Often used alongside the logo or site title.
-
Call-to-action buttons – Encourage visitors to convert by signing up, subscribing, contacting you, etc.
-
Social media icons – Make it easy for visitors to follow you on social networks.
According to heatmapping studies, anything "above the fold" (visible without scrolling) gets high visual attention. That‘s what makes the header so valuable.
With careful header design, you can reinforce branding, boost navigation, and prompt conversions – things that impact user experience and your bottom line.
Where Does the Header Appear in WordPress?
The standard WordPress layout includes:
-
Header – Top section with branding, nav, and key info.
-
Content – Main body area where your posts and pages display.
-
Sidebar – Narrow column for extra widgets, if using a sidebar layout.
-
Footer – Bottom section for less important elements like copyright text.
The header stays fixed at the top, even when visitors scroll down through long pages. This persistent visibility means it serves as an ever-present guide.
![Diagram showing fixed header at the top of a page]
In the HTML, the <header> element wraps around the header section. The code lives in header.php, the main header template file.
Changes to header.php will alter the header across your entire site. When dealing with a multi-section header, additional template files may come into play.
The menu portion is powered by WordPress navigation menus. You can create menus with pages, posts, categories, etc. and assign them to menu areas defined by your theme.
Customizing Your Header Like a Pro
Many themes allow configuring basic header options like:
Adding a header image – For visual impact. Display your branding, products, or people.
Changing colors – To match your brand or create the desired mood.
Altering font sizes and styles – Improving readability and visual hierarchy.
Editing text – Tweaking slogan, titles, buttons, etc.
Configuring menu and widget locations – Changing what appears and where.
For example, the Customify theme offers these easy header customizations:
![Gif showing header options in Customify theme]
But for advanced options like:
- Adding slideshows or video backgrounds
- Displaying different headers per page
- Rearranging elements
- Integrating new functionality
You‘ll likely need to edit header.php yourself. This allows changing the underlying HTML structure.
Just be sure to use a child theme before modifying theme files! That prevents your changes being overwritten by updates.
There‘s also a thriving ecosystem of header-focused plugins for enhanced functionality:
-
Custom Header by WPWhale – Additional header design options.
-
Swift Header by Swift Ideas – Interactive elements and conditional display.
-
Display Widgets by Display Widgets – Put widgets in your header.
-
Show Current Template by WebFactory Ltd – Debugging tool to reveal current template files.
Designing the Perfect Header: 8 Pro Tips
Follow these best practices for creating headers that convert:
1. Make your logo clearly visible – It should appear front and center and at an appropriate size.
2. Include clear navigation links – Make it easy for visitors to find what they need.
3. Use appealing, high-quality images – Showcase your brand. Graphics should reinforce your message.
4. Limit header height – Avoid excessive scrolling. Headers over 150 pixels tall see reduced engagement.
5. Align elements thoughtfully – Use white space, proximity, and visual weight to establish information hierarchy.
6. Keep text short and scannable – Long headlines and taglines are hard to read. Use keywords that communicate value.
7. Check mobile responsiveness – Headers should adapt to fit and function on any device.
8. Always test with real users! – Use heatmapping and user testing tools to improve header effectiveness.
Remember, first impressions matter. An optimized header encourages visitors to keep exploring your amazing content!
Hopefully this guide has given you a solid understanding of headers in WordPress. Let me know if you have any other questions!
