• Resolved Tomi

    (@tomitech)


    I am in the process of making a child theme for my Theme, flatsome. I have found 2 separate sources for this, with seemingly different code instructions. The first being from these forums, another from my domain and host provider, hostinger:
    https://developer.www.ads-software.com/themes/advanced-topics/child-themes/
    https://www.hostinger.com/tutorials/how-to-create-wordpress-child-theme

    I had both instructions up side by side to make sure I understand. With respect to the developer wordpress post, I am on step 3. The functions.php code is different from the 2 sources, and I would really appreciate some guidance. I see a lot of similarities but a lot of differences.

    // developer.wordpress

    <?php
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    function my_theme_enqueue_styles() {
        wp_enqueue_style( 'child-style', get_stylesheet_uri(),
            array( 'parenthandle' ), 
            wp_get_theme()->get('Version') // this only works if you have Version in the style header
        );
    }

    // hostinger tutorials

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

    Here is my style.css code in my child theme:

    /*
    Theme Name: Flatsome Child
    Theme URL: https://tomitechnologies.com/wp-admin/themes.php?theme=flatsome
    Description: Flatsome Child
    Theme Author: Jack Nicholson
    Author URL: https://tomitechnologies.com
    Template: flatsome
    Version: 3.12.0
    Text Domain: flatsome-child
    */

    EDIT: So I’ve included the differences which I don’t understand:
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Wordpress code employs:
    – ‘child-style’ instead of ‘parent-style’
    – get_stylesheet_uri() instead of get_template_directory_uri().’/style.css’
    – contains an additional parameters:
    – array( ‘parenthandle’ )
    – wp_get_theme()->get(‘Version’)

    So in-case I wasn’t clear, I want to know which I should use for my flatsome child theme, or a combination thereof.

    • This topic was modified 4 years, 7 months ago by Tomi.
    • This topic was modified 4 years, 7 months ago by Tomi.
Viewing 11 replies - 1 through 11 (of 11 total)
  • Please read the text all around the example code, as it explains what to look for in your parent theme. It all depends on what the parent theme does.

    I very recently updated that child theme section, so it is definitely more up to date than any other instructions you find, unless it’s from your theme author.
    If you still don’t understand, please let me know which part I need to change to make more sense.

    Thread Starter Tomi

    (@tomitech)

    I see… The Hostinger instructions related to the condition which does not apply to me, hence, the different code. That pretty much clears things up. I’m still curious about array( ‘parenthandle’ ). I did look up the function definition for wp_enqueue_style which says:

    wp_enqueue_style( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, string $media = 'all' )

    $deps
    (string[]) (Optional) An array of registered stylesheet handles this stylesheet depends on.
    Default value: array()

    So, where is parenthandle located, and what does the above parameter mean in plain English?

    If you look in your parent theme, where it calls wp_enqueue_style, you will see what it uses for the first parameter, which is the handle, which your child theme needs to match so that it works correctly. The example code is just an example, since every theme is different.
    I think they got the name “handle” from radio operator jargon; it’s like a nickname, so WP can identify each style and each script uniquely.
    If the child theme uses the same handle (in the first parameter), then since it is loaded first, its parameters “win”. If it uses a different handle, you get two copies of the same thing.
    And in the dependency parameter (the third parameter in wp_enqueue_style), it needs to be a match or it won’t be loaded at all. This is because it depends on that one being loaded first, and if it’s not found, then it’s not loaded. This is important for styles because order matters, and WP loads the child theme first, but the child styles should be after the parent styles.

    Which part of that ^^ do I need to add to the page?

    Thread Starter Tomi

    (@tomitech)

    I have no idea and I am completely lost. All my theme customization’s such as the header bar, logo, etc, are all gone. Maybe it is because I did it wrong. I do not understand. In my parent theme’s functions.php there is no function wp_enqueue_style. This is all there is:

    <?php
    /**
     * Flatsome functions and definitions
     *
     * @package flatsome
     */
    
    require get_template_directory() . '/inc/init.php';
    
    /**
     * Note: It's not recommended to add any custom code here. Please use a child theme so that your customizations aren't lost during updates.
     * Learn more here: https://codex.www.ads-software.com/Child_Themes
     */
    ?>
    • This reply was modified 4 years, 7 months ago by Tomi.

    Yes, if your site is unstyled, you did it wrong and the parent styles are not loaded.
    The function call does not have to be in the functions.php. It can be in whatever file the theme loads. It looks like your theme loads inc/init.php which probably loads some other files. But it does have to have the wp_enqueue_style function somewhere, or it wouldn’t work at all.

    Thread Starter Tomi

    (@tomitech)

    I think you need to be more clear in exactly what needs to be replaced in this bit of code:

    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    function my_theme_enqueue_styles() {
        wp_enqueue_style( 'child-style', get_stylesheet_uri(),
            array( 'parenthandle' ), 
            wp_get_theme()->get('Version') // this only works if you have Version in the style header
        );
    }

    Do I replace both ‘child-style’ and ‘parenthandle’, as well as anything else?
    What specifically do I replace them with, respectively? I’ve been trying combinations, but I fundamentally don’t understand what the placeholders need to be replaced with.

    I did a grep -rli "wp_enqueue_style" * search in the flatsome theme, list is at the bottom. I went through it and found the first parameter differs in each file. The definition of the first parameter is the name of the stylesheet. I would think the name of the flatsome theme stylesheet is called style.css, as shown in my theme editor.

    The definition for the third parameter is An array of registered stylesheet handles this stylesheet depends on. I don’t know about this one, not even a guess… until…

    I went through the list at the bottom, as well as did some comparisons with the file you referenced and found a match. I went into that file and found “flatsome-style” as one of the (wp_enqueue_style) functions first parameter, which looks much more promising than the rest first-parameter-matches from other files found below:
    flatsome-header-builder-css
    flatsome-panel-css
    flatsome-main
    flatsome-main-rtl

      Found on line 130 of wp-content/themes/flatsome/inc/functions/function-setup.php
    	// Load current theme styles.css file.
    	if ( ! get_theme_mod( 'flatsome_disable_style_css', 0 ) ) {
    		wp_enqueue_style( 'flatsome-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ), 'all' );
    	}

    At current moment, this is my child theme functions.php file:

    <?php
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    function my_theme_enqueue_styles() {
        wp_enqueue_style( 'style.css', get_stylesheet_uri(),
            array( 'flatsome-style' ), 
            wp_get_theme()->get('Version') // this only works if you have Version in the style header
        );
    } // replaced child-style with style.css & parenthandle with flatsome-style
    ?>

    List of files with wp_enqueue_style found:
    inc/shortcodes/ux_banner.php
    inc/shortcodes/ux_countdown/ux-countdown.php
    inc/shortcodes/sections.php
    inc/functions/function-fonts.php
    inc/functions/function-setup.php
    inc/extensions/flatsome-shortcode-insert/tinymce.php
    inc/integrations/integrations.php
    inc/integrations/wc-yith-wishlist/yith-wishlist.php
    inc/classes/class-tgm-plugin-activation.php
    inc/classes/class-wc-product-data-fields.php
    inc/helpers/helpers-icons.php
    inc/builder/core/server/templates/media.php
    inc/builder/core/server/templates/tinymce.php
    inc/builder/core/server/actions/editor.php
    inc/builder/core/server/actions/iframe.php
    inc/admin/envato_setup/envato_setup.php
    inc/admin/gutenberg/class-gutenberg.php
    inc/admin/kirki/modules/tooltips/class-kirki-modules-tooltips.php
    inc/admin/kirki/modules/custom-sections/class-kirki-modules-custom-sections.php
    inc/admin/kirki/modules/css/class-kirki-modules-css.php
    inc/admin/kirki/controls/php/class-kirki-control-dimensions.php
    inc/admin/kirki/controls/php/class-kirki-control-base.php
    inc/admin/panel/panel.php
    inc/admin/customizer/customizer-config.php
    inc/admin/advanced/functions/functions.interface.php

    Thanks for continuing to help

    • This reply was modified 4 years, 7 months ago by Tomi.

    Your parent theme is overly complicated. You would get better help if you asked at the theme’s support forum.

    The code you showed says that the main style.css is loaded only if it’s not disabled in the Customizer. But it uses the function get_stylesheet_uri() to find the file which means it will be the child style.css if there is one, and the parent style.css if there is not a child.

    OK, now that you actually looked at the parent theme and found the relevant call to wp_enqueue_style, you can follow the logic in Step 3 of the instructions. By the code you quoted that you are using, it looks like you are not following the logic.

    According to the page, you should be using the code under
    “If the parent theme loads its style using a function starting with get_stylesheet
    which loads both parent and child files. And it clearly states
    “Be sure to use the same handle name as the parent does for the parent styles.”

    Do I replace both ‘child-style’ and ‘parenthandle’, as well as anything else?

    You can change ‘child-style’ to something else, but it shouldn’t be something that is already in use or invalid, so it’s best to just leave it. Using a handle with a dot in it like ‘style.css’ is not advisable because the handle is used as an ID in the HTML and those can’t contain dots. The ‘parenthandle’ needs to match what is used in the parent theme, as stated before.

    Thread Starter Tomi

    (@tomitech)

    In the flatsome theme in the functions.php, it has get_template but yes, as I see now, the file I referenced had get_stylesheet_uri() as the 2nd parameter. I changed to the second set of code, but now I’m locked out of my website. I don’t know if this broke my WordPress or what. Only way I could get in was via FTP (Domain hosting File Manager refused to accept my username/password) and I changed the function.php back. Still locked out because “Domain status: not pointing to our name servers”. Contacted my hosting support. This is a lot more confusing and frustrating than I thought it would be. I don’t know what to do besides wait for support from the theme support and domain support.

    Thanks for taking the time to help.

    Something else caused your login problem. A child theme didn’t do that, unless you put some really strange code in there.

    Thread Starter Tomi

    (@tomitech)

    Yes, it was coincidentally something else that happened on the hosting side. The second set of code didn’t work either, but it’s OK.

    I got an email back from the theme dev and they gave me the instructions. I had to delete the child theme, go into the advanced options and copy the theme options data characters, create the child theme through the setup wizard, then copy the data into the same spot for the child. The functions.php doesn’t really have anything in it surprisingly!

    Thanks for the help while I work through in understanding this stuff ??

    Regards,
    Tomi

    For anyone reading this later, be aware that this theme is not in the WP repository, and doesn’t follow the standards of how to do things in a child theme friendly way.
    I should have directed the question to the theme author sooner, but I wanted to get feedback for the handbook page.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Creating Child Theme: Two different functions.php instructions’ is closed to new replies.