Adding a Favicon

Let's have a look at one simple example of how you can use a hook to modify your theme. Favicons are those little icons you see in the tabs, titles, bookmarks, and history areas of your browser. Why not add one to your theme? And while you're at it, you might like to add a larger icon for iPhones, iPads, and iPod touches.

First, create your favicon—there are plenty of online resources to help you out.9 Call your icon favicon.ico, and upload it to your theme's directory.

Next, in functions.php, we'll make a simple function that constructs a link to the location of the favicon. The URL of your theme's files is provided by WordPress's get_bloginfo10 function, and we'll specify the rest of the URL ourselves:

chapter_05/v3/wicked/functions.php (excerpt)

function wicked_favicon() {

echo '<link rel="shortcut icon" href="' . get_bloginfo('stylesheet_directory') . '/images/favicon.ico"/>';

Note that in the above code, we've assumed that your favicon will live in a directory called images—if you put them elsewhere, be sure to say so in your function.

Now, we need to add the action to the theme's head. Fortunately WordPress has an action hook that's triggered when the head element is being constructed: it's called wp_head. So, following the format we saw above for using add_action, all we need to write is:

chapter_05/v3/wicked/functions.php (excerpt)

add_action('wp_head', 'wicked_favicon');

Because the order of links in the head is of no consequence to us, there's no need to worry about specifying a priority; our wicked_favicon function accepts no arguments, so it's unnecessary to specify $accepted_args either. That leaves us with just the action we want to hook into, and the function we want to attach.

The same technique works for including extra style sheets or JavaScript files—anything that ought to go in the head can be added to wp_head.



Was this article helpful?

0 0

Post a comment