One of the most underrated features in WordPress websites is the headers which is a crucial element in any given site. The header section normally has the logo of the site alongside the navigation menu of the site and at times even a search bar. Normally it is considered a universal element in every WordPress site since it appears on every page of a given website. For every site you visit, be it an online store, a news blog or a portfolio for that matter, you’ll notice its presence, hence the need to know how to get creative about it.
No matter how fast or slow your website loads, your site header is the very first thing/element most visitors see. For this reason too, one would probably not want to use a stock or common header for his or her site. It is always important to make the visitor pleased with what he or she sees at the first glance in order to retain him on your site. This is always a one chance thing therefore you need to make each and every element on your site appealing. The header defines the interface of the rest of the website, thus it implies that you can modify as per the priorities of your site. It is said that you only have around 10 to 15 seconds to keep a visitor on your site once they open it and i believe headers play a big role in this too.
With that said, in this article you’ll understand why the header is so important and how to create an appealing WordPress header for your visitors. We’ll also find out on the different ways on how to customize your headers by adding text, widgets changing colors and so on. A final design should implicate an identity of your entire site so as to retain visitors in the long run.
Table of Contents
What is a Custom WordPress Header?
A custom WordPress header is considered as a theme element found at the very top of a website page, that helps theme users to improve the look of their website through modification of its graphics and content. Modification of this header is done from the customizer section by default. Many of the themes have constraints on the sizes of the headers section. Certain designs are structured in such a way that there is just adequate width to place a logo, while others require you to just use the full width of the theme.
Most themes may facilitate further use of dynamic headers which can be extended or compressed in size based on the width of the web browser tab once opened. Custom headers can house as much content as possible depending on their width size and the amount of elements you intend to house.
Why are WordPress Headers Important?
It will be helpful to understand the reason why one needs to include a WordPress header to their blog. Some Wp users will shy off from changing their headers since they do assume they’re of less importance to their visitors. In comparison, take a website header to be similar to a book cover.
Apart from the major reason for appealing visitors, users can add call to action buttons in this section that will help site visitors to quickly and conveniently get what they want on your site. These elements will help both the site owners and the site visitors.
Other than that, WordPress headers do represent the branding of your site. This is achieved through placing logo images and also taglines below the logo. They give a brief description of what your site is all about.
With most of these points reflecting on the behavior of the visitor once he lands on your site, we can also say that headers may in a way affect how search engines review your site. In any case a visitor leaves between the 10 to 15 seconds, it affects your sites bounce rate by increasing it. This indicates to Google and other search engines that your site is not compelling enough and thus will not recommend it to other visitors. In the long run it will entirely hurt your sites ranking and in any case you had a potential post that you would have ranked for, it will be quite impossible for that to happen.
Lastly, for visitors to identify your site from others, you will have to present what makes it unique, which is why you will not have to use the default header. Generally, with an appealing header, one could start generating more traffic to his/her blog, win the interest of your clients to your target page, attract more customers, and gain control of their site with a positive impact at the end.
The “Don’ts” while creating WordPress Headers
- Do not use default site titles and taglines
This happens to be a rather common habit, but all in all it’s an easy mistake to make in case one has a new blog especially for beginners. Once you build a Blog site, you are asked to type in the title as part of the setup process. Site owners normally have this one done right – they should use the title they like to display on their site. However the site’s tagline defaults to “Just another WordPress blog.” If the visitor notices this tagline on your page, it implies to them that you are a beginner.
To fix this issue: head over to Settings- > General, from which you can change the title and tagline of your website. Update it to anything you want it to be in your header section and also note that it should not be long.
- Do not use standard fonts for your headers
Uniqueness is really key for retaining your visitors on the page. For those building their header for themselves which typically most bloggers would, at least in the beginning – most tend to type in their site’s title and tagline using the “standard” font, preferably Times New Roman or Arial.
Although there’s nothing particularly wrong with any of these fonts, they’re so popular that it’s always apparent to visitors that you have just opted for a default — rather than selecting a font that reflects your business site. To Solve this issue, try selecting some dozen or so different fonts and find out which one suits best for your header. Select the one that is easy and clear to read, as well as one with an appealing look.
- Do not clutter your site’s header
Many bloggers always tend to pack a lot of content into their headers, maybe with their images, their pet or their family which is way out of the properties of a good header. A cluttered header gives a poor first impression, much like a cluttered front cover on a published book. This renders the site to look a little informal, even though the graphics you pick are going to perform much on their own. Having a single image in your header rather than your logo is considered too much. Just like site sidebars and book covers, headers are better left clean and tidy. If you’re not so sure in your design skills, keeping it simple also ensures that your design looks elegant.
- Do not only optimize your header for desktop devices
Have in mind that most of your visitors will access your site via mobile devices normally more than 60%. For this reason you need to optimize your elements to have responsive design in your header section.
With Google having to also turn its attention to mobile-friendly sites, your entire page including the header section needs to be flexible to different screen sizes in order for it to secure higher ranking on search engines. Without doing this, a penalty may be charged against your site and definitely your rankings will be pulled down.
- Do not fail to align your header elements appropriately
Header elements should be aligned in accordance to the space available within the top of your site. Not aligning your elements makes your header look unprofessional since it may lead to too much space being used in terms of width and height thus the need of a grid. One can make use of the grids to ensure that your header elements are positioned appropriately. Well, one can use free tools that have grids such as canvas and also other inbuilt grids within plugins.
How to change headers using the default method
Normally, the features on your WordPress header will be determined by the theme you choose. Some of the default WordPress themes have the custom header feature which can be changed depending on what suits you best. However, in case your default WordPress theme does not have a customizable header activated, you won’t be able to modify the header. To assess whether your theme supports a customizable header, go to your WordPress admin panel and select Appearance. When you see the Header option in this section it means the theme allows custom headers.
Doing so will pull up a customization page which will require you to modify your header image.
Depending on your theme, you can even have a limit to the total image size. As shown from the image below, the regular Twenty Sixteen theme allows you to set an image of 1200 by 280 pixels with the ability to crop it in case you need it slimmed further. One can source out a high quality image from various online platforms for free such as Pixabay, Pexels, Gratisography among others.
How to Edit WordPress Header by Using Code
Most of the WordPress headers from various themes provide a default configuration built by means of code that comes with them. Even so, one can simply edit the header files in case you are familiar with PHP coding skills and if not, a simple copy and paste can be done to the code in case you ain’t familiar with its functions. In order to locate the file which has header functions for your theme, simply head to your WordPress dashboard, then go to Appearance > Editor or theme editor. In here, you will find the PHP and stylesheet files that make up your theme site. The header is included in the file called header.php as shown in the image down below. This file mainly includes the PHP functions of the WordPress header that are supported by your theme.
Most of the time, you don’t have to modify the code in the header.php file to change the header. It’s actually even not recommended to change the code in these files directly as you could break your site and your changes may be lost in future updates. However, for those in dire need of tweaking their headers styling using code, then the file named styles.css should be the one that you should make most editions on. You can simply search for the word “header” in the CSS file to find out what the configurations are set in your site’s header. Before that ensure you copy and paste the code you are to edit on a notepad to edit it and while copying it back to your theme paste it in your child’s theme CSS file.
How to build a WordPress Header Using Stax builder Plugin
Stax builder is a great front-end plugin for creating amazing visual headers by use of the drag & drop mechanism in WordPress. It allows site headers to be generated in a realistic and visual way. This helps you to put more emphasis on the appearance and styling in your website headers rather than just stumbling over the normal and default ways of creating WordPress headers behind-the-scenes.
Normally the Stax builder is designed to work with all themes and even if you decide to change from one theme to another, the Stax builder will retain the headers that you made with the previous theme and one can just apply them on the newly installed theme.
It comes with a couple of tweaks of how you can change your header appearance from changing the background, adjusting the border sizes, changing its typography, making headers to remain sticky after scrolling, and changing the sizing of your headers from boxed, full-width, custom height to custom width. One can also form different templates out of the various headers he/she has created using the above listed different configurations.
Steps to follow when creating a header with the twenty-twenty theme
Step 1: Stax Builder Plugin Installation
To install this plugin, simply head to your WordPress Dashboard >> Plugins >> add new and on the plugins page just search the term Stax builder. Alternatively one could simply download the plugin for free in the Stax plugin homepage then install it via plugin installer or upload and extract the zip file and drop the contents in the wp-content/plugins/ directory of your WordPress installation path. Upon installation of the plugin, simply activate it on the ‘plugins’ menu in WordPress. After activation it will redirect you to the main welcome front-end page. To enter the builder’s editing section simply hit the ‘Start Stax Builder’ button found at top-left side of the page.
Step 2: Access The Stax Editor Section
This will directly take you to the Live view which provides you with a chance to control how it functions while creating headers. It’s a free feature-rich plugin that helps you to design unlimited advanced headers that suit your site. It also has a quick workaround tour for all beginners who aren’t familiar with the process of creating headers.
Step 3: Create the zones to place your header
In the Stax builder, headers are normally built in specific zones that you choose but normally we recommend you to choose the top most part of your website as it fits to be the best section. To set or define your header zone, simply click on the plus icon element on the right side. This will display an image as shown below. Under default zones of the Stax builder, there are the header and the footer zones. You simply need to define your header zone by clicking on “RENDER”, where a page within the builder is loaded to choose your header zone. Once you are done click “add”.
Step 4: Edit Header setting and Add elements
First you can begin with editing your header settings by changing the type of header whereby there is the default, boxed or full width. Other settings include adjusting the width and height of your header, changing its background and enabling it to be sticky while scrolling.
When it comes to adding elements, all you need to do is simply click on the plus sign to add several elements to your header such as your logo, header menu and search bar depending on the size of your header. Every element is placed on a column container under which you can adjust the size and margin settings, for your header elements to fit. For instance in this case you can opt to shrink the width of the column that holds your site’s logo.
Step 5: Include your Site’s Menu Element to your header
As you did in step 4 while adding the logo icon (shown on label 4 on image above), select the other column container and edit its settings too. This time, do not shrink the width of the column as it is a menu element which requires maximum width in this header section. Additionally you can opt to match the background color of the menu box column with that of the theme. This can be done by going to the box column settings and choosing the background colour, in this case we set it to (#f5efe0) as shown below.
On doing so, click the plus icon and drag and drop the menu item to the second column. In the menu settings, you will need to select your header menu which should appear. In case you have not created any menu for your site you can head to the Dashboard >> appearance >> menus section. Under the menus page, simply select the “create new menu” option whereby it allows you to add several pages within your site. Once done, head back to the stax builder and select the menu you just created.
Under these menu settings, one can also change the type of menu to apply depending on the device your menu displays on. For all desktop devices we recommend setting the flex menu type whereas under the mobile and tablet devices set the burger menu type. For the tablet and mobile devices, the menu types can be set using the table and mobile view displays respectively on the Stax builder just on the left side of the Stax panel.
Step 6: Include a search bar in your header
A search bar is one of the major elements required in any given site and mostly found in the header section. To add a search bar in the header section simply add another column besides the menu section and click on the plus icon to drag and drop your search bar. Similarly, in this case you will need to shrink its width size for it to fit in different devices. This will help maintain the responsiveness of your header and definitely for the entire site. Also, remember to maintain the color of the column box to match the theme’s background color. After saving your editions on the stax builder, a final header section that would rhyme very well with the twenty twenty theme should look like the image shown below. You can also add another small header zone which would incorporate elements such as social media icons and contact information.
Below is a Video illustration on how to use the Stax Header Builder plugin:
Other Recommended Plugins for Creating Headers
By using header builder plugins for your website, this is a smart move to make creative headers rather than sticking with default theme headers. More so, other header plugins do come with an option to even create custom footers similar to what we’ve seen to the Stax builder. Even though header builders are not common when it comes to web design, it is a guarantee that having one within your site is a great plus. By having at least one, your site stands to be unique from other sites that use the same theme as your site.
More so, most of the header template plugins come with templates to configure your header with. This promotes more uniqueness for your site because you can keep changing to different header templates to see which fits best for your site. More visitors to your site will be impressed by the various designs that you use from time to time. Additionally header plugins have great compatibility with different devices ranging from desktops, tablets and mobile phones. This is done to ensure your site has a good responsiveness using any given display similar to what is seen in the Stax builder. With that said, we are going to recommend the best alternatives of header builders other than the above mentioned.
Developed by StylemixThemes, the pearl header builder plugin enables WordPress users to effectively create header layouts for their websites. The plugin is well equipped with a variety of features starting with the drag and drop feature which ensures users can easily and conveniently build and customize headers.
The design features range from the capability of applying animations, using images and logos and changing background colors as per what you see best fit for your site. It also allows the creator to choose the positioning of the header within his/her site and also specify which pages it should be shown. The plugin also supports all devices unto which the headers are displayed to enhance responsiveness.
This alternative plugin is available completely free of charge, and is deemed for use with WordPress version 4.6 and above.
This is a plugin meant only to customize your WordPress site header and it normally uses the default WordPress customizer interface. If you are one of those WordPress users who are not familiar with the builder processes or don’t want to get your hands tired while designing headers, then this plugin is for you. This plugin has a special feature that is not in other builders in that one can use a unique header in a specific page or post. It changes the default image from your site’s header and replaces it with a newly created header image. This feature can also work on specific categories and tags or general archive pages.
However in case your WordPress theme does not support the custom header alteration you can not be able to use the plugin. As seen earlier, the twenty twenty theme might not work with this plugin. We would however recommend using it in the Twenty Sixteen WordPress theme.
The plugin comes with handy features like the drag and drop functionality which keeps users away from technical header creation. It does support visual previews from different devices to maintain responsiveness across all displays. Unlike other header builders, this specific one is optimized for speed.
Once a visitor lands on your page, the header is able to load at a blazing speed as other contents in your page loads. This gives the visitors a glued attention to focus on the header for seconds with its premium design. The plugin also supports multilingual functionality to translate various elements placed on the builder which is very unique compared to other builders. Just like Stax builder, this plugin is compatible with any theme you use it on which is an added advantage. Even so, the plugin comes at a cost of only $29 from the codecanyon website here.
Wrapping it Up!
Users often get their first impression of a particular site from what the header looks like. We have included almost every variation of creating custom WordPress Headers with added functionality ranging from drag and drop, whether you want to have images/logos, sticky menu or floating menus and more on styling. We have also done illustration using our very own Stax header builder for users to get a clue on how easy and important custom headers are to build within your site.
Even so WordPress headers are meant to have a genuine purpose of showing visitors what your site is all about. Headers should have a clear point and should be appealing in order to retain visitors to the site for the first few seconds, as other content within your site loads. They should blend in with the rest of the site and should not be cluttered with too many elements.