0

I have created a child theme for my parent theme. Just added style.css and functions.php files in child theme.

Original Theme Name: Verb Lite (Directory name verb-lite)

I created new folder verb-lite-child in themes folder, added the following files.

style.css file

/*
 Theme Name:   Verb Lite Child Theme
 Description:  A child theme of the Verb Lite theme
 Template:     verb-lite
 Version:      1.0.0
*/

functions.php file to enqueue parent styles,

<?php
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . 
    '/style.css' );
    }
?>

Now when I preview my theme, the styles are broken, the parent styles are not loaded.

Is there anything I missed there.

  • Your style.css might have problem in its header. Try removing the Theme word from the name, and also try to include the full header as shown here. – Jack Johansson Oct 22 '17 at 12:43
  • @JackJohansson I tried to remove name and also included full header. But still the styles are broken. – Mann Oct 22 '17 at 12:53
1

If I open syyle.css from original theme I see

*/ /* Themely is based off of Understrap which uses the Underscores starter theme merged with the Bootstrap Framework. The default styles can be found in /css/theme.css and /css.theme.min.css.

The styles loaded when I enqueued theme.css ad theme.min.css files.

My functions.php file now

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'verb-lite-styles', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'verb-lite-cssstyles', get_template_directory_uri() . '/css/theme.css' );
    wp_enqueue_style( 'verb-lite-cssMinstyles', get_template_directory_uri() . '/css/theme.min.css' );
}
?>
0

There is wrong $handle for the parent theme you use. Change parent-style to Verb Lite's verb-lite-styles.

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style(
        'verb-lite-styles', // See here
        get_template_directory_uri() . '/style.css'
    );
}

parent-style is the same $handle used in the parent theme when it registers its stylesheet

(Citation from Codex)

Updated

according the OP's self-answer.

Verb Lite's 'enqueue styles' is poorly programmed and doesn't use style dependencies, as could be seen in it's inc/enqueue.php file.

Enqueue all the styles with the respect of their dependencies:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

    wp_enqueue_style(
        'verb-lite-understrap-styles',
        get_template_directory_uri() . '/css/theme.min.css',
        array() // no dependencies
    );
    wp_enqueue_style(
        'verb-lite-google-fonts',
        'https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i|Open+Sans:100,300,400,600,700,700italic,600italic,400italic'),
        array(
            'verb-lite-understrap-styles',  // depends on understrap
        )
    );
    wp_enqueue_style(
        'verb-lite-styles',
        get_template_directory_uri() . '/style.css',
        array(
            'verb-lite-understrap-styles', // depends on both understrap and Google fonts
            'verb-lite-google-fonts'
        )
    );
}
  • See my answer, i could load styles, but the menu's custom css changes, and all didn't come. – Mann Oct 22 '17 at 13:40
  • See the updated answer. – Max Yudin Oct 22 '17 at 14:32

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.