How to Modify Your WordPress Theme Header and Footer

A typical web page has a header and footer area. These two sections are crucial because they hold key info about your website. Ordinarily, most visitors to a website will notice the header first before anything else and they can make judgments about the website based on their impression of the header. Needless to say, the header and footer sections deserve more attention when designing your pages.

The WordPress Theme Header and Footer

WordPress uses a simple templating system where all header content is contained in a piece of code stored in the header.php template file. Likewise, footer content is stored in the footer.php file. The code in these files is mostly plain HTML with bits of PHP code (template tags) that display the metadata dynamically.

The basic WordPress header has two parts: the topmost part is the meta-header part where you can insert meta-data tags for SEO purposes. It also contains links to the theme’s stylesheets. The lower part of the header contains all your branding info (company or website name, logo, and tagline).

The classic footer also has two main sections: the topmost section contains the sitemap, social buttons, privacy policy, legal disclaimers and other important info about your website while the lower part contains copyright info and the date. However, you can divide your footer into multiple columns rather than two horizontal rows.

Editing The Header

For the most part, you don’t have to touch code in the header.php file to edit the header. Most themes come with easy-to-use admin panels for customizing headers, footers, and other areas of a page. However, if you want a more custom look that your theme doesn’t offer, you might have to get your hands dirty and delve into the header code along with the CSS code in the stylesheet.

In this brief tutorial, I’ll show you how to insert a custom logo into the header of the TwentyThirteen theme.

The first step is to setup a child theme for the TwentyThirteen theme:

WordPress Theme Header and Footer page1

Copy and paste your theme’s header.php file into your child theme’s folder. This is what you’ll be editing rather than the main copy. However, you will not actually be doing any editing here. All changes will be done in the stylesheet.

Now if you analyze the header.php file, you will notice that the site title is contained in the h1 tag and displayed by the blog_info () template tag.

WordPress Theme Header and Footer page2

We’ll use a simple CSS trick to hide the site title text and instead display a logo. Open the style.css file in the child theme folder and paste this code there:

WordPress Theme Header and Footer page3

Change width and height to match the dimensions of your logo. And that’s it. You’ve just inserted a logo into the header of the TwentyThirteen theme:

WordPress Theme Header and Footer page4

Editing The Footer

Editing the footer requires either modifying the code in the footer.php file or making style changes in style.css or both. So in this brief tutorial, we’re going to remove the “Powered by WordPress” sentence in the bottom part of the footer and replace it with custom copyright info and the date.

Copy the footer.php file in the main theme folder and paste it into your child theme’s folder. Open it in a code editor.

Remove the line that starts with anchor tag a (line 19):

WordPress Theme Header and Footer page5

This is a hyperlink that takes you to the WordPress.org website when clicked on.

You should now have your website title displayed along with the year and copyright:

WordPress Theme Header and Footer page6

This is how you edit the header and footer of a WordPress theme. Remember, all edits should be done on child theme files; otherwise, you will lose all changes if the main theme is updated. If you only want to make layout changes, edit the style.css file only and leave the template files.

Changes only affect the theme whose files you’re editing. If you choose another theme, you’ll have to edit the respective header and footer template files.

Do you edit your theme files directly or do you use the theme’s admin panel? Which method is more powerful for you and why?

Are you interested in reading about the pros and cons of long scrolling web design? Click here.

 

 

Enjoyed this post? Share it!