• Hi,
    So I finished to develop a theme using Bootstrap and WordPress. Yesterday I wanted to make order and distinction between the files and folders that need to be in the parent theme and which one to put in the child theme

    I am still confused about which files and folders to put on them. Anyway, I know that style.css and functions.php need to be in the child theme and that any custom CSS is to be put in style.css too. The parent theme has a style.css as well but different, linking to its theme folder

    What caused my custom css to get broken is that I cut and put it in the child theme from the parent theme. This is the only thing I did. Why did my custom css got broken if the custom css is supposed to be kept in the child theme only?

    I tried to put the custom css back in the parent theme and delete it from the child theme (as it was when it was working) but the custom css is not being applied anymore

    How do I fix it?

Viewing 4 replies - 1 through 4 (of 4 total)
  • When working with WordPress parent and child themes, the idea is to keep customizations in the child theme to prevent them from being overwritten when the parent theme gets updated. However, changes in the child theme won’t automatically apply if they were initially made in the parent theme and then moved to the child theme.

    Here are steps to resolve the issue:

    1. Ensure that the file path and CSS selectors remain the same when you move the custom CSS from the parent to the child theme. Any change in file paths or selector names would prevent the CSS from being applied.

    2. If the custom CSS was being enqueued in the parent theme’s functions.php, please ensure you’ve replicated the same enqueue process in the child theme’s functions.php to load your custom stylesheet. The enqueue function should use the correct file path for your CSS file in the child theme.

    Example of enqueuing a custom stylesheet in the child theme’s functions.php:

    function enqueue_child_theme_styles() {
        wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css');
        // Add other custom stylesheet enqueues here if needed
    }
    add_action('wp_enqueue_scripts', 'enqueue_child_theme_styles');
    

    3. Theme Hierarchy: WordPress prioritizes files in the child theme over the parent theme. If a file exists in both parent and child themes, the child theme file will be used. However, this doesn’t apply to CSS loaded via functions.php. Ensure that the correct CSS file is being loaded from the child theme.

    4. Clear any caching plugins or server caches that might be holding onto the old CSS. This ensures that the changes made in the child theme take effect.

    5. Inspect the page using your browser’s developer tools if the issue persists. Check the Network tab to see if the CSS file is being loaded. Also, inspect the HTML elements to ensure your target CSS classes or IDs are present and correctly spelled.

    6. Please ensure that the CSS in your child theme has the specificity to override any conflicting styles from the parent theme.

    Moderator bcworkz

    (@bcworkz)

    In addition to Aniekan’s very informative reply, I wish to emphasize that the correct way to enqueue your child style.css largely depends on how the parent theme enqueues its own style.css. Please carefully review the Enqueue Stylesheet section on the doc page for child themes.

    Thread Starter madleine

    (@madleine)

    Thanks @anieeedet and @bcworkz for your answers, I would appreciate your help in explaining some stuff

    I want to be secure that the strucure of my parent and child theme are correct so then I can publish my website online soon

    my website (that has a classic theme) fixed itself, after I moved my custom css in my child theme’s style.css only

    I am still a bit confused even after reading multiple docs especially this article https://developer.wordpress.org/themes/advanced-topics/child-themes/#3-enqueue-stylesheet

    These are the files and folders I put in my parent theme:

    • css (folder) > boostrap.min.css
    • svg image for 404.php
    • website logo
    • js (folder) > bootstrap.bundle.min.js
    • 404.php, header.php, footer.php, front-page.php, index.php (empty), page.php, screenshot.png, search.php, sidebar.php, style.css (with only /*Theme Name: …etc.*/, and no css styling is in the parent theme’s style.css anymore)

    These are the files I put in my child theme:

    • image to show on the homepage (inserted via css)
    • bootstrap_navwalker.php
    • functions.php (with all the additional functionalities)
    • screenshot.png

    are these folders and files in the right place? will it be ok when I update the parent theme? should I copy some to my child theme?

    Also this is what I put in functions.php (child theme):

    // Link child theme to parent theme
    
    function enqueue_parent_styles() {
        wp_enqueue_style('parent-style', get_template_directory_uri(). '/style.css');
    }
    
    add_action('wp_enqueue_scripts', 'enqueue_parent_styles');

    should I enqueue the parent and child’s style.css in the parent theme’s functions.php? (functions.php (in my parent theme) does not exist so far)

    Moderator bcworkz

    (@bcworkz)

    If you’re developing the parent, why are you creating a child? Why not include everything in the one parent theme? I’m not saying doing so is wrong, only questioning if it’s necessary. It’s somewhat common with commercial themes that all themes are children of one common parent framework. I’m not convinced you’re building a framework, thus I question the necessity.

    Anyway, if the parent has a style.css file with meaningful CSS code**, the parent should enqueue its own stylesheet. Your child should then enqueue its own style.css while indicating the parent’s as a dependency to ensure the child’s is loaded after the parent’s.

    If by chance the parent theme is an existing theme that’s subject to periodic updates, you should not place any other files with the parent nor modify any of its code. Anything you add or change will be removed when the theme is updated.

    **all classic themes must have a style.css file with an informational header, but if it has no meaningful CSS code there’s no reason to enqueue it either by parent or child.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to fix custom CSS that got broken after I moved it to the child theme?’ is closed to new replies.