How to Create Custom Header And Footer on Your WordPress Website?

No website is complete without a header and footer. They are vital parts of website design and user experience. The header and footer compile important links from the website into one section. They act as a map for users to travel through the website and easily contact the business owner for a meeting or query. Therefore, as a marketer, you must know the importance of a custom header and footer and how to create one for your WordPress website. On WordPress, you have two options to create a custom header and footer – manually and using plugins. Both have their own advantages and limitations that I will discuss ahead. So, let’s checkout how to create custom header and footer.

Headers and footers of a website are also termed navigation menus. In one of our exclusive guides, we gave a step-by-step description of how to add navigation menu to WordPress websites.

  • Customized header and footer help to create a unique brand identity and message.
  • It allows you to put your tagline, logo, and social media buttons on the website.
  • Create a simple navigation system for your visitors.
  • You can add meta tags to the header and footer for search engine crawlers to better index your website.
  • It keeps the contact information intact across all the websites.

How to Create Custom Header And Footer?

WordPress users can create a custom header and footer manually or with plugins. You have to tweak your theme’s settings for the manual method, which can be tricky.

So, I recommend non-tech-savvy users to go for plugins to add header and footer as it is easier.

Manual Method to Create Header And Footer

Manually creating header and footer codes for your website requires editing theme files. Therefore, you should first edit the child theme rather than messing with the parent theme. This way, you will have a backup and you won’t lose your website settings.

It is a pretty straightforward process to create a child theme, as follows:

  • Create a child theme folder in your theme directory at wp-content/themes.
  • Next, create a stylesheet folder named style.css, containing all CSS rules and declarations of your theme.
  • Enqueue the parent and child theme stylesheets.
  • Install a child theme as you install any regular theme.
  • Go to Administration Screen > Appearance > Themes to activate your child theme.

If the manual child theme creation process is too much for you, use plugins like Child Theme Configurator to easily create the child theme.

Once your child theme is active, you need to edit its functions.php file. Before you start, backup your site for the safe side.

You can edit your functions.php file via File Transfer Protocol (FTP) and an FTP client such as FileZilla. Alternatively, you can edit certain theme files from your WordPress dashboard.

For this, go to Appearance > Theme Editor. A warning message will appear that you are about to edit your theme files. Click on the Understood button to proceed further.

Now, select the right file and add custom header and footer codes at the end of the file and Update the changes. And that’s it.

Using Plugins to Create Header And Footer

Manually creating a custom header and footer is technical, and one wrong move can damage your whole website settings. Therefore, it is good to use plugins to customize header and footer designs.

Here are many great plugins available to create a header and footer on WordPress sites, such as:

Besides all these plugins, Elementor is the best plugin to customize your website design. Using Elementor, you can edit the look of your header/footer without making drastic changes to the theme.

It has a simple drag-n-drop interface along with several preset header and footer designs. In fact, upgrading to Elementor Pro for $49 will unlock many advanced features like:

  • 30+ basic templates and widgets
  • 300+ pro templates
  • 60+ pro widgets
  • Response design
  • Theme builder and more

How to Create Custom Header And Footer Using Elementor?

Install & Activate Elementor

First of all, you have to install and activate Elementor on your WordPress site. Go to the WordPress admin panel > Plugins > Add New.

You can install and activate the free Elementor plugin to start with.

Create Blank Header And Footer Template

From your WordPress side panel, go to Templates > ADD NEW TEMPLATE. Select the header or footer template from the pop-up menu as per your needs and name it.

You can select ready-made Elementor header or footer templates or choose a blank template to customize from scratch.

Select General Header/Footer Layout

To create a custom header and footer using Elementor, you have to first define the basic layout of your design.

Elementor allows you to customize the header/footer as you desire. Click on the main customization button of your header/footer to view the Layout section.

Select the structure blocks appropriate to your design. You can stretch the layout or keep it fixed from the Stretch Section under the Layout panel.

Add Components to Your Header/Footer Deep

Finally, you can add different elements in WordPress from the Elementor editor to create a custom header and footer. Some elements that you can add to your header/footer section are:

  • A logo to build your unique brand identity.
  • A Nav Menu block to create easy-to-navigate website menus for new visitors.
  • Add a Search field to make your website more accessible.
  • Put social media buttons on the footer, etc.

Publish It

The last step is to publish your new header and footer design. To do so, click on the main Publish button. After that, a pop-up will appear asking where you want to publish the header/footer.

You can publish the header/footer on the entire site or set conditions to appear on a particular page, post, or more.

Bottomline

I hope you are now all set to create a custom header and footer for your WordPress site. I have explained both manual and plugin methods to customize the header/footer in detail.

As you have already understood, the manual method contains lots of code and theme file modifications, so it is not easy. In contrast, plights like Elementor have made it codeless and painless to customize the header/footer.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.