How to set up Header & Footer in WordPress

If you want to add content at the top and bottom of your website, your first instinct might be to go into your index.php file in your theme folder and just write something up at the very top and at the very bottom.

This will work only on the pages powered by index.php template file. Hence this practice is not ideal. We want the identical header and footer on every single page of the site. Since we know that index.php does not power every single page of the WordPress website so we would need a different strategy.

So what is the correct strategy?

To avoid duplication of the code, we would want our header code to live in one file.

The steps for correctly setting headers and footer in WordPress are as below:

Step 1: Create a new file and name it header.php. This is the file where you would write the header code.

Step 2: Jump back in the index.php file and at the very top of it write a bit of code that will pull in the contents of header.php file

<?php get_header(); ?>    //this line of code pulls in the content of header.php file.

Step 3: Create a new file and name it footer.php. This is the file where you will have your footer code.

Step 4: Jump back in the index.php file and at the very bottom write a bit of code to pull in the contents of footer.php file.

<?php get_footer(); ?>    //this line of code pulls in the content of footer.php file.

Step 5: Now once we have set up the index.php file, we have to repeat the above steps in other template files like single.php & page.php.

Now we can rest assured that whenever we update our header.php or footer.php files our entire website’s header and footer would be updated globally on every single page of our website.

Categories: WordPress

Leave a Comment

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

%d bloggers like this: