We’re Excited to Sponsor WordCamp Europe 2023
Patrick | March 8, 2023
Reading Duration: 10 Minutes
No website design is complete without a header and footer. Although the header and footer are often given little attention on WordPress websites, they play an important role in creating a good user experience.
Because they allow better navigation throughout the site. In addition, they are important tools for promoting your brand and are ideal for placing CTAs.
A website header is the top section of your website. Usually, the header is consistent across the site. However, some websites have different headers for different sections of the website.
Regular headers disappear as you scroll down further. But you can also create so-called sticky headers that remain in place throughout the user’s visit to your website.
An example of a classic sticky header that we all know is the blue search bar on Facebook. This is always there, even if you start scrolling.
Sticky headers are great for emphasizing navigation links in menus and making it easier for visitors to navigate through the main pages of your WordPress site.
The special thing about the header is that it gives the user the very first impression of your website. Regardless of whether the users are on the Landing Page, info page, or another individual post, the design of the header is always present.
If well-designed, it will grab the user’s attention and encourage them to keep scrolling and reading.
Also, the header plays an important role in promoting your brand identity by including elements like your company logo, typography, colors, and the overall language of your brand.
However, headers also contain functional options such as website navigation, website search, CTA buttons, or, for example, the shopping cart in online shops.
These features usually improve the user experience and additionally increase the Conversion Rate.
The footer is the area located at the bottom of a website. Like the header, the footer usually appears consistently across the site, across all pages and posts.
Like sticky headers, there are also sticky footers in WordPress. With a sticky footer, the footer “sticks” to your page at the bottom of the viewport.
Footers often receive little attention, which is wasted potential. Due to their constant presence, they should be used in the same way as the headers.
Depending on the settings you choose, your footer can contain useful and important information:
In any case, don’t forget to use the space that the footer gives you to your advantage.
By default, WordPress headers and footers are simply pieces of code. Of course, if you want to change the design, font, frame, or anything else about this code, you can easily edit it..
There are several ways you can do this, depending on how familiar you are with programming or manually editing themes.
One of the easiest ways to edit the header and footer in WordPress is to use the widget system that is integrated with WordPress.
However, this only applies to themes that have an area for header widgets and footer widgets. With new themes, that support Full Site Editing, this area no longer exists, for example. If your theme doesn’t have this area, feel free to skip this method.
To access the widget area, just click Appearance and choose Widgets in your WordPress dashboard.
To create or edit the new WordPress header or footer, simply drag and drop a widget into the designated area.
Then click on the widget to configure it and when you’re done, don’t forget to click Save.
Of course, as a WordPress user, you can also edit the visual aspects of your header or footer with the integrated Customizer, in case it is available in your theme.
Because just like widgets, the customizer is only available in themes that do not support Full Site Editing.
It displays a live preview of your site so you can see the changes made in real-time.
To access the customizer, go to Appearance in your WordPress dashboard and then Customize.
You should pay attention to this when using the WordPress footer or header menu in the customizer:
You may find a Theme Header or Theme Footer section where you can customize the colors, border, and text to match the overall design of the site.
As mentioned earlier, this is where you can add content widgets to a header or footer area.
These are for those who want to insert links in their WP header or footer. It uses the built-in WordPress menu system.
As always, don’t forget to save or publish the draft.
Also, there are themes where these settings may be in a different area than the theme options, such as in the footer builder.
Full Site Editing is the newer way to edit theme templates with the block editor.
To determine if your theme supports Full Site Editing, open the Appearance menu and look for the option Editor.
Choosing this option will automatically open the Site Editor. This allows you to edit the templates, but not the individual pages or posts.
In the template parts area, you will then find the header and footer elements. When editing the header or footer, you have full control over which blocks and elements you insert.
With the List View tool, you’ll see a breakdown of the blocks the header currently contains.
To remove or edit an existing block, select it and use the toolbar that appears automatically.
But you can also edit a selected block via the Block Settings Menu edit on the right side of the screen. This menu usually contains styling options that vary depending on the block being edited.
To add a new block, search for the Plus sign icon in the element header or footer. This button opens a menu where you can select different blocks.
Another useful feature of the Full Site Editor is the ability to edit menus visually. Simply select a menu via the navigation block. This gives you the ability to add new links, create a new menu, and switch between the existing menus.
Most WordPress website themes have the message “Powered by WordPress” in the footer. Sometimes the developer’s name is also there, e.g. “Theme by Developer XX”.
Even if there is nothing wrong with this message, it could come across as unprofessional and annoying.
But don’t worry, this problem can also be solved easily. For that, you just need to edit the file footer.php.
Sometimes it is necessary to add additional code to the header or footer. It doesn’t matter whether it’s CSS or PHP.
Usually, this is done to customize the design or to connect your website to an external application. There are several ways you can go about it.
For small changes, use the field Additional CSS in the WordPress customizer. Here you can change the background color or the padding of the content area, for example.
The easiest way to add custom scripts to the WP header or footer is to use a plugin.
WP Header and Footer Plugins help you add code to your header and footer. The great thing is that you don’t have to edit the theme files to include the code.
For example, you can add the Google Analytics tracking code, the Facebook pixel code, Google Optimize code for A/B testing, custom CSS code, and others relatively quickly and easily.
Our personal favorites among these plugins are:
The free, easy-to-use plugin is compatible with almost all WordPress themes.
You don’t need to know any programming languages to use it and the interface is also very simple, making it an easy-to-use plugin, especially for beginners.
With this free plugin, you can not only add unlimited scripts and styles but also manage the placement of the code.
Aside from specific pages and posts, the snippets can also be set to load on desktop and mobile devices, or either one.
The disadvantage of these plugins is that they are purely functional aspects of the header and footer. For more artistic freedom, we, therefore, recommend using the Site Editor.
Various template parts and various blocks are made available to you to get creative.
We have a solution for that too.
GREYD.SUITE, which has the Gutenberg block editor natively integrated, is currently implementing all functions in the new Full Site Editing version, extending them while being extremely user-friendly.
This means you can benefit from Full Site Editing and also find templates for all areas of your website, including headers and footers.
In fact, with GREYD.SUITE you can do much more than just take advantage of Full Site Editing. With these features, headers and footers can be designed more individually than ever before.
With little effort, but a lot of control, each area of your website can be freely designed and flexibly adapted.
In short, you can edit WordPress headers and footers without any plugins or code.
Whether you are a seasoned programmer or have just started building WordPress websites. There are ways and means how both beginners and experts can get their money’s worth when it comes to header and footer design.
Have we convinced you? Then download GREYD.SUITE for free right now and experience all the advantages first-hand.
Patrick loves good texts. Preferably about topics concerning online marketing and WordPress. Having built websites by using well-known page builders on his own and being very experienced in the SEO industry, he is very familiar with any kind of problems regarding those plugins. This is the reason why he adopted GREYD’s mission to simplify work for web designers as well as agencies.
Our Blog Topics
Register now and don’t miss any news about GREYD.SUITE & WordPress:
We’re Excited to Sponsor WordCamp Europe 2023
We’re Excited to Sponsor WordCamp Europe 2023
More Customers, No Competition: With the right Marketing for your WP Agency, it’s possible
This Is How to Create a Backup for All Your WordPress Sites
How to Personalize Your Content in WordPress (3 Ways)
Set up a WordPress Multisite – How it works
The Proper Way to Add a Header and Footer in WordPress
How to Sell Web Design Services the Right Way
Create and Evaluate Conversion Powerful Forms with GREYD.SUITE
GenerateBlocks Review: How Good Is the Tool Really?