WP Thinker

The WordPress Playground

How to Edit Header in WordPress

Edit WordPress Header

Decided to alter the top part of your WordPress website, e.g., header? Great! Headers can be used to improve the functionality of your website, with quick access icons, text, or drop-down menus. Also, some services such as Google Analytics require you to add code in the header for successful integration. In contrast, adding a logo to the header of your WordPress website can capture the visitor’s attention. Nielsen Norman Group discovered that you only have about 10 seconds to keep the visitor engaged enough not to leave. For those and plenty other reasons, you should learn how to edit header in WordPress, and quickly.

1. Edit header in WordPress through the Customize menu

This is the easiest way to modify the header in WordPress. As such, it is limited to basic tasks and intended for minor changes. Unfortunately, this isn’t available with all WordPress themes you can install, although the most popular ones support it. Also, advanced users can still take advantage of the Additional CSS option in the menu, allowing them to change font type, size, and position, as well as the position of the header image(s) if the theme allows it. Here’s how editing a WordPress header via Customize menu works:

  1. Access the WordPress Section.
  2. You can follow either of the two steps below:
    1. Click on Appearance > Customize from the main WordPress sidebar. Tip. On some themes, you can select Header under Appearance directly.
    2. On your website homepage, click on Customize in the line menu at the top.
  3. The menu will appear on the left side of your website pages.
  4. Depending on the theme, find the Header option, usually containing options such as Header Image, Header Media, Site Title, Header Main Area, or Tagline. On some themes, the Header option is named Site Identity or has a Site Identity option inside. If you’re using a website builder plugin, it might be named Header Builder.
  5. Make necessary changes. They’re self-explanatory, no coding is required, and you can see a live preview. Website builders even allow you to import header templates.
  6. Don’t forget to click on the Update or Publish button after you’re done.

2. Edit header in WordPress manually

This option exists on all WordPress websites, although in rare cases, the files don’t use the naming structure. We’ll warn you right away. Don’t experiment unless you know HTML and CSS, and PHP (only for adding additional functions to the header). Although WordPress does a code check when you update the file, even a small code error can be devastating. Also, you shouldn’t edit the files mentioned below with your main WordPress theme. That’s because your hard work will be wiped with the next theme update. Instead, you should install a child theme in WordPress, and modify its files. If you acknowledge that, here are 3 steps to modify the header within the WordPress theme’s code:

1. Pick a method

To begin modifying your WordPress theme code, you must pick a method:

1. WordPress Admin Section

It’s both the simpler and more convenient method. In the main WordPress left-hand menu, click on Appearance > Theme Editor. Click on the links on the right-hand side to open the files mentioned below. In the top right corner, you can switch between different themes you have installed. The big drawback to this method is that there’s no Undo button besides immediately pressing Ctrl + Z or Control + Z. Make a backup copy of the files to have a reference and revert changes if needed.

2. FTP

Harder method for beginners, but superior for advanced users who are familiar with using a text editor. First, access your WordPress website via FTP. Then, find the files mentioned below inside root/wp-content/themes/child-theme-name. The root folder might be named differently (public_html, for example) on your hosting, but always contains the aforementioned files. Here are two quick instructions:

  • If you’re using an FTP client, right-click on the file, then select Open With > select one of the available Text Editors.
  • If you plan to access your website with an FTP web app in cPanel, right-click then select View/Edit.

2. Find the style.css file

This file contains the stylesheet (CSS code) for your entire WordPress theme. For that reason, you need to find a Site Header section. Use Ctrl + F on Windows and Linux, and Control + F on Mac to search for it. It’s usually marked clearly, with /* in front of the line to signify a comment, not an active code. If it isn’t, which is unlikely, look for mentions of site-header, masthead, header-main, inline-header, etc. When you finish, click on the Update File button at the bottom.

3. Find the header.php file

Most people stay away from this file unless they understand PHP and are familiar with terms such as “WordPress hook” or “theme hook”. The steps are identical to the ones above, except that, as the name suggests, the file is solely dedicated to header functions. Keep in mind, any code you add must be inside the <head> and </head> tags.

3. Modifying WordPress header with a WordPress plugin

Installing a WordPress plugin can slow your website down, true. But compared to the benefits you’ll get, it’s inconsequential. This method allows you to skip creating a child theme or editing any theme files directly. The plugin will also pinpoint errors and carry your code over whenever you update a theme, which doesn’t normally happen. Furthermore, your custom code will be inside one text field instead of buried between hundreds of lines of text. With that said, we’re big proponents of the Insert Headers and Footers plugin. We described its use in method 4 of our “how to edit footer in WordPress“. The procedure is identical except that in step 5, you should paste the code snippet to the Scripts in Header text field.