WP Buffs Blog |

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

Your website’s security and speed are critical areas to focus on. However, another way to make a positive impression on your visitors is by refining one of the elements they see first when they land on your site – your header.

If you want your website to stand out, it helps to know how to create your own WordPress custom header. There are a variety of WordPress tutorials out there, but few focus solely on editing this important element. Fortunately, there are multiple methods you can use to accomplish this goal.

In this post, we’ll explain what a header in WordPress is, where to find it, and how to create a WordPress custom header both with and without a plugin. We’ll finish up by discussing some best practices and answering Frequently Asked Questions (FAQ). Let’s get started!

In This Article 👓

Our team at WP Buffs helps website owners, agency partners and freelancer partners keep their sites in prime condition, including creating custom headers. Whether you need us to manage one website or support 1,000 client sites, we’ve got your back.

What Is a Header in WordPress? 🤔

The header of a WordPress site is a universal element that appears on every page and post. Using our WP Buffs website as an example, the header is the orange bar located along the top of this page, as well as all the features contained within it:

Considering its prominent placement, the header often serves as your visitors’ first impression of your site. It’s also where critical information and Calls To Action (CTAs) go. For instance, in the example above, you may notice our logo, key menu links, and Book a Call button.

It doesn’t matter if your site is a blog, online store, portfolio, or something else altogether – your WordPress header is extremely important. Many themes come with features that enable you to add your own styling, text, or image to the header, which is known as a WordPress custom header.

Where Is the Header in WordPress? 🧭

Of course, the header is located at the top of your site (on the front end), whereas the WordPress footer is the section that appears at the bottom. However, finding the header file on the back end may be confusing if you’re not familiar with WordPress.

It also depends on the theme you’re using. For example, you can typically locate the file that contains your WordPress header by navigating to Appearance > Theme Editor:

Here, you’ll see all the files that make up your theme. The header functions are contained within the header.php file, while the code for its style and appearance are located within the style.css file:

However, with some other themes, such as Twenty Seventeen, you can find your header by navigating to Appearance > Header from your WordPress dashboard:

This will bring you to the WordPress Customizer, where you can find dedicated sections for changing your WordPress header media:

The best way for you to access or edit your WordPress header varies depending on a few factors. More specifically, it will be based on your experience level, the change(s) you want to make, and the theme you’re using.

How to Customize Your Header in WordPress (3 Methods) 🛠

Now that you understand a little bit more about WordPress headers, it’s time to explore the various options for customizing yours. Let’s take a look at three methods for doing so:

  1. Use the Customizer
  2. Edit Your Theme’s Code
  3. Install a WordPress Header Plugin

1. Use the Customizer

As we just mentioned, one of the ways you can personalize your WordPress header is by using the WordPress Customizer. Depending on your theme, you might be able to do this by going to Appearance > Header.

However, with most themes, you’ll access it by navigating to Appearance > Customize. Within the Customizer, you can switch out your header image, as well as edit your site title and tagline (Note: In some themes, these elements will be in the Site Identity tab):

The benefit of using the Customizer is that you don’t need to touch any code if you don’t want to. You’ll also be able to see your changes in the live preview panel to the right.

2. Edit Your Theme's Code

Another option you have for customizing your WordPress header is to directly edit the code of your theme’s files. This offers more control over the customizations, but obviously requires some coding knowledge. Before getting started, it’s smart to create a child theme.

To edit your header’s code, navigate to Appearance > Theme Editor, then open the style.css file:

You can add or remove code within the Site Header section of this file:

Commands you can use include, but aren’t limited to:

  • font: italic; This code changes the font style to italic.
  • background-opacity: .5; This changes the opacity of the background (0 is completely transparent and 1 is not transparent at all).
  • font-size: 20px; Use this to modify the font size of the header text (change the px to whatever you like).
  • padding: 20px; You can use this to change the padding or space around the header (change 20 to whatever you like).
  • border: 20px; This creates a border around the header.
  • border-color: white; This changes the border color to white (you can also use a hex color).
  • line-height: 20px; Use this to set the spacing to match your font size, which can be useful if you are using a larger font, and it’s 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 “masthead”, “inline-header”, or other labels instead.

You can also make changes to your header.php file if you feel it’s necessary. However, this code deals with functions rather than styling. Since most people who want to customize their headers are more interested in updating their sites’ looks than what’s happening behind the scenes, you’ll likely focus most of your attention on its CSS.

3. Install a WordPress Custom Header Plugin

An easier way to customize your WordPress header is with a plugin. This method is recommended if you’re not comfortable editing your site’s files directly.

There are a handful of tools available, depending on your experience level and the edits you want to make. A free and popular plugin is Insert Headers and Footers:

Once it’s activated on your site, you can locate it under Settings > Insert Headers and Footer:

Next, within the Header section, you can add code for anything you want to add or remove from your header:

Scripts you put here will automatically be added to the ‘head’ tag of your WordPress site. When you’re done, click on the Save changes button.

Another option is to use a premium custom header WordPress plugin such as Popping Sidebars & Widgets:

This plugin lets you create widgets (text, forms, social media icons, etc.), which you can add to your header. If you’re looking to avoid code altogether, this solution may be ideal. It also enables you to customize your sidebar and footer areas.

To get started with the Popping Sidebars & Widgets plugin, you can preview a demo on the OTWthemes website. If you want to test it before purchasing the premium plugin, you can also sign up for a free trial.

Custom WordPress Header Best Practices 🏅

Once you know how to customize WordPress headers, you’ll need to figure out the design you want to use for yours. To make the most of it, there are a few best practices and tips you can follow:

  • Try using an illustration. Bland stock photos can be dull and boring. They may even make your site look generic and unreliable. Therefore, you might want to consider using an illustration to infuse some creativity into your header and make it stand out.
  • Choose images that fit your branding. When choosing images and logos, use ones that relate to you or your business. Consistency is key in branding. Sure, flowers are pretty, but if you’re not a florist, they can be misleading.
  • Use your own images when possible. If and when possible, incorporate your own custom work and images. This is a no-brainer for artists, designers, and photographers. However, even builders, industrial companies, and other less visually-driven businesses can feature an image of one of their own products.

If you’re looking for ideas of how to customize your WordPress header, it might help to draw some inspiration from other websites. We recommend checking out these 14 Artistic WordPress Header Designs.

Frequently Asked Questions About WordPress Custom Headers 📝

Hopefully, at this point, you have a solid grasp of how you can edit or create a WordPress custom header. However, there are still some FAQs we receive that we want to address here.

 

Many WordPress themes only enable you to modify the website title and tagline from the Customizer. However, if you want to add more text to your WordPress custom header, you can do so by editing your header.php file.

For example, you can add the following code to your file, which will add a text box to your WordPress header:

<div class="custom-header">
<div class="custom-header-media">
<?php the_custom_header_markup(); ?>
</div>
<div class="custom_textbox">
<div class="custom_textbox_content"><p>This is where you can put your header text.</p></div>
</div>

As we discussed in this post, you can edit the header.php file directly from your dashboard via the Theme Editor. If you want to add text without editing your theme files, you can use a plugin such as Insert Headers and Footers or Popping Sidebars & Widgets (which we introduced earlier).

Many default themes in WordPress let you upload your own WordPress header image via the Customizer. However, if your theme doesn’t offer this option, or you want to use a different header image for each webpage, you can also use a plugin such as Unique Headers or WP Header Images.

These plugins enable you to add your own WordPress custom header images to each web page. They can also add custom header images for blog posts, custom post types, and even WooCommerce products.

Wrapping Up 🎉

While no two WordPress headers should be the same, they all serve a similar purpose. Effective headers showcase to visitors what your site is about and make a positive first impression. This is why we recommend customizing yours to suit your specific goals and branding.

As we discussed in this post, there are three main methods you can use to create a WordPress custom header:

  1. Use the Customizer, which is a beginner-friendly option that doesn’t require any coding.
  2. Edit the header code of your WordPress theme, which offers more control but requires CSS and PHP skills.
  3. Install a WordPress header plugin such as Insert Headers and Footers, Popping Sidebars & Widgets, or WP Header Images.

Customizing your WordPress header can help boost its appearance and usability. However, the more sites you have, the more tedious this becomes. At WP Buffs, we offer Care Plans and white-label solutions that can make site management, maintenance, and customizations remarkably easier. Check them out today!

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

If you enjoyed this article, then you’ll really enjoy the 24/7 WordPress website management and support services WP Buffs’ has to offer! Partner with the team that offers every aspect of premium WordPress support services.

From speed optimization services, to unlimited website edits, security, 24/7 support, or even white-label site management for agencies and freelancers, our expert engineers have your back. Bring us in as part of your team to make your site Bufftastic! Check out our plans

Curious about what we do?