There are a number of interesting attacks out there, and one of them is related to Genericons, which are used by the Twenty Fourteen theme. There are also serious performance issues with Genericons, so dumping them is a good idea. Here is how I did that without using a child theme. My whole goal for using Twenty Fourteen was to modify it without using a child theme. Not that hard to do, but it does take some forethought. Here is how I achieved this bit of magic and boosted performance at the same time!
Genericons provides the WordPress Twenty Fourteen theme with the down arrow in menus as well as the various little icons across the metadata of each post. You see them without even noticing them, but once they are gone, your site looks like it has funky characters in the body of your home page and others. There are two things you need to do to remove Genericons:
- Remove the enqueued CSS file
- Use a different font to serve the same purpose
There are two ways to remove the enqueued CSS file: via a prebuilt plugin or via your own plugin. I chose my own plugin for various other reasons. However, a prebuilt plugin exists as well. That is the Asset Queue Manager, which allows you to dequeue various enqueued CSS and JS files without writing your own code. Or you can go the route I took, which is to build your own plugin to meet the other needs of your site. The magic lines to add to your plugin are:
// Remove Lato/Genericons Fonts
function my_dequeue_fonts() {
wp_dequeue_style('twentyfourteen-lato');
wp_dequeue_style('genericons');
}
add_action( 'wp_enqueue_scripts', 'my_dequeue_fonts', 11 );
Now, in the code above, I also remove the twentyfourteen-lato font, not because it was causing problems, but I just did not use it. This allows you to have one less CSS or other file grabbed from Google, which increases performance. More on that in another post. The critical code is the add_action line. That must be placed after everything else is enqueued, so that you can dequeue in the proper order. Since Genericons is added in the tenth slot (by default), we specify to use the eleventh slot.
Now that the Genericons CSS is removed from your site, you can use a different font to handle your font needs. This will include adding fonts for the menu and other little things throughout the Twenty Fourteen theme. For this, I used the Simple Custom CSS plugin to allow me to edit additional CSS without a child theme once more. I added the following code to the top of the custom CSS stylesheet to replace Genericons with Font Awesome:
.bypostauthor > article .fn:before, .comment-edit-link:before, .comment-reply-link:before, .comment-reply-login:before, .comment-reply-title small a:before, .contributor-posts-link:before, .menu-toggle:before, .search-toggle:before, .slider-direction-nav a:before, .widget_twentyfourteen_ephemera .widget-title:before { font: normal 16px/1 FontAwesome !important; } .hentry .mejs-overlay-button:before { content: "\f0da" !important; font: normal 32px/1.125 FontAwesome !important; } .hentry .mejs-controls .mejs-button button { font: normal 16px/1 FontAwesome !important; } .hentry .mejs-playpause-button.mejs-play button:before { content: "\f0da" !important; } .hentry .mejs-playpause-button.mejs-pause button:before { content: "\f04c" !important; } .hentry .mejs-volume-button.mejs-mute button:before { content: "\f026" !important; } .hentry .mejs-volume-button.mejs-unmute button:before { content: "\f028" !important; } .hentry .mejs-fullscreen-button button:before { content: "\f0b2" !important; } .hentry .mejs-fullscreen-button.mejs-unfullscreen button:before { content: "\f047" !important; } .attachment span.entry-date:before, .entry-content .edit-link a:before, .entry-meta .edit-link a:before, .site-content .byline a:before, .site-content .comments-link a:before, .site-content .entry-date a:before, .site-content .featured-post:before, .site-content .full-size-link a:before, .site-content .parent-post-link a:before, .site-content .post-format a:before { font: normal 16px/1 FontAwesome !important; } .search-toggle:before { content: "\f002" !important; } .menu-toggle:before { content: "\f0c9" !important; } .contributor-posts-link:before { content: "\f016" !important; } .bypostauthor > article .fn:before { content: "\f005" !important; } .comment-edit-link:before { content: "\f040" !important; } .comment-reply-link:before,.comment-reply-login:before { content: "\f112" !important; } .comment-reply-title small a:before { content: "\f00d" !important; } .content-sidebar .widget_twentyfourteen_ephemera .video.widget-title:before { content: "\f04b" !important; } .content-sidebar .widget_twentyfourteen_ephemera .audio.widget-title:before { content: "\f028" !important; } .content-sidebar .widget_twentyfourteen_ephemera .image.widget-title:before { content: "\f03e" !important; } .content-sidebar .widget_twentyfourteen_ephemera .gallery.widget-title:before { content: "\f03e" !important; } .content-sidebar .widget_twentyfourteen_ephemera .aside.widget-title:before { content: "\f10c" !important; } .content-sidebar .widget_twentyfourteen_ephemera .quote.widget-title:before { content: "\f10e" !important; } .content-sidebar .widget_twentyfourteen_ephemera .link.widget-title:before { content: "\f0c1" !important; } .slider-direction-nav a:before { content: "\f060" !important; } .slider-direction-nav .slider-next:before { content: "\f061" !important; } .site-content .format-video .post-format a:before { content: "\f0da" !important; } .site-content .format-audio .post-format a:before { content: "\f028" !important; } .site-content .format-gallery .post-format a:before, .site-content .format-image .post-format a:before { content: "\f03e" !important; } .site-content .format-quote .post-format a:before { content: "\f10e" !important; } .site-content .format-aside .post-format a:before { content: "\f03e" !important; } .site-content .format-link .post-format a:before { content: "\f0c1" !important; } .site-content .featured-post:before { content: "\f08d" !important; } .site-content .entry-date a:before, .attachment .site-content span.entry-date:before { content: "\f017" !important; } .site-content .byline a:before { content: "\f007" !important; } .site-content .comments-link a:before { content: "\f075" !important; } .entry-content .edit-link a:before,.entry-meta .edit-link a:before { content: "\f040" !important; } .site-content .full-size-link a:before { content: "\f00e" !important; } .site-content .parent-post-link a:before { content: "\f07c" !important; } .primary-navigation .menu-item-has-children > a:after, .primary-navigation .page_item_has_children > a:after { content: "\f078" !important; font: normal 8px/1 FontAwesome !important; } .primary-navigation .menu-item-has-children li.menu-item-has-children > a:after, .primary-navigation .menu-item-has-children li.page_item_has_children > a:after, .primary-navigation .page_item_has_children li.menu-item-has-children > a:after, .primary-navigation .page_item_has_children li.page_item_has_children > a:after { content: "\f0da" !important; } .secondary-navigation .menu-item-has-children > a:after { content: "\f054" !important; font: normal 8px/1 FontAwesome !important; }
Since I am using Font Awesome elsewhere on the site and Genericons has so many issues, it is best to remove it completely. By removing the Lato font as well, I limit my CSS loaded fonts to just Font Awesome. I use Font Awesome for menus as well as for other graphics on the site (namely, those for social media). So, I have also loaded the following plugins to help with this and to use a childless Twenty Fourteen theme:
Icon Fonts is configured to only use Font Awesome.
This just leaves Emoji and Dashicons as part of the site. But removing Genericons has sped up my processing by a huge amount. Now all I have to do is to keep this updated when the Twenty Fourteen theme is updated.
