Remove Genericons Helper CSS from twentyfourteen theme

Question

I'd like to remove the genericons-css styles loaded by default into twentyfourteen theme.

<link rel='stylesheet' id='genericons-css'  href='http://ffwdconsulting.com/wp/wp-content/themes/twentyfourteen/genericons/genericons.css?ver=3.0.2' type='text/css' media='all' />

I followed How to remove CSS file in the header using Wordpress functions? with this code:

function dequeue_my_css() {
  wp_dequeue_style('genericons-css');
  wp_deregister_style('genericons-css');
}
add_action('wp_enqueue_scripts','dequeue_my_css');

but doesn't work. Link to css still shows up in the header.

Answer 1

First of all, you're trying to deregister a stylesheet that doesn't exist. Here is how the genericon stylesheet is enqueued in twenty fourteen

wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.0.2' );

You are trying to dequeue the stylesheet file name. Here is the wp_enqueue_style() function

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

The important part here is the $handle

$handle (string) (required) Name used as a handle for the stylesheet.

You should use the $handle if you need to dequeue a stylesheet. Another thing to remember, you are running a child theme (I really hope so). Child theme functions are loaded first, so you will need to give your deregister function a priority of more than 10, otherwise your functions will not work.

Here is the working function

function dequeue_my_css() {
  wp_dequeue_style('genericons');
  wp_deregister_style('genericons');
}
add_action('wp_enqueue_scripts','dequeue_my_css', 100);

In the twenty fourteen theme, this will however break the complete styling of your theme. Unfortunately the author has made the main stylesheet dependant on the genericon stylesheet, so if you dequeue the genericon stylesheet, you "dequeue" the main stylesheet as well.

Answer 2

Here's one solution you may consider considering what @goose has already stated:

You could and should always create a child theme so why not copy over the parent themes style sheet and dequeue your genericons and then enqueue your child themes style sheet.

function dequeue_twenty_fourteen_css() {
  wp_dequeue_style('genericons');
  wp_deregister_style('genericons');
}
add_action('wp_enqueue_scripts','dequeue_twenty_fourteen_css', 100);


wp_enqueue_style( 'twenty-fourteen-style', get_stylesheet_directory_uri() . '/style.css', array(), '1.0.0' );

You'd also add something like this to the header the the style.css file in your child theme after copying over the parent themes style sheet.

/*
Theme Name: 2014 Child
Description:    Child Theme for TWenty Fourteen
Author: Brad Dalton http://wpsites.net
Template: twentyfourteen
*/

@import url("../twentyfourteen/style.css");

Tested and works.