Child theme looks nothing like parent theme

  • Resolved anw618

    (@anw618)


    9 years, 10 months ago

    Hi there,

    I’ve just encountered my first loss of custom styling via a parent theme update, so I want to do it right and create a child theme from which I can work in the future.

    I’ve created the new directory in the Themes folder. My parent theme is Interface, and I’ve named my child theme Interface-child. So I have Themes>Interface-child>style.css. I have tried both the @import style sheet method as well as wp_enqueue_style() in a functions.php file.

    Regardless, I cannot for the life of me get the child theme to look like the parent theme. I haven’t even made any changes to the styling…I figured I’d make sure the basic child setup works before making a bunch of changes.

    Here’s what I’ve got in my style sheet:

    /*
Theme name: interface child
Theme URI: https://ad-vax.com/
Description: This is a child theme of Interface
Author: Ashley Williams
Author URI: https://ad-vax.com/
Template: interface
Version: 0.1

@import url('../interface/style.css');
*/

    Here’s the code for the functions.php: 

    <?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
    wp_enqueue_style( 'interface', get_template_directory_uri().'../interface/' );
}

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
    wp_enqueue_style( 'interface', get_template_directory_uri().'../interface/style.css' );
    wp_enqueue_style( 'interface-child', get_stylesheet_uri(), array('/style.css')  );
}

    Here’s a screenshot of the parent theme, which is currently active: https://ad-vax.com/wp-content/uploads/2014/12/parent-screenshot.png

    Here’s a screenshot of the “live preview” of the child theme: https://ad-vax.com/wp-content/uploads/2014/12/child-screenshot.png

Viewing 6 replies - 1 through 6 (of 6 total)

  • Neither one of your examples is actually loading your parent theme’s stylesheet. If you go the @import method, the @import line needs to be outside of the comment block:

    /*
Theme name: interface child
Theme URI: https://ad-vax.com/
Description: This is a child theme of Interface
Author: Ashley Williams
Author URI: https://ad-vax.com/
Template: interface
Version: 0.1

*/

@import url('../interface/style.css');

    And in the functions.php method, you’re not pointing to the stylesheets correctly:

    <?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

    You should pick only one of these methods. Using both isn’t necessary and may cause unexpected behavior.

    Thread Starter anw618

    (@anw618)

    Thanks for the reply!

    I actually do have the @import outside of the comment block. I just had taken it out for testing purposes and pasted back incorrectly for the sake of an example on here.

    So since the @import method didn’t work (even when done correctly, sans the functions.php file), what would the correct functions.php code be? I guess I am just unsure about what parts I’m supposed to replace (do I leave ‘parent-style’ or replace it with ‘interface’?).

    Thanks again!

    Can you post a link to your site with the child theme active?

    Also, you don’t need to replace any text at all when using the functions.php method. You can copy-and-paste the code exactly as it is.

    Thread Starter anw618

    (@anw618)

    I can’t make the child theme active, but that’s okay because it’s fixed! I just assumed I would have to customize the PHP code to reference the other style sheet, so I was including “../interface/style.css”.

    It’s funny…there are so many articles that tell you what code to use, but none of them give real instruction on where you need to put in your specific info and where you should just go with the code they give you.

    Thank you SO much for your help! Now in order to override some of the individual PHP templates, I just copy over the files I want to alter into the child theme folder, then manipulate them there?

    Thanks again!

    Yes. WordPress will look for the appropriate file in the child theme’s folder first, and if it doesn’t find it there, it will use the file in the parent theme’s folder as a fallback.

    Thread Starter anw618

    (@anw618)

    You rock. Thanks so much for your help!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Child theme looks nothing like parent theme’ is closed to new replies.