{"id":3355,"date":"2016-01-07T20:42:53","date_gmt":"2016-01-07T19:42:53","guid":{"rendered":"https:\/\/en.florianbrinkmann.de\/?p=3355"},"modified":"2020-02-09T11:00:01","modified_gmt":"2020-02-09T10:00:01","slug":"creating-a-social-icons-menu-with-svgs-in-wordpress","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/creating-a-social-icons-menu-with-svgs-in-wordpress-3355\/","title":{"rendered":"Creating a social icons menu with SVGs in WordPress"},"content":{"rendered":"\n

For my latest WordPress theme, I modified the output of a standard WordPress menu so that at the frontend URLs to social media channels are displayed as SVG icons. In this post, I show you my solution.<\/p>\n\n\n\n\n\n\n\n

\n

Update from February 14, 2016<\/strong>: I recently tested the menu with a screen reader and noticed, that the SVG accessibility features are not very well supported. Because of that, I updated the post\u2019s content.<\/p>\n<\/div>\n\n\n\n

Why SVG and not the easy to use icon fonts?<\/h2>\n\n\n\n

Icon fonts have some disadvantages in comparison to SVGs \u2014 not only, that they are sometimes rendered incorrectly. SVGs are more semantic and accessible than icon fonts. Sara Soueidan<\/a> wrote a chapter about SVGs in the Smashing Book 5, this is one paragraph from it:<\/p>\n\n\n\n

\u00bbSVGs are semantic. An SVG icon is a graphic \u2014 an image \u2014 so what better way to mark up an image than to use a (scalable vector) graphic tag? An SVG element (<svg><\/code>) represents an icon simply and semantically, while icon fonts usually require non-semantic markup like pseudo-elements and empty s to be displayed. For people concerned about semantics and accessibility this introduces a serious issue: these elements don\u2019t accommodate screen readers well, not to mention that the markup generally just doesn\u2019t make much sense \u2014 if any \u2014 for an image.\u00ab<\/p><\/blockquote>\n\n\n\n

For this reason, I did not want to use an icon font, but SVGs.<\/p>\n\n\n\n

The solution for the SVG menu: a custom Walker_Nav_Menu<\/code> class<\/h2>\n\n\n\n

The SVG file with the social media icons looks like that:<\/p>\n\n\n

<svg<\/span> version<\/span>=\"1.1\"<\/span> xmlns<\/span>=\"http:\/\/www.w3.org\/2000\/svg\"<\/span> style<\/span>=\"display: none;\"<\/span>><\/span>\n    <symbol<\/span> id<\/span>=\"icon-twitter\"<\/span> viewBox<\/span>=\"0 0 16 16\"<\/span>><\/span>\n        <path<\/span> d<\/span>=\"M15,3.627c-0.515,0.229-1.068,0.383-1.649,0.452c0.592-0.355,1.048-0.918,1.262-1.589\n\tc-0.554,0.329-1.169,0.568-1.822,0.697c-0.524-0.558-1.271-0.907-2.098-0.907c-1.586,0-2.872,1.286-2.872,2.872\n\tc0,0.225,0.026,0.444,0.075,0.654c-2.387-0.12-4.504-1.263-5.921-3.001C1.728,3.229,1.586,3.724,1.586,4.25\n\tc0,0.996,0.506,1.875,1.277,2.39C2.393,6.625,1.95,6.496,1.562,6.281c0,0.013,0,0.024,0,0.037c0,1.392,0.989,2.552,2.304,2.816\n\tC3.625,9.199,3.372,9.234,3.11,9.234c-0.186,0-0.365-0.02-0.541-0.051c0.366,1.142,1.427,1.971,2.683,1.993\n\tc-0.982,0.771-2.222,1.23-3.566,1.23c-0.232,0-0.461-0.014-0.686-0.041c1.271,0.816,2.78,1.291,4.402,1.291\n\tc5.284,0,8.174-4.377,8.174-8.172c0-0.124-0.004-0.248-0.01-0.371C14.127,4.708,14.615,4.203,15,3.627z\"<\/span>\/><\/span>\n    <\/symbol<\/span>><\/span>\n\n    <symbol<\/span> id<\/span>=\"icon-feed\"<\/span> viewBox<\/span>=\"0 0 16 16\"<\/span>><\/span>\n        <path<\/span> d<\/span>=\"M2,6v2c3.309,0,6,2.691,6,6h2C10,9.582,6.418,6,2,6z M2,2v2c5.514,0,10,4.486,10,10h2\n\t\tC14,7.373,8.627,2,2,2z M3.5,11C2.671,11,2,11.672,2,12.5S2.671,14,3.5,14S5,13.328,5,12.5S4.329,11,3.5,11z\"<\/span>\/><\/span>\n    <\/symbol<\/span>><\/span>\n<\/svg<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Theoretically, there is the possibility to insert a title<\/code> element inside the svg<\/code> \u2014 for example, to provide a title for screen reader users. That does not work in many combinations of screen readers and browsers. To provide an accessible title for the icons, we use a span<\/code> element which is hidden via CSS. The desired SVG icon is shown with the help of the use<\/code> element.<\/p>\n\n\n
<svg<\/span> class<\/span>=\"icon-twitter\"<\/span>><\/span>\n   <use<\/span> xlink:href<\/span>=\"\/pfad-zum-theme\/svg\/social-media-icons.svg#icon-twitter\"<\/span>\/><\/span>\n<\/svg<\/span>><\/span>\n<span<\/span> class<\/span>=\"screen-reader-text\"<\/span>><\/span>Twitter<\/span<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The hash value at the end of the file path matches the ID of the icon\u2019s symbol<\/code> element. So we need this code with the right hash value inside each menu item. To modify the output of wp_nav_menu()<\/code>, we can specify a Walker class.<\/p>\n\n\n
if<\/span> ( has_nav_menu( 'social'<\/span> ) ) {\n   wp_nav_menu(\n      array<\/span>(\n         'theme_location'<\/span> => 'social'<\/span>,\n         'menu_class'<\/span>     => 'social-menu'<\/span>,\n         'container'<\/span>      => ''<\/span>,\n         'walker'<\/span>         => new<\/span> Svg_Social_Menu_Walker(),\n         'depth'<\/span>          => 1<\/span>\n      )\n   );\n}<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
We will create a child class of Walker_Nav_Menu<\/code> because we only need to modify its start_el()<\/code> method. This method controls the output of menu items. We can copy large parts of this method, and the following code shows only the modified parts with copied code lines for reference.<\/p>\n\n\n
class<\/span> Svg_Social_Menu_Walker<\/span> extends<\/span> Walker_Nav_Menu<\/span> <\/span>{\n   \/\/ [\u2026]<\/span>\n   public<\/span> function<\/span> start_el<\/span>( &$output, $item, $depth = 0<\/span>,\n      $args = array()<\/span>, $id = 0<\/span> )<\/span> <\/span>{\n      \/\/ [\u2026]<\/span>\n      $title = apply_filters( 'nav_menu_item_title'<\/span>, $title, $item, $args, $depth );\n\n      $social_media_channels = array<\/span>(\n         'plus.google.com'<\/span> => array<\/span>(\n            'id'<\/span>                 => 'icon-google-plus'<\/span>,\n            'screen-reader-text'<\/span> => __( 'Google Plus'<\/span>, 'hannover'<\/span> )\n         ),\n         'wordpress.org'<\/span>   => array<\/span>(\n            'id'<\/span>                 => 'icon-wordpress'<\/span>,\n            'screen-reader-text'<\/span> => __( 'WordPress.org'<\/span>, 'hannover'<\/span> )\n         ),\n         'wordpress.com'<\/span>   => array<\/span>(\n            'id'<\/span>                 => 'icon-wordpress'<\/span>,\n            'screen-reader-text'<\/span> => __( 'WordPress.com'<\/span>, 'hannover'<\/span> )\n         ),\n         'facebook.com'<\/span>    => array<\/span>(\n            'id'<\/span>                 => 'icon-facebook'<\/span>,\n            'screen-reader-text'<\/span> => __( 'Facebook'<\/span>, 'hannover'<\/span> )\n         ),\n         'twitter.com'<\/span>     => array<\/span>(\n            'id'<\/span>                 => 'icon-twitter'<\/span>,\n            'screen-reader-text'<\/span> => __( 'Twitter'<\/span>, 'hannover'<\/span> )\n         ),\n         'dribbble.com'<\/span>    => array<\/span>(\n            'id'<\/span>                 => 'icon-dribbble'<\/span>,\n            'screen-reader-text'<\/span> => __( 'Dribbble'<\/span>, 'hannover'<\/span> )\n         ),\n         'pinterest.com'<\/span>   => array<\/span>(\n            'id'<\/span>                 => 'icon-pinterest'<\/span>,\n            'screen-reader-text'<\/span> => __( 'Pinterest'<\/span>, 'hannover'<\/span> )\n         ),\n         'github.com'<\/span>      => array<\/span>(\n            'id'<\/span>                 => 'icon-github'<\/span>,\n            'screen-reader-text'<\/span> => __( 'GitHub'<\/span>, 'hannover'<\/span> )\n         ),\n         'tumblr.com'<\/span>      => array<\/span>(\n            'id'<\/span>                 => 'icon-tumblr'<\/span>,\n            'screen-reader-text'<\/span> => __( 'Tumblr'<\/span>, 'hannover'<\/span> )\n         ),\n         'youtube.com'<\/span>     => array<\/span>(\n            'id'<\/span>                 => 'icon-youtube'<\/span>,\n            'screen-reader-text'<\/span> => __( 'YouTube'<\/span>, 'hannover'<\/span> )\n         ),\n         'flickr.com'<\/span>      => array<\/span>(\n            'id'<\/span>                 => 'icon-flickr'<\/span>,\n            'screen-reader-text'<\/span> => __( 'Flickr'<\/span>, 'hannover'<\/span> )\n         ),\n         'vimeo.com'<\/span>       => array<\/span>(\n            'id'<\/span>                 => 'icon-vimeo'<\/span>,\n            'screen-reader-text'<\/span> => __( 'Vimeo'<\/span>, 'hannover'<\/span> )\n         ),\n         'instagram.com'<\/span>   => array<\/span>(\n            'id'<\/span>                 => 'icon-instagram'<\/span>,\n            'screen-reader-text'<\/span> => __( 'Instagram'<\/span>, 'hannover'<\/span> )\n         ),\n         'linkedin.com'<\/span>    => array<\/span>(\n            'id'<\/span>                 => 'icon-linkedin'<\/span>,\n            'screen-reader-text'<\/span> => __( 'LinkedIn'<\/span>, 'hannover'<\/span> )\n         ),\n         'xing.de'<\/span>         => array<\/span>(\n            'id'<\/span>                 => 'icon-xing'<\/span>,\n            'screen-reader-text'<\/span> => __( 'Xing'<\/span>, 'hannover'<\/span> )\n         ),\n         'xing.com'<\/span>        => array<\/span>(\n            'id'<\/span>                 => 'icon-xing'<\/span>,\n            'screen-reader-text'<\/span> => __( 'Xing'<\/span>, 'hannover'<\/span> )\n         ),\n         '\/feed'<\/span>           => array<\/span>(\n            'id'<\/span>                 => 'icon-feed'<\/span>,\n            'screen-reader-text'<\/span> => __( 'Feed'<\/span>, 'hannover'<\/span> )\n         ),\n      );<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
Own code begins at $social_media_channels<\/code>. Here we have to connect the URLs of the social networks with the IDs from the SVG file and the screen reader titles. We create an array of channel URL keys with value arrays, which include the respective ID and screen reader text for this channel.<\/p>\n\n\n
$svg_id = \"\"<\/span>;\n\nforeach<\/span> ( $social_media_channels as<\/span> $key => $value ) {\n   $pattern = \"|$key|\"<\/span>;\n   preg_match( $pattern, $atts['href'<\/span>], $matches );\n   if<\/span> ( ! empty<\/span>( $matches[0<\/span>] ) ) {\n      $match                  = $matches[0<\/span>];\n      $svg_id                 = $social_media_channels[ $match ]['id'<\/span>];\n      $svg_screen_reader_text = $social_media_channels[ $match ]['screen-reader-text'<\/span>];\n      break<\/span>;\n   }\n}<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
In the next step, we save an empty string in a variable $svg_id<\/code> and loop through the channel array. Inside the foreach<\/code> loop, we can access the current array key with $key<\/code> and the respective value (the array with ID and screen reader text) with $value<\/code>. $atts['href']<\/code> holds the URL of the current menu item. We need to compare this value with the array key, so we save the pattern |$key|<\/code>.<\/p>\n\n\n\n
After that, we use preg_match()<\/code> and pass the pattern, the menu item\u2019s URL and a variable for matches as parameters. If $matches[0]<\/code> is not empty, the current array key matches a part of the menu item\u2019s URL. The value of this array position is $key<\/code>, so the URL of the social media channel. If there is a match, we save this URL from $matches[0]<\/code> in $match<\/code> and fetch the ID from $social_media_channels[ $match ]['id'];<\/code> and the screen reader text from $social_media_channels[ $match ]['screen-reader-text'];<\/code>. After that, we break the loop.<\/p>\n\n\n
if<\/span> ( $svg_id != \"\"<\/span> ) {\n   $icon_url    = plugins_url( \"svg\/social-media-icons.svg#$svg_id\"<\/span>, __DIR__<\/span> );\n   $item_output = $args->before;\n   $item_output .= '<a'<\/span> . $attributes . '>'<\/span>;\n   $item_output .= '<svg class=\"'<\/span> . $svg_id . '\"><use xlink:href=\"'<\/span> . $icon_url . '\"><\/use><\/svg><span class=\"screen-reader-text\">'<\/span> . $svg_screen_reader_text . '<\/span>'<\/span>;\n   $item_output .= '<\/a>'<\/span>;\n   $item_output .= $args->after;\n} else<\/span> {\n   $item_output = $args->before;\n   $item_output .= '<a'<\/span> . $attributes . '>'<\/span>;\n   $item_output .= $args->link_before . $title . $args->link_after;\n   $item_output .= '<\/a>'<\/span>;\n   $item_output .= $args->after;\n}<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
Finally, we have to build the markup. If $svg_id<\/code> is not empty, we can display an SVG. In this case, we store the URL from the SVG file in $icon_url<\/code> and append the ID after a #<\/code>. The following two lines are copied from the parent class. In the next line, we create an svg<\/code> element with the ID as a class, so it can be styled. As the href<\/code> attribute of the use<\/code> element, we pass the URL and close the opened tags. After that, we wrap a span<\/code> with the class screen-reader-text<\/code> around the title. The else<\/code> code is the default behavior.<\/p>\n\n\n\n
Plugin<\/h2>\n\n\n\n
I created a small plugin that implements the feature as a widget. To use it, do the following after activation the plugin:<\/p>\n\n\n\n
  1. Create a menu with social media links<\/li>
  2. Choose \u00bbSVG Social Menu\u00ab as menu position<\/li>
  3. Drag the widget into a widget area<\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"
    For my latest WordPress theme, I modified the output of a standard WordPress menu so that at the frontend URLs to social media channels are displayed as SVG icons. In this post, I show you my solution.<\/p>\n","protected":false},"author":1,"featured_media":3357,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-3355","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"wp-worthy-pixel":{"ignored":false,"public":"a95ad5b15e984c9dac3b0e037d4eefc8","server":"vg01.met.vgwort.de","url":"https:\/\/vg01.met.vgwort.de\/na\/a95ad5b15e984c9dac3b0e037d4eefc8"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=3355"}],"version-history":[{"count":4,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3355\/revisions"}],"predecessor-version":[{"id":5943,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3355\/revisions\/5943"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media\/3357"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=3355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=3355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=3355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}