Edit your WordPress site’s header without plugins

They say it’s important to make a good first impression. When visitors arrive at your website, first impressions start at the top — at the page header.

Developers of WordPress themes are not required to include a header template, but it’s rare for a site not to have one. Since the dawn of the web, “header” has been the go-to term for a block of HTML encapsulating essential elements visitors expect to find at the top of pages. That often includes:

• Branding: This can include the site name and, frequently, a logo. The use of color, images, or video in the header might reinforce that branding.
• Primary navigation: If your website has more than one page, visitors will probably look for a site navigation menu near the top of each page.
• Secondary navigation: Secondary navigation could be any links independent of a user’s current location in the primary menu hierarchy. Think of a “login” button and icons linking to social media accounts or a shopping cart.
• Search: If your website supports search, the search input box doesn’t have to be in the header, but visitors certainly won’t look for it in the footer.

The WordPress CMS can dynamically generate components like headers by combining the markup in theme templates with content found in a database — like links to a logo and menu entries — and inject them into every page.

The WordPress theme ecosystem offers a rich selection of designs for almost any website. With tens of thousands of themes to choose from across various marketplaces, picking the best one for your purpose can be daunting.

But when you finally select and install a theme, you will be expected to customize at least some components — like the header — to stamp your brand on the site and make it your own.

Let’s take a look at how to do that.

Block vs classic: A tale of two themes

How you customize your WordPress site’s header is determined by how its theme was constructed (and, sometimes, how much customization you want to do). There are three ways to modify a site header native to WordPress:

• Using the Site Editor: WordPress 5.0 introduced a block editor for website content known as Gutenberg. With the release of WordPress 5.9, the block concept extended to theming and became a robust option for full site editing. The Site Editor and the ability to build up the various parts of a website theme with HTML-based components brought unprecedented flexibility to native WordPress customization.
• Using the WordPress Customizer: We’re not trying to make you feel old, but themes that can be tweaked only by using the once-groundbreaking Customizer and associated widgets are called “classic” themes. Despite the retro-sounding name, new classic-style themes are still being released, adding to the thousands already in the marketplace. Compared to the Site Editor and Block themes, the Customizer and Classic themes offer fewer options for header customization.
• Editing theme files directly: You (or someone you ask for help) will need some basic knowledge of PHP to edit the code within classic WordPress theme files, but it’s one solution when the Customizer can’t deliver what you need for your site’s header.

What we are not covering here is header customization in third-party WordPress page builders like Divi or any number of plugins designed specifically to tackle website headers (and footers). These plugins could be worth exploring if your only option requires editing theme files directly and you want to avoid PHP programming.

How to edit a block theme header

If you’ve used Gutenberg to create content, you know that WordPress ships with a large collection of blocks you can place on pages to compose anything from headings, paragraphs, and lists to media, navigation, and forms. There’s a class of blocks that perform tasks like widgets in classic themes, including generating links to the latest posts and comments, displaying a tag cloud, or inserting a calendar.

Multiple blocks can be combined, styled, and saved as patterns. You can also add these components to the parts of a WordPress theme that help define a page layout, including headers.

Like individual blocks, template parts can be defined in HTML files. Block themes are easy to customize because the information describing those modifications is saved in the WordPress database and applied to the various components when a page is generated.

So, when we talk about “editing” a header in a block theme, we are rarely talking about editing a file stored in a WordPress theme directory.

Under the hood: A block theme header

Inspecting the HTML behind a template part like a header helps explain what’s happening when you customize a theme.

We’re using the Seedlet theme for this tutorial because it’s available as Seedlet (Blocks) and the older Seedlet (Classic). Seedlet (Blocks) uses the Blockbase theme as its parent, and this is the entire content of the header.html file in the Seedlet theme directories:

<!-- wp:pattern {"slug":"blockbase/header-centered"} /-->
<!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

Most of the magic behind WordPress blocks happens in the HTML comments. Comments can pass styling information and other directives during page building. The HTML above adds some vertical spacing to our default header, but the primary action is the request to include a pattern in the Blockbase theme that (once .html is appended) is found in the file header-centered.html.

The directory for template parts within the Blockbase theme includes these files related to a header:

header-centered.html
header-default.html
header-linear.html
header-minimal.html
header-rounded-logo.html
header-wide.html

As an example, the file header-rounded-logo.html includes an HTML comment that adds a CSS class for circular clipping of the logo image. If we were keen on that approach, we could edit our Seedlet header.html file to include header-rounded-logo.html instead of header-centered.html. But we don’t have to do that because we can apply that template part in the WordPress Site Editor and leave theme files on the hard drive untouched.

Using the Site Editor to customize a header

With a block theme active on our website, we can access the Site Editor in the WordPress admin panel by selecting Appearance > Editor:

The initial view in the Site Editor is a full-page layout that will include the header, footer, and any other template parts already added by the theme’s developer. We can click on the header area to immediately begin editing.

Below, our header includes a placeholder for a logo and already displays the site name and main navigation (consisting now of just “About us” and “Sample Page”). If we add a tagline to our basic site information, it will also appear here.

These site identity elements already appear in our header because the header-centered.html template part mentioned above includes these comments:

<!-- wp:site-logo {"align":"center","width":128} /-->
<!-- wp:site-title {"textAlign":"center","style":{"spacing":{"padding":{"top":"30px","bottom":"20px"}}}} /-->
<!-- wp:site-tagline {"textAlign":"center","fontSize":"small"} /-->

The main navigation is generated by this comment:

<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"center","orientation":"horizontal"}} /-->

Let’s add our logo:

1. Select the logo placeholder.
2. Click the Add media button.
3. Choose your logo in the WordPress Media Library or upload it from disk.

Customizing a website header by adding a logo is such a common task that even most classic WordPress themes make the job simple in the Customizer. So, let’s add a block that is not already anticipated in the template: a secondary menu near the top of the page with the entry: Shop.

First, we toggle the display of the Block Inserter by clicking the toggle icon near the upper-left corner of Site Editor:

With the Block Inserter active:

1. Find the navigation block (you can search for it).
2. Drag the block to the upper margin of the header.

Now, we edit the navigation block by creating a custom link (detached from the main navigation) that displays the text Shop and has the URL of our e-commerce subdomain:

By default, everything in this header template part is centered on the page. We want the Shop link to float right. To do that:

1. Click on the new navigation block.
2. Click the Change items justification icon in the toolbar.
3. Select Justify items right.

Here is the completed header:

How to modify a classic theme header with the Customizer

When the first version of the theme Customizer was released in 2012, along with WordPress 3.4, it was a leap forward in helping administrators modify the look and feel of their websites without coding.

The Customizer has been enhanced significantly since then, but one thing remains true: a theme’s developer determines what can and can’t be customized using the tool. That’s a contrast with the free rein site owners have with the block-based Site Editor.

Using the WordPress theme Customizer

When a classic theme that supports the Customizer is active on a site, access it in the WordPress admin panel by selecting Appearance > Customize.

From the main Customizer menu, we select Site Identity to reach customizable components in the header:

In the Site Identity section of this theme, we can add or change a logo and edit the site title and any tagline. (The site title and tagline are initially populated by entries on the General Settings page of the admin panel.)

This theme also places the site’s primary navigation in the header. There’s also a location for navigation down in the footer and for a menu of social media links. The Customizer allows you to choose which — if any — menu you want to assign to each of these locations, but the locations themselves are essentially fixed.

After clicking the Select Logo button highlighted above, we can choose a logo from the WordPress Media Library or upload a new one from disk.

Below, with a logo in place, the Customizer allows us to remove the image or replace it with a different one:

Under the hood: What can the Customizer customize?

So, how does the Customizer determine if we can upload a logo and where it should be placed once we do?

It begins with this entry in the theme’s functions.php script:

/**
* Add support for core custom logo.
*
* @link https://codex.wordpress.org/Theme_Logo
*/
add_theme_support(
    'custom-logo',
    array(
        'height' => 240,
        'width'           => 240,
        'flex-width'  => false,
        'flex-height' => false,
     )
);

That block of code enables the Select Logo button in the Customizer’s Site Identity tab, along with its link to the Media Library functions.

Then, within the PHP code used to build the site’s header, this short code snippet is added at the location where the logo should appear:

<div class="site-logo"><?php the_custom_logo(); ?></div>

The result:

Change a WordPress header by editing theme files

Above, when we customized the header in a block theme using the Site Editor, we added a secondary menu with a Shop link. We were free to place that navigation block anywhere we wanted within our header. Our classic version of the theme has no location reserved for such a menu, so we’ll need to edit PHP code related to the header to make the change.

We could simply open the appropriate theme file and manually add the HTML for our secondary menu, but that would be shortsighted. Later, we might want to update the text of our shopping link (Shop Now?), change its URL, or add another item to that menu (Login?).

We want to add new navigation to the header that is registered with the Customizer, allowing the content of the secondary menu to be changed in the WordPress menu editor without having to return to the theme code.

Before you begin: Backup

Digging into the PHP code of your WordPress classic theme to customize your site’s header is often described as editing the header.php file. That is the case in many themes, but others might combine multiple files to build a single header.

Before making changes to theme files, make backups. Here’s how to make backups and how to restore backups.

Even with backups, you can run into trouble when an update of a third-party theme overwrites your changes. Your modifications could disappear from the site until you can restore your changed theme files from a backup. That’s why we strongly recommend creating a child theme just for your changed files and testing updates on a staged WordPress site.

Editing a WordPress header in a classic theme

Our sample classic theme has a location reserved in the header for primary navigation. In the Customizer, we can select the WordPress menu we want assigned to that location. In our case, that menu is handily named “Primary Menu.”

There are also locations in the theme for footer and social-link navigation, but you can see below that these are not currently enabled:

If we take a look at the theme’s functions.php script, we see where those menu locations are first referenced:

// This theme uses wp_nav_menu() 
register_nav_menus(
    array(
        'primary' => __( 'Primary Navigation', 'seedlet' ),
        'footer'  => __( 'Footer Navigation', 'seedlet' ),
        'social'  => __( 'Social Links Navigation', 'seedlet' ),
    )
);

Below, we add to that block to register an entry for our new “Secondary Navigation” menu:

// This theme uses wp_nav_menu() 
register_nav_menus(
    array(
        'primary' => __( 'Primary Navigation', 'seedlet' ),
        'secondary' => __( 'Secondary Navigation', 'seedlet' ),
        'footer'  => __( 'Footer Navigation', 'seedlet' ),
        'social'  => __( 'Social Links Navigation', 'seedlet' ),
    )
);

When we return to the Customizer, the new Secondary Navigation option shows up in the Menu Locations area:

We can give our menu a name (Secondary Menu) and begin adding links to it. As we did with the Site Editor in the block-based theme, we’ll create one entry for Shop.

Back in the theme file for the header, we added some code that confirms the secondary navigation menu exists and that it has at least one entry in the list of links. Then we parse the menu contents and display them:

<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>
<div id="secondary-navigation" class="secondary-navigation" role="navigation">
<?php
// Get menu slug
$location_name = 'secondary;
$locations         = get_nav_menu_locations();
$menu_id           = $locations[ $location_name ];
$menu_obj          = wp_get_nav_menu_object( $menu_id );
wp_nav_menu(
    array(
        'theme_location'  => 'secondary',
        'menu_class'          => 'menu-wrapper',
        'container_class' => 'secondary-menu-container',
        'items_wrap'          => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    )
);
?>
</div><!-- #secondary-navigation -->
<?php endif; ?>        
<div class="menu-button-container">
<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>
    <button id="secondary-open-menu" class="button open">
        <span class="dropdown-icon open"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?></span>
        <span class="hide-visually expanded-text"><?php _e( 'expanded', 'seedlet' ); ?></span>
    </button>
<?php endif; ?>
</div>

Now, our header includes our Shop link (highlighted in red below) at our preferred location for the secondary navigation.

With this approach, we can change the anchor text used for our Shop link — or even add additional menu items to the secondary navigation — just by editing our Secondary Navigation menu in the WordPress admin dashboard.

Summary

If you want to modify your WordPress site’s header without resorting to third-party plugins or page builders, block-based themes provide almost unlimited flexibility in combination with the Site Editor. The Site Editor allows you to place a variety of blocks just about anywhere on a page layout. Modifications you make to block definitions and styling are stored in the WordPress database, avoiding the need to modify theme files on disk.

The Customizer, which we’ve used for over a decade to manage classic themes, allows changes to elements a theme’s developer has identified and registered as “customizable.” Changes you want to make that are outside of that scope may require editing theme files and — almost certainly — a basic understanding of the PHP scripting language.

Looking for a better way to build WordPress sites? Check out the Docker-based DevKinsta, a free local development suite used by 60,000+ developers, web designers, and freelancers.

The post Edit your WordPress site’s header without plugins appeared first on Kinsta®.