Probles with Upfront child theme

Hello,

we are having some issues with an upfront based child theme "Panino"... usually child themes shouldn't be updated so that the changes made to code aren't deleted... but after the update of Panino our code gets removed.

As i know it's not possible to make a child theme of a child theme (or grandchild theme). So where should we put our custom code (functions.php addons, javascripts, css,...)

Kind regards

  • Nastia

    Hello Rob , I trust you are doing well today!

    I am sorry to hear that you have this issue. Please let me know what code language you are using inside a theme and where it is located? Have you created a separate preset for an element and the code was lost after an update? Or you added the CSS to Global CSS editor?

    Do you have a backup of your site so you could restore it?

    So where should we put our custom code (functions.php addons, javascripts, css,...)

    You can create a Preset for each element and add teh code there, this way your code will not be lost. Open element's settings and Create a New Preset from the Appearance option. Please see the screenshot:

    Have you used a Code element , and after update the code was lost?

    Please advise

    Kind regards,
    Nastia

  • Sajid

    Hello Rob,
    Hope you are doing good today :slight_smile:

    If its an Upfront contact form element then you have two options.

    One, if you want your form to be the same on whole site then you can just edit the default preset that comes with each theme.

    Second, if you want your form different on a some or a specific page then create a new preset and style it there while keeping the default look of the form.

    If its not an Upfront form element and you are using a third party plugin like Contact Form 7 or Gravity Forms then you need to add styles in Upfront -> Theme Settings -> Global Theme CSS (see screenshot).

    Take care and have a nice day :slight_smile:

    Best Regards,
    Sajid

  • Rob

    Hello,

    the "Global Theme CSS" is a great solution for the CSS part. What about custom JavaScript. We added some JS to the Child theme. Now with the update of the Child theme, is't gone... But we need to keep it.

    It's also the first time i see a child theme gets updated. Now i'm wundering where to put my JS files. The CSS i can put into the Theme Global CSS file... but i also need a place to put my JS and my functions.php customizations.

    BR

  • Nastia

    Hello Rob

    Would you please let us know how you added the JS code before? Was it added manually to a theme file? Or was it added inside a code element?

    If it was added inside the functions.php, then it is understandable why it was lost. I've been informed from a developer, that in order not to lose custom codes, the solution here is ti create mu-plugin.

    So if you are calling '.js' files you can use the wp_enqueue_scripts action hook.

    Here is an example:
    add_action( 'wp_enqueue_scripts', 'function_name_that_enqueues_scripts' );

    Please see this page for reference:
    https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts

    If instead of js files you are using simple script, use the wp_footer hook
    add_action('wp_footer', 'function_name_that_prints_the_js_script');

    What code you wish to include inside the mu-plugin, perhaps we can a look and assist you?

    Please advise,

    Cheers,
    Nastia

  • Panos

    Hi Rob ,

    You can create a mu-plugin to keep your custom code safe from updates :slight_smile:

    You can read here about mu-plugins: https://codex.wordpress.org/Must_Use_Plugins

    All there is to do to create a mu-plugin, is, first to create a new folder in your wp-content folder and name it "mu-plugins" if it doesn't exist already. Then create a php file inside that folder. Any php file will be loaded by wp. You could name your file for eg custom-functions.php and it's path will be wp-content/mu-plugins/custom-functions.php.

    In case you are using wp_enqueue_scripts hook on your functions.php to enqueue your scripts, you can copy paste the custom code as it is to the custom-functions.php file, only need to change the javascript file path:

    <?php
    //This is my custom functions file
    
    function wpmudev_custom_scripts() {
        wp_enqueue_script( 'custom-js-script', WP_CONTENT_URL . '/mu-plugins/js/custom_script.js', array( 'jquery' ) );
    }
    add_action( 'wp_enqueue_scripts', 'wpmudev_custom_scripts' );
    
    ?>

    In case of doubt please share your custom code so we can provide you a suggestion :slight_smile:

    Thanks!