1

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. – Willington Vega Mar 8 '17 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 Mar 8 '17 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. – Willington Vega Mar 8 '17 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 Mar 8 '17 at 20:51
  • 1
    Let us continue this discussion in chat. – Willington Vega Mar 8 '17 at 21:19
3

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.

| improve this answer | |
1

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?"

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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