In Part 1 and 2 of this mini-series we started to build a really minimal theme for WordPress. In this part, we will add a header and a footer to it.
While our Really Minimal theme (see Parts 1 and 2) works properly at the moment, it lacks some useful basic features. For what concerns the header, it doesn’t display any blog title or tagline at the top of the page. Regarding the footer, there are no closing remarks or credits either. Another effect of not having a footer is that once we log in our site as Administrators, we are missing the management toolbar at the top, the one through which we can quickly add posts and go to the Dashboard. Let’see how to fix both.
A WordPress theme that is less minimal than our Really Minimal would actually include four template files: index.php, header.php, footer.php and sidebar.php. While only index.php is really necessary for a theme to work (beside style.css), the other three are useful to create a design where header, footer and sidebar stay more ore less the same, while the blog content is dynamically generated by index.php through the contained Loop.
The WordPress API provides three standard functions to include the header, the footer and the sidebar in your theme. They are:
get_header()
get_sidebar()
get_footer()
When these functions are invoked from within index.php they will search in the current theme directory, then in the parent theme directory (if the current theme is a child theme) and finally inside wp-includes/theme-compat directory for the template files named
header.php
sidebar.php
footer.php
respectively.
Each of the three functions takes an optional $name string parameter which allows us to specify more precisely which template file to use. For example, if $name is passed to get_header() as in get_header('alternative') the function will look for a template named header-alternative.php. The other two functions take the same syntax and have the same behavior. This is especially useful for the sidebar where we could have, for example, two distinct ones (e.g. sidebar-left.php and sidebar-right.php).
Enough theory, it’s time to code. Let’s open index.php from the previous part of this series and modify it as follows.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php get_header(); if (have_posts()) : while (have_posts()) : { the_post(); the_title(); echo( '<br />' ); the_content(); echo( '<br />' ); } endwhile; endif; get_footer(); ?> |
Note that we have not added get_sidebar(). This will be covered in Part 4. Note also that we have not yet created any header.php or footer.php file to our theme’s folder. Despite that, if we reload our site here is what it looks like now.
We have a working header, with the Blog Title and the Tagline. A working footer, with WordPress credits. If we login as Administrators to our site (in case you miss a Log In link, just go to yoursite/wp-admin) and then go back to our blog we will also see the administration toolbar at the top.
Where is the magic then? It is in the get_header() and get_footer() functions that, not finding any template in the current theme folder (or in the parent theme folder), will use those available inside wp-includes/theme-compat.
One word of caution here: according to the comments in the WordPress code this fall-back scenario, which is provided for compatibility reasons, may be removed in future versions. Better to provide our own header.php and footer.php now before it is too late! Here is what they look like in a minimal implementation. Create the two files and save the respective code inside the really-minimal theme folder.
|
1 2 3 4 5 6 7 8 9 |
<DOCTYPE! html> <html> <head> <title></title> <?php wp_head(); ?> </head> <body> <h1><?php bloginfo( 'name' ); ?></h1> <p><?php bloginfo( 'description' ); ?></p> |
|
1 2 3 4 |
<p><?php bloginfo( 'name' ); ?> is proudly powered by Wordpress and Really Minimal.</p> <?php wp_footer(); ?> </body> </html> |
This is what our blog looks like with our new header.php and footer.php added to the theme.
Somehow simpler than before, but still fully functional!
Back to the code, you will recognize that the standard html structure is started in header.php and concluded in footer.php. This is normal in pretty much all WordPress themes. Inside header.php we have used a well know WordPress API function: bloginfo(). This is useful to retrieve the blog name and description (aka tagline) from the WordPress installation and output them to the screen.
The only other WordPress function that appears in header.php is wp_head. This function does the behind-the-scene work to include all the necessary Javascript and CSS.
In footer.php the only WordPress function, beside bloginfo(), is wp_footer.php. This function, similarly to wp_head(), does some magic work by including the end-of-the-paga Javascript and implementing the administration toolbar in case you are logged in as Administrator.
Side Note
I have no idea why wp_head() is not called in fact wp_header() or wp_footer() is not called wp_foot()! If you happen to know, please leave me a comment.
Take a look at the source code of your page to see all the extra code added by wp_head() and wp_footer().
This is it for this part. We will conclude our theme in the fourth and final one.
Until then, take care!