How do I edit layout.css in child theme

2 Views

I am working inside child theme.
My style.css file in the child theme works fine but my layout.css file does not work in the child theme.

Directory structure for layout.css in parent theme is mytheme/css/layout.css

Read More

I’ve kept the same directory structure in child theme which is mychildtheme/css/layout.css

But when I write a code in child layout.css, it doesn’t work.

Browser picks the code from parent theme (layout.css)

Kindly let me know what must I do so that my layout.css in child theme will work properly.

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. A stylesheet is different than a regular theme php file. With such a php file, it’s enough to create a file with the same name in your theme, and WP will know to use it. With css, however, it’s not enough to create a file with the same name. You have to explicitly include it into the pages you want.

    The best way to do that would be using the wp_enqueue_style function in your child theme’s function.php file. Here is the way to do it given the directory structure you described:

     <?php wp_enqueue_style( 'child-theme-layout', get_stylesheet_directory_uri().'/css/layout.css' ); ?>

  3. The best solution is to make sure that your child theme’s style.css is loaded after the parent theme’s layout.css. Then you can easily override the small things you need in the usual manner via style.css

    Here is some code that works for WooThemes products, which ensures that your child theme css is always loaded after the parent child’s layout.css

    It belongs in the child theme’s functions.php

    function use_parent_theme_stylesheet() {
    // Use the parent theme's stylesheet
    return get_template_directory_uri() . '/style.css';
}

function my_theme_styles() {
    $themeVersion = wp_get_theme()->get('Version');

    // Enqueue our style.css with our own version
    wp_enqueue_style('child-theme-style', get_stylesheet_directory_uri() . '/style.css',
        array('woo-layout'), $themeVersion);
}

// Filter get_stylesheet_uri() to return the parent theme's stylesheet 
add_filter('stylesheet_uri', 'use_parent_theme_stylesheet');

// Enqueue this theme's scripts and styles (after parent theme)
add_action('wp_enqueue_scripts', 'my_theme_styles', 20);