I'm building my child theme, but including materialize css that I want to use, breaks the entire site when enqueued in functions.php. How do I change that?

function bla_enqueue_child_theme_styles() {

    wp_enqueue_style('cookie-font', 'http://fonts.googleapis.com/css?family=Cookie');
    //wp_enqueue_style('datatables-css', 'https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.css');
    wp_enqueue_style('materialize-css', 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css', 0);
    wp_enqueue_style('cake-child-style', get_stylesheet_directory_uri().'/style.css', '', 1, 'all');

    wp_enqueue_script('new-jquery', 'https://code.jquery.com/jquery-3.1.1.min.js');
    wp_enqueue_script('materialize-js', 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js');
    //wp_enqueue_script('datatables-js', 'https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js');
    wp_enqueue_script('custom', get_stylesheet_directory_uri() . '/custom.js');

add_action( 'wp_enqueue_scripts', 'bla_enqueue_child_theme_styles', -20);
  • Could you please elaborate on how exactly your website breaks when you enqueue matirialize's CSS? Some screenshots may help. Commented Mar 8, 2017 at 20:38
  • The materialize css library overrides the parent css. To negate this effect I want materialize to load first and the parent css later.
    – Thomas
    Commented Mar 8, 2017 at 20:41
  • 1
    What is your parent theme? Is it publicly available somewhere? I think the answer to your question depends on how and when is that theme enqueueing its own styles. Commented Mar 8, 2017 at 20:47
  • Cake by codeopus, it's not free I'm affraid. However is there not some other hook or priority parameter? It would be kinda weird if that's impossible right
    – Thomas
    Commented Mar 8, 2017 at 20:51
  • 1
    Let us continue this discussion in chat. Commented Mar 8, 2017 at 21:19

2 Answers 2


How do I load it before the parent theme?

I think you are doing it right. If the parent theme is attaching the function responsible for enqueueing its styles to the wp_enqueue_scripts hook, then your bla_enqueue_child_theme_styles() function must be being executed first (because you passed -20 as priority) and your styles should be being included first in the page's source code.

The fact that Materialize's CSS rules are overriding the parent theme's may not be related to the order in which the stylesheets are being included, but to the specificity of the selectors being used in those stylesheets.

Cake is likely to be using some kind of CSS framework as well, either one developed by a third party or a custom one. In that case, is very likely that both Cake and Materialize are trying to solve the same problems, but using different methods, creating conflicts in the process.


You could first dequeue the parent stylesheet, then enqueue the child stylesheet and finally enqueue the parent stylesheet.

Dequeueing the parent stylesheet should work like this:

function PREFIX_remove_scripts() {

    wp_dequeue_style( 'screen' );
    wp_deregister_style( 'screen' );

    wp_dequeue_script( 'site' ); // optional 
    wp_deregister_script( 'site' ); // optional

    // Now register your styles and scripts here 


add_action( 'wp_enqueue_scripts', 'PREFIX_remove_scripts', 20 );

…as described in the answer to this question: "How do I dequeue a parent theme's CSS file?"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.