In this article, we’ll make our second modification by modifying the default footer content.
IMPORTANT: For the purpose of this series of tutorials, I’ll be using the WP 2.5.1 DEFAULT template for all examples. Yes, I know 2.6 is now out, but for purposes of continuity we’ll stay with the same version throughout this series. Don’t worry, it all works the same way in version 2.6!
Modifying Your Blog Footer
This is a another really easy modification. Again, it requires a little pre-planning, some common sense and a bit of imagination. For purposes of this walk-thru we’ll reorganize the footer content, add a bit of PHP scripting to automate the copyright date and add an image to reflect the site’s header for a little bit of interest.
The Pre-planning Stage
Load your blog in a browser and look at it carefully. In fact, it is sometimes helpful to save the index page WITH IMAGES as a plain old HTML page on your local computer so you can conduct a quick and easy check of things “under the hood”. In this stage we’ll compare the default generated footer content to the script to get an idea of how/what/where to change things.
The footer generated by the WP default theme looks like this:
And here is the HTML code in the resulting page as presented in your browser:
<hr /> <div id="footer"> <!-- If you'd like to support WordPress, having the "powered by" link somewhere on your blog is the best way; it's our only promotion or advertising. --> <p> My Modified WP Theme: is proudly powered by <a href="http://wordpress.org/">WordPress</a> <br /><a href="http://www.yourblogaddress.com/?feed=rss2">Entries (RSS)</a> and <a href="http://www.yourblogaddress.com/?feed=comments-rss2">Comments (RSS)</a>. <!-- 18 queries. 0.229 seconds. --> </p> </div> </div> <!-- Gorgeous design by Michael Heilemann - http://binarybonsai.com/kubrick/ --> </body> </html>
When all is said and done, the footer created in this article will look like this:
So let’s get started!
Understanding How the Footer is Generated
As was discussed in Part 1 of this series, index.php is the guide we’ll use to see just how the sections of the overall structure are created. Here’s what index.php looks like [I've removed some sections because we're only looking at overall structure]:
<?php get_header(); ?> <div id="content" class="narrowcolumn"> ---> I removed the php code here, called "The Loop", which displays the posts </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
The section of interest to us is the last line that loads the footer into the page/site: (get_footer).
If you haven’t read Part 1 of this series you probably think you should be looking for a file called “get_footer.php”, right? WRONG! BLAT! (That’s an annoying sound.) Return to Part 1 of this series, Do Not Pass Go! Each of those bits of “get” code are defined functions. Functions are like macros for PHP, a way of repeating an action without having to do it all over from scratch each time.
Here is the function that loads the footer:
function get_footer() {
do_action( 'get_footer' );
if ( file_exists( TEMPLATEPATH . '/footer.php') )
load_template( TEMPLATEPATH . '/footer.php');
else
load_template( ABSPATH . 'wp-content/themes/default/footer.php');
}If you are interested in locating the file that contains the above function, you’ll have to read Part 1 of this series.
The function get_footer checks for 2 versions of the footer, in this order (called “hierarchy”)…
- A custom footer specifically created/designd for the theme you are using. Please note that even though this footer may be custom for the theme you are using, it should still be called “footer.php”.
- If the theme you are using does not include a custom “footer.php”, the script will then use the sidebar.php file in the default theme directory. That’s that last piece… the “else” section.
That last one is very important. If for some reason you are working with a custom design and the author has not provided you with a theme-based footer.php file, you will have to either modify the default one (NOT recommended in most cases) or place a copy of it in your custom theme’s directory and then modify it!
Have you figured out where the footer.php file is located? If you said
[path/to]wp-content/themes/[theme/name]/footer.php
you are absolutely correct!
Modifying the Content
IMPORTANT: Your theme files must be writable in order to complete this modification. If you do not know what I am referring to, please read Part 2 of this series before proceeding!
Login to your WordPress Admin Area and click on “Design”, then on “Theme Editor”.
Tip: The theme being used is the presented as the theme you will be editing. If for some reason you wanted to edit another theme, you can use the dropdown menu to select that theme. In WordPress 2.5.1 you can’t preview your changes to a theme unless it is the theme in use… or unless you have a plugin installed that allows you to work on a theme without letting your visitors see it; in WordPress 2.6 that feature is part of the core. However, I haven’t tested this yet and from the official information on the WordPress Blog, it sounds like it might only be available for working on a theme that is not currently in use on your blog.
We’re doing things the “old” way, so do not select a theme that is not currently being used… we are going to modify the theme we created in Part 2 of this series and that is in use on our blogs.
On the right side of the page you’ll see a list of all the theme files and stylesheets that are a part of the theme.
Click on Footer to load it into the editor.
Here are the contents of “footer.php”, now loaded into the editor and ready for us to modify (the left/center portions of the page):
<hr /> <div id="footer"> <!-- If you'd like to support WordPress, having the "powered by" link somewhere on your blog is the best way; it's our only promotion or advertising. --> <p> <?php bloginfo('name'); ?> is proudly powered by <a href="http://wordpress.org/">WordPress</a> <br /><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a> and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>. <!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. --> </p> </div> </div> <!-- Gorgeous design by Michael Heilemann - http://binarybonsai.com/kubrick/ --> <?php /* "Just what do you think you're doing Dave?" */ ?> <?php wp_footer(); ?> </body> </html>
Notice that “footer.php” is a mix of HTML and PHP. If you’re not conversant in PHP, don’t let it throw you; we’ll discuss the pertinent bits and pieces as we go.
The part we’re going to modify first is located between the <p></p> tags, that forms the two lines of text displayed on the screen. Let’s look at it closely:
<?php bloginfo('name'); ?> is proudly powered by <a href="http://wordpress.org/">WordPress</a><br />
- <?php bloginfo(’name’); ?> is a bit of PHP script that plugs in the name of your blog.
- is proudly powered by <a href=”http://wordpress.org/”>WordPress</a><br /> is simply plain old text and HTML coding that follows the name of the blog on the first line of the footer.
<a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a> and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.
- <a href=”<?php bloginfo(’rss2_url’); ?>”>Entries (RSS)</a> is a mix of HTML and PHP. The bit of PHP script contained within the <a href> string simply plugs in the path to the RSS feed.
- and <a href=”<?php bloginfo(’comments_rss2_url’); ?>”>Comments (RSS)</a>. is exactly the same as above, just a different link/RSS feed.
- <!– <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. –> is a script string that provides statistics on the page load. It is enclosed in HTML comment tag set, so is not visible on the page — it can only be seen if you view the source. If you want that information to display you can always remove the comment tag set (<!– –>). We’ll leave it there for purposes of this tutorial.
- <?php bloginfo(’name’); ?> is a bit of PHP script that plugs in the name of your blog.
Okay, let’s modify things! First, let’s reorganize and add to the information being displayed.
Locate this line of coding…
<?php bloginfo('name'); ?> is proudly powered byand change it as shown…
<?php bloginfo('name'); ?> © 2008 Your Name Here, All Rights Reserved<br />
Now move on to the next line and modify it as shown.
This line of the file…
<a href="http://wordpress.org/">WordPress</a>
Becomes…
Powered by <a href="http://wordpress.org/">WordPress</a>
Just one more teeny, tiny change left. Change this line…
<br /><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
to this…
:: <a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
Note: Make sure there is a leading space (or use an ) before the two colons!
Let’s save our changes by clicking on the Update button (on the left beneath the Editor).
IMPORTANT: Your theme files must be writable or you will not be able to save your changes! If you do not know what I am referring to, please refer to Part 2 of this series for instructions.
Styling the Modified Footer
At this point, if you view your blog you should see this:
A little bland, eh? Let’s do some styling and add a focal interest!
Continuing to work in the Theme Editor, select the Stylesheet from the list on the right.
This is the styling I added (or modified, as the case may be) in my stylesheet:
#footer {margin-top: 25px; height: 63px;} #footer p {float: left; text-align: right; width: 560px;} #footer img {position: relative; bottom: 0px; left: 20px; padding-left: 10px; margin-top: -30px;}Whatever styling you add, be sure to save your changes!
Now you’ll need to add the image to the footer. Select Footer from the list of files on the right.
The image should be added between the </p> and the </div>; here’s how I added the tipped water can to my footer:
</p> <img src="[path to your theme images]/float-can.gif" width="96" height="77" alt="" /> </div>
Tip: Don’t forget to upload the new image!
While we’re here, let’s add a little helper so that we don’t have to remember to come back and change the copyright each year. Locate this line in the file…
<?php bloginfo('name'); ?> © 2008 Your Name Here, All Rights Reserved<br />
and modify it to add the extra bit of PHP code and to remove the © in the text…
<?php bloginfo('name'); echo date(" Y "); ?>Your Name Here, All Rights Reserved<br />
Tip: Make sure to have a space on either side of the Y, inside the quotes in the new bit of script! Everything between the quotes will be echoed and you want the space to offset the year from the text when the page is generated or it will be a longruntogetherline. “-)
Save your changes by clicking on the Update button (on the left beneath the Editor).
That’s it, we’re all done! See how easy that was? If you view your blog now, it will look something like this:
INFORMATION ABOUT THE STYLING USED HERE: The styling declared will keep the image from riding up over the content of the sidebar when you have a post that is shorter than the length of the content in your sidebar. It’s valid CSS2 and cross-browser compliant (in Opera, IE 6/7 and Firefox), or at least it was when I wrote this article. (sigh)
Keep in mind that the numbers used for height/width and positioning work for the text and image used in this example; you may need to tweak them for your own purposes.
In Article 5 we’ll modify some of the text labels throughout the blog to give it a more personal flavor. Please visit again soon or use one of the subscription links at the top of the sidebar on the right to be notified when the next article is posted.
