Since version 4.3 WordPress introduces the ability to add a Icon automaticly to your site through the Customizer / Site Identity module. In fact this icon is known as the FavIcon and it is based in a very fuzzy and changing specification that, in addition, depends on the devices to what the favicon is prepared for, so WordPress developers team has logically opted for an very standard HTML output for favIcons. This standard HTML output works but perhaps you want to improve, extend or adapt it to other devices or programmes that are going to read it and use it. (See the next examples).
There are several methods for changing this HTML FavIcon output and include improved sentences for its definition, ones more radicals, ones more WordPress code friendly, but in this example I’m going to propouse one method based on the conservative approaches so I’ll use a filter instead of redefine the list of actions attached to the wp_head
action –that it’s also an option–.
This method can be used for changing completly the output of the function wp_site_icon
(see wp_site_icon official documentation) but in this example we’ll simply add the HTML attribute type
to the sentences that can need it and to make this change we’re going to use the filter called site_icon_meta_tags
that it’s called inside the function wp_site_icon
just before the function returns its output. (for a further reference of the use and meaning of WordPress filters you can see this article).
First we’re going to see an example of a standard wp_site_icon
function output…
<link rel="icon" href="http://site.com/wp-content/uploads/2016/04/MyLogo.png" sizes="32x32" /> <link rel="icon" href="http://site.com/wp-content/uploads/2016/04/MyLogo.png" sizes="192x192" /> <link rel="apple-touch-icon-precomposed" href="http://site.com/wp-content/uploads/2016/04/MyLogo.png" /> <meta name="msapplication-TileImage" content="http://site.com/wp-content/uploads/2016/04/MyLogo.png" />
And now, we’re going to show what is our goal.
<link rel="icon"type="image/png"
href="http://site.com/wp-content/uploads/2016/04/MyLogo.png" sizes="32x32" /> <link rel="icon"type="image/png"
href="http://site.com/wp-content/uploads/2016/04/MyLogo.png" sizes="192x192" /> <link rel="apple-touch-icon-precomposed" href="http://site.com/wp-content/uploads/2016/04/MyLogo.png" /> <meta name="msapplication-TileImage" content="http://site.com/wp-content/uploads/2016/04/MyLogo.png" />
The proposed solution for today’s problem has two parts, firstly an instruction for attaching the function to the filter site_icon_meta_tags
and secondly, the filter function itself, so that our code will have an structure like this.
<?php // the filter function function our_filter_function ( $metaTags ) { // here the code for filtering } // here we attach the function to the filter add_filter ('site_icon_meta_tags', 'our_filter_function', 10, 1); ?>
and we’ll develop our filter function, taking into account two things:
- the filter
site_icon_meta_tags
receives an array of the HTML meta tags so we have to treat individualy each of the elements of the array. - we need to find out the type of the image of each meta tag because each kind of image has a different HTML attribute
type
so that, we have to develope an additional second function to treat individually each kind of image extension
So, the code of the solution could be like this:
<?php // For expanding and simplify the code we create a separate function for treating the URL of the images function get_favicon_image_extension_type_attribute ( $t ) { $base = strtolower( substr ( $t, -4 ) ); switch ( $base ) { case '.ico' : $type = 'image/x-icon'; break; case '.jpg' : case 'jpeg' : $type = 'image/jpeg'; break; default : $type = 'image/' . substr ( $base, 1, 3 ); } return apply_filters ( 'get_favicon_image_extension_type_attribute', $type, $t, $base ); } // Here the filter function itself function filter_default_wp_icon_module_literals ( $literals ) { // using the next filter we can decide which elements of the array of meta tags want to treat. $lines_to_change = apply_filters ( 'lines_of_favicon_metas_to_change', array ( 0, 1 ) ); foreach ( $lines_to_change as $i ) { // extracting the URL of the image preg_match_all ( '/href=\"([^\"]*)\"{1}/', $literals[$i], $matches ); // get the mime image type and creating "image/type" or whatever associated with its extension $type = get_favicon_image_extension_type_attribute ( $matches[1][0] ); // Introducing type="image/type" the HTML code $literals[$i] = str_replace ( '"icon" href', '"icon" type="' . $type . '" href', $literals[$i] ); } return $literals; } // here we attach the filter function to the WP filter add_filter ( 'site_icon_meta_tags', 'our_filter_function', 10, 1 ); ?>
Well, this is the example, you can use it for adding more attributes, suppressing or adding new lines to the array of meta tags, etc. I hope this code becomes useful for you.
One last thing, I suspect that there are more elegant and sophisticated solutions (some of them probably in just one line of code using the PHP function preg_replace_callback, I suppose) but for the purpose of this article I prefer to show a solution with a very clear code. Thanks for your understanding.
Have a nice WordPressing!
Thank Yoy for a simple solution of old theme support with new api!
Thanks, Nos.
Good day! I just would like to give you a huge thumbs up for the great information you have got right here on this post.
I am coming back to your site for more soon.
[ERROR CHECKING URL] my web page: 12 bet mobile
Thanks, Buster.
Way cool! Some extremely valid points! I appreciate you writing this write-up and the rest of
the website is very good.
Thanks for your comment.