First WordPress Theme: 3 - Header and Footer
Separate header and footer files - PHP includes
As a programming language, PHP was expressly designed to work in close conjunction with (X)HTML.
A major part of its usefulness are the include functions, where a separate file and its php code is “included” into a main file - (this allows files to be edited independently, or you can even select different files, and therefore different code, to be included depending on your requirements).
An example command would be
<?php include("path/to/newfile.php") ?>
where newfile.php (in a different directory:- path/to/ ) will be included and executed in the place where it appears in the main file. You can do it with relative paths, as above, or with absolute paths eg include(”http://www.mysite.com/sub/folder/newfile.php”)
(More about php include)
We want to put our header code in a separate file., ie everything in the <head> of the page, going into the body of the page, with the page banner header and title etc. Mostly, this is the stuff at the top that’s going to be the same on every page.
To do this, we don’t even have to use the include command directly, Wordpress wraps it up into a function.
<?php get_header(); ?>
So, starting with the files from the second part of the WordPress Theme Tutorial we need to:
1. Cut out everything at the top of index.php - go down the code to just before the start of your post content or sidebar (whichever comes first) and paste it to another file header.php (in the same theme directory).
2. Add the command
<?php get_header(); ?>
into our index.php - at the top, the first line, replacing all the code you’ve cut out.
Make sure you keep track of the layout <div>’s with their opening and closing tags - it’s easy to lose or add closing </div> tags during this process and then wonder why the whole layout has suddenly fallen to bits.
3. We now have to do exactly the same for the footer. So the method is to find all the code at the end of index.php that’s going to be the same on every page - usually the div id=”footer” and the layout </div> closing tags, and </body></html> etc. - cut and paste this to a separate file footer.php and replace it with the command:
<?php get_footer(); ?>
4. Upload the changed files to your theme directory and see if it’s all worked - if it hasn’t, you’ll get some nasty error messages about missing paths and files - retrace your steps and see what went wrong.
The theme page still hasn’t got comments - that’s the last part…
