Scrapbook / Web Design & Devleopment

Apple touch icons WordPress function

apple-touch-icon-img

This is a WordPress function you can use output apple touch icons in the head of your template without having to add them in manually. You can add the following code into the functions.php file and it will search your websites root directory and theme directory for both normal & precomposed Apple touch icons and output them within the head of your theme. This saves you from manually adding them yourself and also tidies up your code a bit.

You will want to name your icons like so ‘apple-touch-icon-57×57’ and so on through the different sizes to make the function work. You can re-write this function to make it better and if you do, please comment with the changes you have made so that I can update/improve this function.

<?php
/**
 * Adds a apple touch link to the page head
 */
function appleTouchLink(){
        // list of directories to check for icons
        $directories = array(
                rtrim(get_stylesheet_directory(), '/') . '/'      =>  rtrim(get_stylesheet_directory_uri(), '/') . '/',                // theme directory
                rtrim(ABSPATH, '/') . '/'       => rtrim(site_url(), '/') . '/' // web root
        );

        /**
         * Add references to any existing IOS icons
         */
        $iconName = 'apple-touch-icon%s%s.png';      // the icon name convention
        $iconSizes = array(                                     // available icon sizes
                '',
                '57x57',
                '72x72',
                '114x114',
                '144x144'
        );

        foreach($iconSizes as $size){
                $hasSize = $size != ''; // check whether we actually have a size defined or if it is empty (default)

                $files = array(
                        'apple-touch-icon'                              => sprintf($iconName, $hasSize ? '-' . $size : '', ''),
                        'apple-touch-icon-precomposed'  => sprintf($iconName, $hasSize ? '-' . $size : '', '-precomposed')
                );

                foreach($directories as $dir => $url){
                        foreach($files as $rel => $file){
                                if(file_exists($dir . $file)){
                                        // we have an icon file
                                        echo '<link rel="' . $rel . '"' . ($hasSize ? ' sizes="' . $size . '"' : '') . ' href="' . $url . $file . '">' . "\n";
                                        break 2;        // break out of the file and directories loop
                                }
                        }
                }
        }
}
// add apple icon link call
add_action( 'wp_head', 'appleTouchLink');
?>

Available on Github

What next?

Check out some of my work!

I'm constantly working on new and exciting projects. Check out my web design and development portfolio with write-ups on how each project was conducted. Looking for some great photography? Check out my latest photography articles or browse the whole colection. Finally, I love to write. I write about everything from the web and photography to many other subjects that interest me.