One of the most important visual elements of your website is represented by the header. Since it is placed strategically to the top, the WordPress header might be the first element a visitor notices when he visits your site.
This is the main reason why you should pay tremendous attention when designing it. Take a look at wpDataTables‘ website header.
The header dictates the rest of the website’s identity, which means you can customize it according to your website’s goals. The impact a header has on a visitor should be the factor that motivates you to invest more of your time in designing a good one.
This article represents a short guide on creating custom WordPress headers. Continue reading to learn more about this topic.
Table of contents
- Understanding the concept of WordPress header
- The importance of WordPress headers
- How can you add a custom header to your WordPress site?
- Plugins that you can use to create a custom WordPress header
- How to edit a WordPress header using code
- Other commands to customize your website’s header
Understanding the concept of a WordPress header
WordPress themes have a feature that is called Custom Headers. This feature means that the theme supports modifying the header image according to your own liking.
When this feature is enabled for the theme that you are using, you can replace the default header image with one that you choose. Custom headers are much more pleasing to the eye compared to default ones. This is why you should use the integrated WordPress edit header option.
To make it short, the WordPress header may influence a visitor’s decision to remain on the website or not. Because the average time spent by a visitor on a website is a couple of minutes, you need to use all possible options to stir their interest and maintain their attention focused on what your website has to say.
WordPress headers can be customized by adding text, widgets, and so on. Adjusting it according to your needs will have a visible impact in the long run.
The importance of WordPress headers
It is paramount to understand why you should add a WordPress header to your site. Many people avoid customizing their headers because they think it is not relevant for the visitors.
In fact, a customized WordPress header can dictate how your entire website is perceived. If the attention of a visitor is not stirred within the 10-20 seconds from the moment when he entered the website, he will leave it immediately, increasing the bounce rate.
A customized header will give you more control over what your website transmits. Modifying the WordPress header code exactly the way you like it makes the website much more flexible than it initially was.
Another habit that is not beneficial for your website is simply placing your tagline in the custom header of your WordPress site. Come up with something unique in order to generate a good impression, otherwise, your audience won’t be pleased with how it looks. There is also a multitude of website plugins that can help you with creating a custom WordPress header.
How can you add a custom header to your WordPress site?
Certain themes that WordPress provides come with widgets. These widgets can be selected from the admin panel. If the theme comes with a separate header widget, you can add it to your website and customize it the way you like.
For instance, you can add AdSense to your header by simply dragging the widget around and pasting the code. If your theme does not feature a widget option, you need to edit the header on your own. A few options are presented below.
“Header widgets are a quick solution that creates maximum design flexibility without slowing down your site,” says Jerry Low from Build This. “They are simple enough for anyone to implement and customize and enable Webmasters to quickly insert a call-to-action, advert or any other significant rich media element.”
First of all, you need to get to the WordPress header editor, which can be found under Appearance – Header. The Appearance ribbon can be accessed from the WordPress dashboard on the left side of your website. Another way to reach the editor would be accessing Appearance and then Customize, and Header Media. Keep in mind that the options may differ from one theme to another.
After reaching the editor, WordPress will open your site in a live demo. This way, you can observe the changes you make in real-time and decide whether you enjoy the change or not.
Once you entered the live preview mode, change the current header image or the previously uploaded one, with a new photo. To do that, you simply need to click on Add a new image. Clicking the button will open your Media Library from which you can choose photos that you either uploaded on your website before or photos that you can upload right now.
Choose the photo you want to use as your header image and crop it according to your needs. The dimensions must fit so that the header fits the website. You should only use high-quality images for this task.
If you want to have something really cool and well designed, like WebDesignerDepot had when it launched, it’s best to hire someone who does graphic design services on a regular basis.
Another quick option to change the header image would be clicking on Randomize uploaded or suggested headers. WordPress will choose one random image for your website’s header. This is a rapid method for people who want to change the appearance of their website on a daily basis.
Lately, videos seem to be much more popular than images. Header images are still great, but videos might replace them completely in future years. In order to add a video to your WordPress header, you have two different options. Before learning how to do it, you should know that all videos added to the header should be sound-free.
The first option is adding a .mp4 video from your own Media Library. The only video format that WordPress accepts at the moment is .mp4, so use a free online converter if you don’t have this format.
Reduce the file size as much as possible without losing too much quality. The size of your video should be around 2000×1200 px. After arranging your video, you can click on Select video and upload it. The results should now be visible on your website.
The second option is much simpler than the first. Using videos from YouTube only requires some copying and pasting. Once you find the video you want to use, you can copy the URL and paste it into the form you find on your WordPress header editor. The video will quickly load and you should be able to see the preview. See if it fits and – if it doesn’t – look for others that might look better.
Plugins that you can use to create a custom WordPress header
Using a WordPress header plugin can make your job much easier if you don’t know your way around editing code that well. Here is a list with the best plugins out there and a short description of their features:
Unique Header is a header WordPress plugin that you should definitely give a shot. You can add images from your WordPress media library or upload new ones.
The headers you upload can be sorted based on Tags and Categories, which is great if you want to change the look of your header quite often. The plugin has multiple features from which you can tremendously benefit if you don’t have a lot of coding knowledge.
You should know that in order to use Unique Header, you must find a theme that doesn’t have a built-in header functionality, which was described earlier in this article.
The features of Unique Header include a user-friendly interface, adding a header to a certain post or page, organizing the headers, enabling and disabling the headers and others. The plugin can be used by beginners as well.
For people who want to customize their headers on a more detailed level, Popping Sidebars & Widgets is definitely the best plugin. The plugin lets you create your own custom widgets.
The widgets can be text ones, form ones or social media ones. This is very convenient because you can simply drag the widgets in after you create them. You can publish your widgets on your actual header or change it entirely. The plugin allows you to publish widgets in other parts of your website, such as the sidebar or the footer.
The Header Footer Script Loader Plugin was launched by CreativeMinds. It is a special plugin, as you can manage different scrips with it as well. The premium version costs around $40 for one website, and $60 for one to five websites.
The plugin is also backed up by the support and regular updates. The plugin allows users to pre-load the scrips and styles, which give them full control over their looks and placement. The Header Footer Script plugin is known for improving the load times of the website by reducing the number of scripts used.
This plugin called Insert Headers and Footers is just as simple as the name says it. It is a very comprehensible plugin that gives users the opportunity to insert code directly into the header they want to change.
The plugin is a free one and is compatible with most of the themes that WordPress provides. It has very high ratings and it is appreciated by people who use it.
More than that, the plugin has an option to change all codes and scripts, regardless if they are created using Java or HTML. The plugin is very simple to set up, which makes it great for WordPress beginners.
To easily change the look of your WordPress header, download the free plugin and start playing around with it. Keep in mind that you can also add CSS blocks of code to customize the appearance of the header even more.
Header and Footer is a simple plugin that checks the code of your website’s headers and footers. You can edit the code by adding lines whenever in a very quick manner.
What is great about this plugin is that is can be accessed on mobile phones and it has shortcodes for rapid changes. The plugin can be obtained for free at WordPress.org and regular updates are being released for it.
You should also know that the plugin’s creators offer free support in case you encounter problems with it. It is a plugin that can be used comfortably from any device and by all users.
This is another very easy to use plugin. The WordPress header can be edited by adding your own blocks of code, by changing fonts and even styles.
The AddFunc Head and Footer Code plugin gives users the chance to edit code for specific posts. This is useful when you don’t want to edit the entire website. The plugin is also a free one and proved to be highly effective for this purpose.
The plugin is very friendly to Google Analytics and Facebook Pixel or other tracking services. The updates for this plugin are quick and responsive. If you want to track information on your website, this might be the best choice you have.
How to edit a WordPress header using code
In case you wonder how to edit the header in WordPress by using the code, you are in the right place. Header codes are not complicated and you will be able to modify them by simply copying and pasting some lines here and there.
A WordPress header comes with default settings that can be altered by adding other lines of code to them. In order to do it, you need to find the file which includes the header. Find the WordPress dashboard, select Appearance and then Editor. The files that are listed are the ones that compose your website.
Leave the header.php file untouched, as it represents the functions of the header and not the look of it. The look of the header is controlled by the styles.css file, which you want to search for and edit. Before changing anything, it is recommended to copy and paste the original file somewhere safe.
Another option to edit the WordPress header is via the theme you use. Most themes have customizing options. These options let you edit the site and view the changes you make live, to help you decide whether the changes are what you want or not.
Most themes have a CSS option. Using this option, you can paste lines of code here to edit the look of the site, in this case, the header. The command for changing the background color looks like this:
Other commands to customize your website’s header
Of course, you can change much more than just the color of the background. You can replace other lines of code to modify the appearance of the header. A few of these are:
- Changing the font style to italic: font:
- Modifying the level of opacity for the background (0 to 1):
- Changing the font size: font-size:
- Changing the padding, as well as the direction of the padding:
- Changing the border color to white or another hex color:
- Changing the spacing to avoid overlapping:
line-height: value px
Ending thoughts on this WordPress header guide
After understanding how important the WordPress header is for your website, you should take your time designing the perfect one. Since you have so many options when it comes to customizing it, you might want to analyze all of them and only pick the one that’s convenient for your website’s needs.
Hopefully, this guide clarified some of your queries about WordPress headers. In case you are not good at coding, you can always choose one of the plugins listed above.
If you enjoyed reading this article about the WordPress header, you should also read these:
- 504 error in WordPress: How to fix it
- 12 Tips for Creating a Successful WordPress Premium Plugin or Theme
- How to Leverage Browser Caching in WordPress? Steps to Follow