Enqueuing Child Theme

  • I’m venturing tentatively into child theme territory. I know that once I’ve created a modified style.css file in my child theme folder and uploaded that folder via ftp to my wordpress directory, I need to “enqueue” the child theme. On the Child Theme codex page, it gives this code to do that:

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

}
?>

    My question is, do I need to change any of those statements to reflect the names of my parent or child themes, or is that exactly what should go in my child theme’s functions.php file?

    And a related question about venturing into child themes. I’ve already used the jetpack custom css plugin to make css changes to my site. Do I need to reference the “editor.css” file in my enqueue command? Or should I just copy the css changes from that file into my child theme’s style.css file and delete the editor changes (in the plugin? in the directory?). Thanks for your help.

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

  • Hi there,

    My question is, do I need to change any of those statements to reflect the names of my parent or child themes, or is that exactly what should go in my child theme’s functions.php file?

    You can copy the code given for functions.php as it is. It’s generic and will work across all child themes. ?? You will, however, need to tweak the code given for your child theme’s style.css file as per the guidance in the Codex.

    I’ve already used the jetpack custom css plugin to make css changes to my site. Do I need to reference the “editor.css” file in my enqueue command? Or should I just copy the css changes from that file into my child theme’s style.css file and delete the editor changes (in the plugin? in the directory?).

    You don’t need to reference the editor.css file. Instead, after switching to your child theme, you can go with either of the following options:

    • Navigate to Appearance > Edit CSS and restore your previous CSS via the CSS Revisions module on the right.
    • Copy/paste your previous CSS to the child theme’s style.css file.

    Let me know how that goes or if you have any further questions on getting set up with a child theme. ??

    Thread Starter lwertz

    (@lwertz)

    Siobhan,
    You are a master. Thank you so much. My child theme is all loaded up and ready for me to do my worst (or best, let’s hope its my best).

    One thing happened when I restored my latest revisions to the CSS (per your first suggestion). The menu icon is now missing its hamburger and shows instead an odd little square, not quite centered. Also, whereas before on hover the entire circle, hamburger and word “menu” turned from gray to #04BF7B, now only the word and the odd square use that color, and the circle uses the Edin default color. I’m not sure how I’m only controlling the word menu and the hamburger icon in the CSS, or why the hamburger would be “missing” as it apparently is.

    I’ve looked through the CSS style changes, and can’t figure it out. Can you help me figure out what I’m missing?

    Hi there,

    You are a master. Thank you so much. My child theme is all loaded up and ready for me to do my worst (or best, let’s hope its my best).

    I’m glad you got the child theme up and running! ??

    As a note: I double checked your child theme’s style.css file and it seems you copied over all of the CSS from the parent theme’s file.

    Your parent theme’s CSS is always going to be loaded first and it’s not necessary to load it again via your child theme.

    The child theme’s CSS will be loaded after and will override the parent theme’s. With this in mind, you only need to include CSS in the child theme’s style.css file that changes the default style of your site.

    My colleague, Kathryn, gave a presentation on child themes here that does a really good job of explaining how different files are loaded and how overrides work. I definitely recommend giving it a watch:

    The menu icon is now missing its hamburger and shows instead an odd little square, not quite centered.

    The hamburger icon is pulled in via the following CSS: 

    .menu-toggle:before {
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    color: #303030;
    content: "\e601";
    display: inline-block;
    width: 48px;
    height: 48px;
    font-family: "Edincon";
    font-size: 16px;
    line-height: 48px;
    text-decoration: inherit;
    font-weight: normal;
    font-style: normal;
    vertical-align: top;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    Specifically, content: “\e601” is the code for the hamburger genericon.

    The genericon is not being loaded correctly in your child theme’s style.css and I think the conflict between the three different CSS files (parent theme, child theme, and Jetpack) could be to blame.

    As a starting point, could you please remove the unneeded CSS from your child theme’s style.css file? Any changes you make to the default styles can be added to either Jetpack’s custom CSS editor or your child theme’s style.css file.

    We can work from there if the icon is still not loading correctly after that.

    Also, whereas before on hover the entire circle, hamburger and word “menu” turned from gray to #04BF7B, now only the word and the odd square use that color, and the circle uses the Edin default color.

    The following is included in your child theme’s style.css file, which is loading after (and therefore takes precedence over) the custom CSS you’ve added to Jetpack:

    @media screen and (min-width: 768px) {
.search-toggle:hover, .search-toggle:active {
    color: #1279be;
}
}

    After you have removed all unnecessary CSS from your child theme’s file, let me know if the trouble with the hover colours continues.

    Thread Starter lwertz

    (@lwertz)

    I went back through my css in all its locations. Cleared out the child theme styles and only included the changes, and have now added only some small additional (“tentative”) changes to the css editor. The hamburger menu is back, and the search and menu icons colors are correct. But I cannot figure out how to change the color on hover from the Edin default to our brand link hover color.

    The hamburger menu is back, and the search and menu icons colors are correct.

    Awesome. I’m happy to see that!

    But I cannot figure out how to change the color on hover from the Edin default to our brand link hover color.

    The CSS to change the search toggles on hover is as follows:

    @media screen and (min-width: 600px) {
.search-toggle:hover:before, .search-toggle:active:before, .search-toggle.open:before, .search-toggle.open {
    color: #04BF7B;
}

.search-toggle:hover:before, .search-toggle:active:before, .search-toggle.open:before {
    border-color: #04BF7B;
}
}

    Use the following to change the colour of the menu on hover:

    @media screen and (min-width: 600px) {
.menu-toggle:hover:before, .menu-toggle:active:before, .menu-toggle.open:before {
    border-color: #04BF7B;
}

.menu-toggle:hover:before, .menu-toggle:active:before, .menu-toggle.open:before, .menu-toggle.open {
    color: #04BF7B;
}
}

    Hope that’s helpful!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Enqueuing Child Theme’ is closed to new replies.