Clicky

Tutorials

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.

How do you edit Headers and Footers in WordPress?

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.

Also read: Top 5 Plugins To insert Header And Footer Scripts In Your WordPress Theme

Edit WordPress Header Code

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

How to edit footer in WordPress

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. You can also use these amazing plugins that’ll help you tweak the header and footer of your WordPress theme.

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?

Recommended Reading: Pros and cons of long scrolling web design

Share this Story
Load More Related Articles
Load More By Brenda Barron
Load More In Tutorials

7 Comments


  1. JD Fillmore

    November 1, 2016 at 7:26 am

    Wicked post!

    I just utilized your methods here in a new client project. Thank you so much!

    Reply

  2. Carolyn Jackson

    February 17, 2018 at 12:37 am

    Help!

    All I’m trying to do is change our footer from 2017 to 2018 and i dont see the text where to change. I’m terrified of messing up the theme. Is it here? We are using theme THe7

    Reply

  3. Daniel

    March 2, 2018 at 5:39 am

    I cannot find the Codes in the theme header. I was trying to add a piece of code earlier but it failed to update and asked me to use a different method to add the code i.e SFTP.

    I cancelled everything and went back to my website only to find out my Theme has been screwed up. The site now looks like plain text with images the theme is gone from the website. I went back to the theme header section and realised all the code has disappeared. Not a single line of code left.

    I have tried removing the theme and re downloading it but no change
    I have tried all sorts of plugins and editors still nothing.
    I do have jetpack installed but found out i need to pay to have backup so i cant do a roll back

    Is there a way around this issue as my site is live and im desperate to fix this

    Reply

  4. Geoff Jankowski

    March 3, 2018 at 9:19 pm

    Hi Brenda

    I can follow your post but what I am trying to do is reduce the height of the header and footer on my site to reduce the impact they have on each page. I suspect it is more complex that just a simple code insert for the header which has the main menu, secondary menu, search bar and logo image within it.

    The footer looks easier, especially after removing the Powered by WordPress statement. At the moment it is hidden on my site by being the same colour as the background but I will follow your tutorial to get rid of it.

    Appreciate it if you can give me some tips as CSS is not my area of expertise!

    G

    Reply

  5. Geoff Jankowski

    March 3, 2018 at 10:08 pm

    Hi again Brenda.

    I tried to follow your tutorial but immediately got stuck as my footer.phpo file looked nothing like yours and it is not easy for me to see what I need to remove. Here is my footer.php file content:



    Can it still be done in this version of wordpress (4.9.4)?

    Reply

    • Geoff Jankowski

      March 3, 2018 at 10:11 pm

      #
      #
      #
      #
      #
      #
      #
      #
      #
      #
      #
      #
      #
      #
      #
      #
      #
      #
      #
      #
      #
      #
      #

      Reply

      • Geoff Jankowski

        March 3, 2018 at 10:12 pm

        It will not let me show the code I am afraid. It does not look as if I can load an image either?

        Let me know how to get it to you. Or, can you get it direct from the theme yourself?

        G

        Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Join Over 50,000+ Subscribers

Interested In
  •   
  •           
  •                      

Search