How to Customize Headers in WordPress (Plugins + Custom Code)

Become a WordPress Buff
Share on twitter
Share on email
Share on facebook
Share on linkedin

Do you see the smiling guy, “WP Buffs,” (our logo in other words) and navigation options above this blog post? This is the header of our WordPress site. It is a universal element that will be on every page and post of your site and often serves as your visitor’s first impression. It doesn’t matter if your site is a blog, an online store, digital portfolio, or something else altogether – the WordPress header is extremely important.

While keeping your website 99.9% secure and achieving loading times under 1 second are vital, your header is the very first thing people see when they land on your site. Making sure it gives your visitors a good first impression is a key to winning trust and being successful.

The newer default WordPress themes can offer beautiful header images to choose from. The Twenty Seventeen theme even has a featured video on its homepage. But if you want to make your website stand out, you must be able to create your own custom WordPress header. While there are many great WordPress tutorials out there, a few focus on the header alone. To help you out, we have gathered a list of ways to customize WordPress headers.

Our team at WP Buffs helps website owners, agency partners and freelancer partners customize WordPress headers. Whether you need us to manage 1 website or support 1000 client sites, we’ve got your back.

1. Custom WordPress Header Image

Many default themes in WordPress allow you to upload your very own custom WordPress header image. However, they must be of a particular dimension or size in order to work well. Newer themes allow you to resize, rotate, and crop your header image and logo, but there can still be limitations.

Here’s what we recommend. Using our own site as an example, say you wanted to use this background graphic for your header. You can download just about any image on a site by right-clicking on it. You will get a prompt asking you to “Save image as.” Once you have the header image downloaded on your own site, you can get its dimensions. This way you can resize your own preferred picture to fit the specs of a custom WordPress header image.

What if the Custom WordPress Header Image Won’t Download?

Some images and logos are hidden within the website’s code and do not give an option to save by the above method. Our header image actually falls into this category! There is a way to get them, however. Using the same image from our site and Safari, right-click on the image again. You will get an option to “Inspect.” Once you click on it, your browser will open a pane and highlight the selected element for inspection. Basically, you can see how the image was added. What you really want is to find an URL or hyperlink that ends in an image format. The most common are .jpg and .png, but there are others. Simply copy this link and paste into a new window. Now you will be able to save the image as described before.

Still not sure what size is best for a custom WordPress header image? If you’re optimizing your image for display on desktops or laptops, you should use an image that’s 1920 pixels wide. If your site is solely to be viewed by mobile device, you should use an image 480 pixels wide. Getting these dimensions right will make sure your header images load fast for your visitors.

Custom WordPress Header Image for Each Page

What if you want a different header image or logo color for each page on your WordPress site? You can use a free custom WordPress header plugin like WP Header Images. It allows you to add your own WordPress custom header images to each web page. It can also add custom header images for blog posts, custom posts, and even WooCommerce products.

Just in install the plugin and go to Settings > WP Header Images. It will then pull your menu navigation options. Simply choose the image you would like to go with each page. You can also watch a video tutorial by the creator on YouTube.

2. Using A Custom Header WordPress Plugin

To get even more control of your WordPress header, consider using a premium custom header WordPress plugin such as Popping Sidebars & Widgets. It gives you the option to create widgets or a little box that contains a specific section. They can include text, a form, social media options, and more. However, this plugin allows you to add these widgets to the header.

You can choose to push over your original header or even publish your widgets over it. The plugin works for mobile devices as well. The widgets can be visible on your choice of a page, template, post, category, tag, WooCommerce, BuddyPress, and even WPML languages. This plugin also allows you to publish widgets in your sidebar or footer.

3. How to Edit Header in WordPress Themes Using Code

All WordPress headers in themes have default settings made via code that come with them. However, they can be edited if you aren’t afraid to do a little copying and pasting while coding. To find the file that contains your header, go to your WordPress dashboard. Then go to Appearance > Editor. You will now see the files that make up your site. The header is contained within the file named header.php as underlined in the below screengrab. This file contains mostly the functions of the WordPress header, which we won’t go into here.

The file marked styles.css is the one you want. You can look for the word “header” in the file to see what the settings currently are. IMPORTANT NOTE: COPY AND PASTE YOUR ORIGINAL FILE ONTO A NOTEPAD LIKE PROGRAM BEFORE PURSUING IF CHOOSING TO EDIT THE FILES FOUND IN APPEARANCE > EDITOR.

But what we really want is to edit the header in your WordPress theme. One of the great things about WordPress is that more and more themes have a sort of live customizer. These allow you to edit your site in a left-hand pane while viewing your changes before you save. Many of these offer a custom CSS option. You can copy and paste many edits here using something like:

. header {
background: white;}

This would change the background color of the header to white. A hex color may also be used.

More Commands to Customize WordPress Header

You can also add a ton of other commands by replacing “background: white;” or adding a line under it. These include but are not limited to:

  • font: italic; – Changes the style of font to italic.
  • background-opacity: .5; Changes the opacity of the background. 0 is for a completely transparent background. 1 is for one that is not transparent at all.
  • font-size: 20px ; Changes the font size in the header to 20 pixels. You may change 20 to whatever number you choose.
  • padding: 20px; – Changes the padding, or space around the header, to 20 pixels. As above, you may change 20 to whatever you like. You can also specify what side the padding should only go to by adding “-left” to “padding” It also works for top, bottom, and right.
  • border: 20px – This creates a border around the header that is 20 pixels wide. As in the above, you can also add a dash and side to create a border for just the top, bottom, left, or right.
  • border-color: white; – This will change the color of your border to white. You may also use a hex color.
  • line-height: 20px; – This sets the spacing to match your font size. It can be useful if you are using a larger font, and it is overlapping on line breaks.

If your new code doesn’t work, try adding “!important” to the end of the command, as in “padding-left: 0 !important;”. If this still doesn’t work, your header may not be named “header.” Some WordPress themes use other names for their headers. These include masthead, inline-header, and others.

4. Changing Your WordPress Header Using Best Practices

Now that you know how to customize WordPress headers, you’ll need a great design to do so. Bland stock photos don’t always do it. One great tip is to use an illustration. These are great for grabbing the eye and pulling your visitor in. The below site is a great example of this. They even eliminated all other WordPress header elements and moved the menu to the sidebar. It is also great because they incorporate a matching background to make it look like the site is one big illustration.

When choosing images and logos, use ones that relate to you or your business. Yes, flowers are pretty, but if you are not a florist they can be misleading. If possible, use an image/logo of your own work, which can be great for photographers and illustrators. Even builders, industrial companies, and other corporations can use an image of one of their own products.

You can also even use a stock image and incorporate your own elements as in the below site. They cleverly put their name on a tag over curtains opening. This would be a great idea for a theater, actor, or any type of musician.

5. BONUS: Examples of Custom WordPress Headers

Check out this blogger’s choices for 14 Artistic WordPress Header Designs. There are some amazing examples here. While some of them may not be ideal for someone just starting out on WordPress, they are great for showing a designer what you would like.

This header is a great example of an artist using their own work, complemented by a banner with a clear CTA.

Even though this WordPress custom header is more old-fashioned, the mix of traditional flowers and modern space elements makes it stand out.

Notice how the menu looks like it is being spoken by the robot in this header,

Wrapping It Up

While no two WordPress headers should be the same, they should all have a similar purpose. They should show visitors what your site is about. Headers should have a clear point. They should blend in with the rest of the site. Headers should not be cluttered with too many prompts, popups, etc.

If you need assistance customizing your header or want to make the most of your WordPress site, contact us to see how we can help. You may also sign up for our newsletter to get our amazing tips.

Want to give your feedback or join the conversation? Add your comments 🐦 on Twitter.

SaveSave

SaveSaveSaveSave

SaveSave

SaveSave

Share this post:
Share on twitter
Share on email
Share on facebook
Share on linkedin
Did you enjoy this post? Subscribe for more

Our
Blog

No thanks, I'll tackle all my WordPress issues myself.

Schedule a private call with our team to discuss our 24/7 WordPress care plans for serious website owners or 24/7 white-label site management for agencies and freelancers

Honed and proven strategies we've used successfully 500+ times to help you sell your first care plans. Action steps you can implement in minutes.

No thanks, I can already sell as many care plans as I want.
How to Sell Your Very First Care Plans Cover

WP Buffs, LLC is committed to protecting and respecting your privacy, and we’ll only use your personal information to administer your account and to provide the products and services you requested from us. From time to time, we would like to contact you about our products and services, as well as other content that may be of interest to you. If you consent to us contacting you for this purpose, please enter your name and email address above.

 

You can unsubscribe from these communications at any time. For more information on how to unsubscribe, our privacy practices, and how we are committed to protecting and respecting your privacy, please review our Privacy Policy.

By clicking submit above, you consent to allow WP Buffs, LLC to store and process the personal information submitted above to provide you the content requested.

Finally, an email list that helps make WordPress simple and effective for you.

Speed & security optimization tips and detailed how-to guides with advice you can implement today.

No thanks, I already know everything about WordPress.
Speed checklist eBook cover

WP Buffs, LLC is committed to protecting and respecting your privacy, and we’ll only use your personal information to administer your account and to provide the products and services you requested from us. From time to time, we would like to contact you about our products and services, as well as other content that may be of interest to you. If you consent to us contacting you for this purpose, please enter your name and email address above.

 

You can unsubscribe from these communications at any time. For more information on how to unsubscribe, our privacy practices, and how we are committed to protecting and respecting your privacy, please review our Privacy Policy.

By clicking submit above, you consent to allow WP Buffs, LLC to store and process the personal information submitted above to provide you the content requested.

Case study eBook cover (Rigorous Digital)
Case study eBook cover (MEP Publishing)
How to Sell Your Very First Care Plans Cover

Finally, get your website 99.9999% secure and loading in under 1 second.

Our free eBooks and easy-to-follow checklists will have your website fully optimized in just a few hours.

No thanks, my website is as fast and secure as I want it.

WP Buffs, LLC is committed to protecting and respecting your privacy, and we’ll only use your personal information to administer your account and to provide the products and services you requested from us. From time to time, we would like to contact you about our products and services, as well as other content that may be of interest to you. If you consent to us contacting you for this purpose, please enter your name and email address above.

You can unsubscribe from these communications at any time. For more information on how to unsubscribe, our privacy practices, and how we are committed to protecting and respecting your privacy, please review our Privacy Policy.

By clicking submit above, you consent to allow WP Buffs, LLC to store and process the personal information submitted above to provide you the content requested.

How to Sell Your Very First Care Plans Cover

Read about how we increased Rigorous Digital's profit margin by 23% and helped remove all website issues for MEP Publishers and their 3 complex websites.

Case study eBook cover (MEP Publishing)
No thanks, I don't need more profit and I can tackle all my WordPress issues myself.
Case study eBook cover (Rigorous Digital)

WP Buffs, LLC is committed to protecting and respecting your privacy, and we’ll only use your personal information to administer your account and to provide the products and services you requested from us. From time to time, we would like to contact you about our products and services, as well as other content that may be of interest to you. If you consent to us contacting you for this purpose, please enter your name and email address above.

 

You can unsubscribe from these communications at any time. For more information on how to unsubscribe, our privacy practices, and how we are committed to protecting and respecting your privacy, please review our Privacy Policy.

By clicking submit above, you consent to allow WP Buffs, LLC to store and process the personal information submitted above to provide you the content requested.