Edit your WordPress site's header without plugins (r)

-sidebar-toc>        -language-notice>

It's crucial to give a positive first impression. When visitors arrive at your website, the first impressions start with the top of the page -- at the page header.

• Branding: This can include the site name and, often it is a logo. The use of color, images, or video in the header might reinforce that branding.
• The primary navigational system: If your website has more than one page, visitors will probably search for a navigation menu on the upper part of each page.
• Secondary navigationSecondary navigation could be any hyperlinks that are not tied to the user's location within the primary menu hierarchy. Imagine the "login" button and icons that connect to social media accounts, or shopping carts.
• Search When your site has search capabilities, then the search input box does not require to be placed in the header. However, people won't find it under the footer.

The WordPress theme marketplace provides a wide range of themes for nearly any site. With more than ten million themes to pick from in various marketplaces, selecting the right option for your needs could be a challenge.

Let's look at ways to accomplish that.

Classic and Block The story of two themes

How you customize the appearance of your WordPress site's header can be determined by how its theme was designed (and, sometimes, how many customizations you'd like to apply). There are three methods to alter the header of a website built into WordPress:

• Using using the WordPress Customizer We're not trying to make you feel old However, themes that can be modified only with the once revolutionary Customizer and associated widgets are called "classic" theme. In spite of their retro sounding names Classic-style, modern themes continue to be released in addition to the hundreds of themes already available on the market. In comparison to Site Editor and Block themes Classic and Customizer themes are less customizable. Customizer or Classic themes offer fewer options in terms of header design.
• Modifying theme files in-line: You (or anyone you seek help) should have a fundamental experience with PHP to edit the code within classic WordPress theme files, but this is a solution if Customizer isn't able to deliver the information you need for your site's header.

Editing the block theme header

If you've used Gutenberg to create content, you know that WordPress comes with a huge array of blocks that you could put on your pages in order to create any type of content, from headings to lists, paragraphs to navigation, media, and forms. There's a class of blocks which perform the same functions as widgets in classic themes. They include generating links to the latest articles and comments, as well as displaying the tag cloud, and inserting a calendar.

Many blocks can be combined to be styled, re-used, or stored in patterns. You can also add these components to elements of an WordPress theme to define the layout of a website, which includes headers.

When we speak about "editing" an element in the block theme, we're not speaking about editing a document located in a WordPress themes directory.

Under the Hood Header of a block theme

The HTML that is behind the template like a header will help you understand the changes that occur when you modify the template.

The theme we're using is the Seedlet theme for this guide because it's both available as Seedlet (Blocks) and the older Seedlet (Classic). Seedlet (Blocks) utilizes it's Blockbase theme as its primary theme, and this is the entire content of this header.html file in the Seedlet theme directories:

Most of the magic behind WordPress blocks occurs in HTML comments. Comments may pass styling data as well as other instructions when building a page. 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 in Blockbase. 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 could apply that template feature inside WordPress' Site Editor. WordPress Site Editor and leave theme files that are on our hard drive unaffected.

Utilizing the Site Editor to personalize a header

The first view of the Site Editor is one that is a complete layout. This includes the header, footer along with any other templates previously created by the theme's creator. Click on the header area to immediately start the editing process.

Below, the header contains an image placeholder and has already displayed the website's name and main navigation (consisting now of just "About us" and "Sample Page"). If we are able to add the tagline we want to use with our site information, it will also be shown below.

They already appear in our header because our header-centered.html template part which we have mentioned previously includes the following remarks:

The main navigation is generated by this comment:

We'll add our logo

1. Select the logo placeholder.
2. Select the "Add Media" button.
3. Select your logo from the WordPress Media Library or upload it directly from your hard drive.

Making a header for a website more customizable by adding a logo is something that is so commonplace even most classic WordPress themes make the task easy within the Customizer. Therefore, let's include the block which isn't expected by the template: a secondary menu at the upper right of the page. This menu will include the entry: Shop.

Then, we switch the appearance of the Block Inserter by clicking the toggle icon in the upper-left edge of the Site Editor:

With Block Inserter active: Block Inserter active:

1. Find the navigation block (you could search it).
2. The block should be moved to the upper margin of the header.

Then, we modify the navigation block, by generating an individual hyperlink (detached from the navigation block) which displays the word shop and has the URL for our subdomain of e-commerce:

The default setting for everything within the header template is centered on the page. It is our goal to have the shop link to appear in the proper direction. In order to achieve this:

1. Select the navigation block.
2. Select the "Change items' justification icon located in the toolbar.
3. Choose the items that you want to highlight right.

Here's the header that has been completed:

How to modify a classic header for a theme using the Customizer

The first version of the theme Customizer came out in 2012, as was WordPress 3.4, it marked a significant leap in assisting administrators to alter the design and layout of their web pages without programming.

The Customizer has been enhanced significantly since then, but it's the same that the theme's creator determines what can and can't be modified using the software. This is in contrast to the free rein site owners have when using the Block-based site Editor.

Utilizing using the WordPress theme Customizer

When a classic theme that is compatible with the Customizer is enabled on the site, you can access it through the WordPress administrator panel by clicking the appearance > Customize.

In the Customizer menu, select the Site Identity optionto find customizable components within the header.

Within the Site Identity area of the theme, we are able to add or change a logo and modify the title of the website and any tagline. (The site title and tagline initialy are populated with entry on the General Settings page of the administration panel.)

This theme also places the primary navigation of the website at the top of the page. It also has a place to navigate down the footer and for a menu of social media websites. The Customizer lets you select which -- if there is a menu that you want to assign to the various locations however the location itself is essentially fixed.

Once we have clicked the Select Logo button highlighted above you can select one of the logos that is available in the WordPress Media Library or upload a new one from disk.

Below, with the logo the Customizer permits users to take out the logo and replace it with a different one:

The underside of the car: How is the Customizer make custom?

So, how does the Customizer know the possibility of uploading an image and also the location it needs to be after we have done it?

This entry is the first within theme's functions.php script:

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

The code block enables the Click Logo button in the Customizer's Site Identity tab, along with its link to the Media Library functions.

In the PHP code to construct the site's header This code fragment is included at the place where the logo should appear:

The end result is:

Modify a WordPress header by editing the theme's files

Above, when we customized the header for an e-block theme with the Site Editor and added a secondary menu with an Shop link. The theme was free to add the navigation block wherever that we needed within our header. The original version of our theme doesn't have a place reserved for such menus, therefore we'll have to alter PHP code related to the header code to effect the changes.

We would like to add a new navigation options to the header menu that is registered in the Customizer. This allows the content of the secondary menu to be altered in the WordPress menu editor, without needing go back to the theme's code.

Before you begin: Backup

Inquiring into the PHP codes of your WordPress classic theme to customize your header for your site is usually described as editing your header.php file. It is the situation in some themes. Other themes could combine multiple files in order to create a unique header.

Editing a WordPress header in a classic theme

The classic theme we have in our sample has a location reserved in the header for the primary navigation. In the Customizer, you can choose the WordPress menu we want assigned to the area. In our case, that menu is handily named "Primary Menu."

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

If we take a glance at the themes functions.php script, we will see that these menu locations are first referenced:

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

Below, we'll add that block to register an entry for our"Secondary Navigation" menu "Secondary Navigation" menu.

// This theme uses the wp_nav_menu() Register_Nav_Menus(
 array(
'primary' =>"__"( 'Primary Navigation', 'seedlet' ),
 'secondary' is => __( 'Secondary Navigation", "Seedlet' ),
 'footer' =>"__"( 'Footer Navigation", "seedlet" ) ('social' is a synonym for"Social" =( 'Social Links Navigation", "seedlet' ),
 )
('Social Links Navigation','seedlet');

When we return to the Customizer, the new secondary Navigation option is displayed within the Menu Locations space:

It is possible to give the menu a name ( Secondary Menu) and then begin adding links to it. Similar to what we did with the Site Editor from Block-based themes, we'll create one menu to use for Shopping.

In the theme file that is used for the header, we added an additional code to confirm that the secondary navigation menu exists as well as that it contains at least one entry in the list of hyperlinks. We then parse the menu contents, and show them in the following order:

 
  'secondary',
 'menu_class' => 'menu-wrapper',
 'container_class' => 'secondary-menu-container',
 'items_wrap' => '%3$s',
 )
 );
 ?>
 

  
 
 
 
  
 
 
 
 

Our header now includes the Shop button (highlighted with red) at our preferred location as the primary navigation.

This way, we can change the anchor text we use to link our Shop -and even add more menu items for the secondary navigation just by editing our Secondary Navigation menu in the WordPress admin dashboard.

Summary

If you're looking to alter your WordPress website's header, without having to resort to plugins from third parties or page builders, block-based themes provide almost unlimited flexibility in combination using the Site Editor. Site Editor lets you to place a variety of blocks just about anyplace on the layout of a webpage. Modifications you make to the block's definitions as well as styling will be stored within the WordPress database, eliminating the necessity of changing the theme's files in the disk.

The Customizer is a feature we've been using for over a decade for managing classic themes permits changes to the elements that a theme's creator has registered as "customizable." Changes you'd like to implement that are outside of that scope may require editing theme documents and most likely an knowledge about how to use the PHP scripting language.

Steve Bonisteel

Steve Bonisteel is a Technical Editor at who began his career in writing as a print journalist, chasing fire trucks and ambulances. He has been covering technological developments on the Internet since the 1990s.