Log In
This is a link that opens a form where the visitor can log in to their account. If they don’t have an account, they can create one.
Account
This is a link that lists all the links associated with the visitor’s account.
Shopping Cart
The WordPress header is the best place to add their WooCommerce shopping cart. This can work as a mini cart, which shows the content of their shopping cart, or as a link to the shopping cart page.
Language Option
If the website uses WPML, the language button lets them choose the language they want from a list.
Accessibility Options
The accessibility options usually change the website between light mode and dark mode, change the font sizes, etc.
Search Box
If your website has a lot of content, then you’ll need a search box somewhere. A search box in the header is easy to access and it stands out. You can place a search box or just a search icon that opens a search box when clicked. The icon is ideal when you have a lot of items in the header.
Banner
Banners are usually placed across the top of the header and they’re smaller and simpler, so they don’t distract from everything else. They’re great for highlighting a sale, presenting a CTA, etc.
Rotating Images
Rotating images, which swaps images like a slider, can draw attention to products, sales, etc. They’re especially useful for larger headers.
All the header elements must work together to be effective. They also need to match your website’s aesthetic. Design the header with purpose.
Here are a few things to consider when designing your website’s header.
The header generally takes the full width of the screen. It should be responsive to fit on any device. This requires stacking the elements and placing the navigation menu within a hamburger icon for phones. WordPress recommends using the wide-width option set to the same horizontal resolution as the rest of the site, with a maximum width of 1200 pixels so the header scales correctly and looks good on both high-res and small screens.
The height can vary, but they typically only take a small portion of the top of the screen, usually somewhere between 50-200 pixels total. Those with multiple rows tend to be around 60 pixels per row. The goal of the site is to promote its content and the header is only a tool to guide users to that content.
Placement of Elements
The placement of elements, such as the logo and links, has a great impact on usability and the user’s impression of your website. It should be easy to see and use.
Use the h1 tag so screen readers will understand that it’s a header. Use alt descriptions for links and images in the template file.
Keep it Uncluttered
The header should only contain the essential elements your website needs. Use the minimum number of elements as possible to make it easier to use.
Consider color theory when selecting backgrounds, links, buttons, and images. The header is usually a different color than the main body of the page, but it should work well with the site. This helps it stand out from the rest of the website while looking like it belongs.
Focus on contrast. Use light text with dark backgrounds and dark text with light backgrounds. If you use images, gradients, or patterns for the backgrounds, make sure the text is readable for all screen sizes. Use colors that work well together rather than colors that clash or cause eye strain.
Header fonts are usually bolder than the body content and often use colors that match the highlights of the website. Place the text apart from buttons and icons so they stand out. Don’t cover the important image features with text.
A header can remain on the screen at all times or scroll with the page. Having it remain in place gives users constant access to your navigation, but it also takes a portion of the screen’s design space. Which you choose is up to you.
Clickable vs non-Clickable
Make all the header elements clickable. The logo should link to the home page. All buttons, images, and text should link to something.
Hover Elements
Use hover to expand links, messages, etc. This can open larger menus, reveal the names of links that are represented by icons, and more.
Match Your Website
The WordPress header needs to be consistent with your website and look like it belongs. It’s the central point of navigation, so it needs to support and promote the purpose of the site.
Use Images and Patterns Sparingly
A standard-size header doesn’t need images or patterned backgrounds. Save those for extra-large or full-screen headers, or specialized sales banners.
There are several ways to customize the WordPress header including code, theme settings, and plugins. Here are the simplest options.
WordPress themes with full-site editing, such as the Twenty Twenty-Two and Twenty Twenty-Three themes, include a customizable Gutenberg header template. To edit the header, click Edit Site in the top menu bar.
