WordPress header is the top section of a web page. It usually consists of an image showing the name and short description of the site, a logo, and contact information.
Thus, based on those elements, the primary purpose of headers is to provide basic information about a site. However, when used correctly, it can do so much more than that. Headers help you to build brand identity, distinguish you from other websites, and improve user experience.
If you just created a WordPress website, you might wonder what makes a good header and how you can customize it. Stay tuned and find out the answers to these questions.
Essential Elements of a WordPress Header
Headers are just like your house exterior — it’s the first thing people see before exploring your site further. What is more, it helps people to identify your site and shapes your first impression.
For that reason, the first essential element of a WordPress header is stunning imagery. You can opt for a photo, looped video, or an art illustration. Whatever you choose, make sure that the design represents your brand’s goals and services.
As an example, let’s take a look at Cleverbird Creative, a digital design firm from Chicago. When you visit the website, you’ll be greeted with a slider header that shows their highlighted projects.
That said, visual elements are not enough. You need to provide more information so people can recognize your brand and know what the website is about. Feel free to add your logo, brand name lettering, and slogan.
After the basics are covered, include navigational elements to provide a consistent browsing experience across your website. By adding important links here, visitors can find the information they’re looking for with ease.
As a rule of thumb, the menu should have links to About, Products, Services, and Contact pages. Nonetheless, go and explore what works best for your website. You can also show your social network icons, search field, language switcher option, and much more.
How to Customize Your WordPress Header
By default, what you can do with your header depends on the WordPress theme you’re using. The size, style, and elements are already set, so you need to adjust the given settings to your liking.
However, should you need more freedom, it’s possible to customize the header using WordPress plugins.
Using Your Theme’s Customization Options
Most themes allow you to customize your header with certain limitations. For example, some default WordPress themes like Twenty Sixteen and Twenty Seventeen give you the ability to change the header image.
Note that the header settings are usually found under the Appearance menu. If you can’t find it there, it is possible that the WordPress theme does not support custom headers. Look for the theme’s documentation for further details.
For this tutorial, I’m going to use Twenty Seventeen as an example:
- Open your WordPress dashboard and go to Appearance -> Header. You will see the Header Media page where you can add a header image.
- Choose whether to use a video or an image for your header. Click Select video to upload your video, or select the Add new image button to upload a new picture.
- Once uploaded, crop the image to match the given space.
- To add your site’s description on your header, leave the Header Media page and head over to Site Identity menu.
- Enter your site’s title and tagline into the corresponding fields. If you want to add a logo, click Select logo and upload the file.
- Once you’re finished, don’t forget to select the Publish button.
Installing Header Plugins
The header settings from WordPress themes are pretty limited. If you want to be more creative with your header and customize it as you like, I recommend installing some plugins.
Here are several top plugins you can use to customize your headers:
- Unique Header — enables you to create a custom header image for your pages, posts, and even categories and tags. However, before installing this plugin, make sure that your theme uses WordPress’ built-in custom header function. Otherwise, this plugin won’t work.
- Sticky Header on Scroll — if you want your header or menu to be visible all the time, then this plugin is the perfect option. You can change the sticky transition time, adjust the background color and opacity, and activate the fade or slide effect.
- Elementor Header, Footer, & Blocks — comes with built-in widgets to help you create a custom header layout. For instance, there’s a widget to insert a navigation menu, copyright notice, title, and tagline.
- HayyaBuild — a header builder that works with the Gutenberg editor. Thanks to this plugin, you can use videos as the header, set the size, choose the scroll effects, and much more.
A WordPress header is the first element that users see when visiting your site. Its main purpose is to show your brand’s identity and provides navigation for your website.
You can modify your header in two ways — using the theme’s header option or installing some helping plugins. The former is quick and easy, while the latter gives you more creative freedom.
After knowing what WordPress headers are and how to customize them, now go ahead and create a stunning header of your own.