{"id":54004,"date":"2022-07-21T15:56:19","date_gmt":"2022-07-21T12:56:19","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=54004"},"modified":"2023-04-16T08:12:28","modified_gmt":"2023-04-16T05:12:28","slug":"edit-wordpress-header","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/edit-wordpress-header\/","title":{"rendered":"How to Edit WordPress Header: 4 Easy Methods (3 With No Code)"},"content":{"rendered":"\n

The header is the first element of your website that most visitors see. Typically, this is where your site’s logo and menu are placed, and it’s part and parcel of every page. If you don’t know how to edit the WordPress header, you’ll have a difficult time \u23f1\ufe0f making a strong first impression.<\/p>\n\n\n\n

WordPress enables you to edit your site’s header in several ways. Just about every theme comes with a unique header design, which you can customize manually. Alternately, you can use an array of WordPress header editors provided by the larger WordPress community.<\/p>\n\n\n\n\n\n\n\n

\ud83d\udc49 In this article, we’re going to show you four ways to edit the WordPress header<\/strong>, both with and without plugins. Let’s get to work!<\/p>\n\n\n\n

\ud83d\udcda Table of contents:<\/strong><\/p>\n\n\n\n

    \n
  1. Edit the header using the Customizer<\/a><\/li>\n\n\n\n
  2. Use Full Site Editing (and a compatible theme)<\/a><\/li>\n\n\n\n
  3. Edit the header using a WordPress page builder<\/a><\/li>\n\n\n\n
  4. Add custom code to the header using a plugin<\/a><\/li>\n<\/ol>\n\n\n\n\t\t
    <\/div>\n\t\t\t
    \n\t\t \t
    \n\t\t \t\tHow to edit your #WordPress header: 4 easy methods (3 with no code) \ud83d\udd2a \ud83d\udc4d<\/a>\n\t\t \t<\/div>\n\t\t \t
    \n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n
    <\/div>\n\n\n\n

    1. Edit WordPress header using the Customizer \ud83d\udd27<\/h2>\n\n\n\n

    The Customizer<\/a> is a built-in WordPress header editor. Well, it lets you do a lot more than that, but that’s one of its many features. In addition to letting you edit the WordPress header, you can also use it to edit the footer, typography, menus, and other key components of your website.<\/p>\n\n\n\n

    To access the Customizer, go to your dashboard. Click on Appearance <\/strong>> Customize<\/strong><\/em>. The Customizer will display a menu of options to the left and a preview of your website to the right:<\/p>\n\n\n

    \n
    \"Use<\/figure><\/div>\n\n\n

    \u26a0 Note that if you don’t see the WordPress Customizer option in your dashboard, you might be using a block-enabled theme. To edit the header for this type of theme, you’ll need to use Full Site Editing, which we’ll cover in the next section.<\/em><\/p>\n\n\n\n

    In the Customizer, you should see an option related to your header. Sometimes this might be visible right away, as in the example above. Other times, you might need to go to a sub-menu. For example, some themes put the header options in the Layout<\/em> <\/strong>options or something similar.<\/p>\n\n\n\n

    Once you’ve found your theme’s header options, the choices that you see now will depend on what theme you’re using. For example, our Neve theme<\/a> includes options for changing your logo, the header color, and which menu displays in this section:<\/p>\n\n\n

    \n
    \"Customizing<\/figure><\/div>\n\n\n

    Neve also offers a selection of elements that you can add to the header using drag-and-drop functionality. Select any of the elements under Available Components<\/strong> <\/em>and drag them into the header rows at the bottom of the Customizer. Neve enables you to add up to three rows of elements for a header and place elements in any position you want:<\/p>\n\n\n

    \n
    \"Placing<\/figure><\/div>\n\n\n

    When you’re happy with the configuration of your header, save the changes to your theme by clicking on the Publish <\/strong><\/em>button at the top of the Customizer.<\/p>\n\n\n\n

    \u26a0 Note that any changes that you make using the Customizer will only apply to your active theme. If you change themes, you’ll need to edit the WordPress header again.<\/p>\n\n\n

    <\/div>\n\n\n\n

    2. Use Full Site Editing (and a compatible theme) \ud83d\udd29<\/h2>\n\n\n\n

    Full Site Editing<\/a> is a newer feature that enables you to edit theme templates using the Block Editor. This only works for block-enabled themes<\/a>, so it may or may not be available on your site – depending on your theme.<\/p>\n\n\n\n

    To check if you have access to it, open the Appearance<\/strong> <\/em>menu and look for the Editor<\/strong> <\/em>option. If you don’t see it, then you’ll need to install a block theme such as Raft<\/a>, Jaxon<\/a>, or Riverbank<\/a>.<\/p>\n\n\n

    \n
    \"Accessing<\/figure><\/div>\n\n
    \n\n\n\n

    \u270b Important<\/strong> \u270b If you find that you do not<\/em> have a block theme installed on your site and you want to make the switch over to Raft or another option, please complete a backup of your website first<\/a>. Switching themes doesn’t always go smoothly. If there are serious complications, you’ll want to be able to revert back quickly. You can also consider creating a staging site<\/a> and making the theme switch there before doing it on your live site.<\/p>\n\n\n<\/div><\/div>\n\n\n\n

    Hover your mouse over that Editor<\/em><\/strong> <\/em>option, click it, and the templates editor will open. You’ll quickly realize that it looks and functions identically to the Block Editor that’s used for editing posts and pages.<\/p>\n\n\n\n

    By default, the editor will open to the home page template. However, you can easily navigate to the Header<\/strong> <\/em>element by clicking on Template Parts<\/em><\/strong>.<\/p>\n\n\n

    \n
    \"Click<\/figure><\/div>\n\n\n

    This will open up another sub-menu, where you’ll select Header<\/em><\/strong>, which will serve as your WordPress header editor when using this method.<\/p>\n\n\n

    \n
    \"Choose<\/figure><\/div>\n\n\n

    \u26a0 The first time you open the header editor, you’ll be shown a popup window offering you an orientation. Feel free to use it or just click X to get out of it and continue.<\/p>\n\n\n

    \n
    \"Opening<\/figure><\/div>\n\n\n

    There is a lot you can do here to customize your header, the full scope of which is beyond the capacity of this tutorial. However, to get you started, we’ll go over the three most common components that users typically want to edit in their WordPress header.<\/p>\n\n\n\n

    Edit the site title in the header<\/h3>\n\n\n\n

    If you want to edit the appearance of the site title in your header, first click on the title block. In our example, that’s “THIN BIRTHDAY”<\/em>. Once it’s highlighted, click on the icon on the top right corner of your screen<\/strong>. It’s shown with a red border around it in the screenshot below.<\/p>\n\n\n

    \n
    \"Editing<\/figure><\/div>\n\n\n

    A sidebar will pop up. That sidebar will contain a brief description of whatever block you have selected inside of the header template (in this case “Site Title”<\/em>).<\/p>\n\n\n\n

    Below that you’ll see two icons: a small gear \u2699\ufe0f and a half moon \ud83c\udf13 looking symbol. By default, it will be set on the small gear, but that’s not the one you want. Click on the half moon<\/strong> one, which will open up a slew of customization options.<\/p>\n\n\n\n

    Now you’ll be able to change the color, font, and size of the site title to your liking:<\/p>\n\n\n

    \n
    \"Edit<\/figure><\/div>\n\n\n

    Add blocks to your header template<\/h3>\n\n\n\n

    You can choose to add or remove blocks from the header as well.<\/p>\n\n\n\n

    To add a block, you can either click the +<\/strong> sign on the bottom right of the header itself (shown below), or the +<\/strong> sign on the top left of the template parts editor. Both options will give you a popup window where you’ll be able to search for and insert whatever blocks you’d like to be a part of your header. <\/p>\n\n\n

    \n
    \"Adding<\/figure><\/div>\n\n\n

    Edit header menus<\/h3>\n\n\n\n

    Another useful feature of the Full Site Editor is that you can edit menus visually. Much like with adding a new block above, you are also given two options here for doing it. Although the two options only have partial overlap, as you’ll see in a moment.<\/p>\n\n\n\n

    Begin by clicking on the specific menu item you want to edit (in our example “Patterns”<\/em>). This will automatically open up the sidebar on the right, which will give you a list of editing options. Alternatively, you can click the paperclip looking icon<\/strong>. This will open up a drop down menu that will allow you to change the text of the menu item and put whatever destination link you want it to go to.<\/p>\n\n\n

    \n
    \"Edit<\/figure><\/div>\n\n\n

    If you’d like to add submenus, it’s also very easy – just click the icon to the right of the paperclip.<\/p>\n\n\n

    \n
    \"Adding<\/figure><\/div>\n\n\n

    Overall, using the Full Site Editor to edit the WordPress header method is very easy and straightforward. It’s even more so if you’re already used to using the Block Editor, since it functions exactly the same way. The above examples and screenshots covered the basics and they’re enough to get you started. Feel free to play around with it so you can get your header looking just the way you want it.<\/p>\n\n\n\n

    When you’re happy with the changes, click on Save<\/strong> on the top right of your screen. This will save the changes to the theme’s header template, and they’ll be reflected on your website automatically, across all of your pages and posts.<\/p>\n\n\n

    <\/div>\n\n\n\n

    3. Edit WordPress header using a WordPress page builder \u2692\ufe0f<\/h2>\n\n\n\n

    Some WordPress page builder plugins<\/a> offer options to edit headers. For example, Elementor Pro<\/a> includes a Theme Builder tool<\/a> that you can access with a premium license. <\/p>\n\n\n\n

    If you don’t have access to Elementor Pro, you can use a free third-party WordPress header editor, such as the Elementor Header & Footer Builder plugin at WordPress.org.<\/p>\n\n\n