2

This is my first time working with a child theme. Everything is working fine, but I currently have copied three files from the parent theme to my child theme and modified them there. I know this is not a good idea as once the parent theme is being updated I might be in trouble.

I'm quite sure there should be a way to modify these files using the child theme's function.php. I'm just not sure how to go about it.

I have the header.php and the footer.php where I simply want to add a bit of code to the parent theme's equivalent. But how do I determine where in the file it will be added? Is there a way to do this via the function.php?

In case of the footer.php I just want to add Google Analytics script code before the body closing tag:

<script>
// Set to the same value as the web property used on the site
var gaProperty = 'UA-xxx';

// Disable tracking if the opt-out cookie exists.
var disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf(disableStr + '=true') > -1) {
  window[disableStr] = true;
}

// Opt-out function
function gaOptout() {
  document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
  window[disableStr] = true;
}
</script>

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxx']);
_gaq.push(['_gat._anonymizeIp']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

In the case of the header.php I want to add the following 3 lines:

<meta name="alexaVerifyID" content="xxx" />
<meta name="wot-verification" content="xxx"/> 
<link rel="author" href="https://plus.google.com/xxx/posts" />

This should be added here:

<head>

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">

(add here)

<!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->

<?php wp_head(); ?>
</head>

Finally, the most complicated one (not sure if this is even possible via function.php) is the 404.php file. Within the parent file I want to replace the following:

<p><?php echo __vce( '404_text'); ?></p> 

                <?php  
                    if(has_nav_menu('vce_404_menu')) { 
                            wp_nav_menu( array( 'theme_location' => 'vce_404_menu', 'menu' => 'vce_404_menu', 'menu_class' => 'vce-404-menu', 'menu_id' => 'vce_404_menu', 'container' => false ) ); 
                    }  
                ?> 

With this piece of code instead:

<img src="https://xxx.png" alt="404 image" />

<br /><br />
                <?php 
                    if(has_nav_menu('vce_404_menu')) {
                            wp_nav_menu( array( 'theme_location' => 'vce_404_menu', 'menu' => 'vce_404_menu', 'menu_class' => 'vce-404-menu', 'menu_id' => 'vce_404_menu', 'container' => false ) );
                    } 
                ?>
<br /><br />
    <p>One last thing, if you're feeling so kind, please <a href="https://xxx/contact/">tell me</a> about this error, so that I can fix it. Thanks!</p> 

Is this possible? Or would you recommend for these tiny changes, that I just copy & paste them every single time after the theme has been updated?

Thank you so much in advance!

  • 1
    On the contrary, copying files into the child theme is often a must. Sometimes you can filter things with functions.php but sometimes you want to make more detailed changes, and that's fine. It's good that you realize you only have to copy the files you've modified - some folks start by copying the whole parent theme and then end up overriding everything. Either way, it looks like the particular changes you want to make will be easiest by updating those particular theme files, and as you said, just pasting them in whenever there are parent theme updates. – WebElaine Apr 12 '18 at 20:22
  • @WebElaine - Good comment on the correct usage of child themes, but don't forget that the header and footer code could be added by using the wp_head and wp_footer hooks and this is probably a better idea than overriding the template files. – Mat Apr 12 '18 at 23:31
2

but I currently have copied three files from the parent theme to my child theme and modified them there. I know this is not a good idea as once the parent theme is being updated I might be in trouble.

Wrong. This is the whole point of why people should be using child themes. If the parent theme is updated, then your customisations that have been made in the child theme will be retained. It's only if your customisations were made to the parent theme that they would be lost if you updated the parent theme.

As @WebElaine has said, sometimes you can override certain features or functions of the parent theme within your child themes functions.php file but this depends on the specific case and how the parent theme has been coded.

You can learn a little more about this by reading up on the purpose and usage of Hooks, Actions and Filters in the WordPress Codex glossary and can find lots of examples with a Google search.

Some themes also use functions that you can override in your child theme. These are made by surrounding the function with a function called function_exists(). For a simple example, there might be a function in a parent theme like:

if ( ! function_exists( 'simple_function' ) :
    function simple_function(){
        echo 'Hello';
    }
endif;

To override this function in your child theme you would simply create a function with the same name in your child theme like so:

function simple_function(){
    echo 'Goodbye';
}

The 404.php file changes would need to be done with a template override, as you have done already. You could, however, do away with the template override for the header.php and footer.php files and instead use WordPress' Hooks.

For the header code that you need to add, simply create your own function in the child themes functions.php file to add the HTML to the wp_head() function (which is in the header.php file) as there is a 'hook' for that (inside the WordPress function wp_head() there is hook: do_action( 'wp_head' )). See the example below which you can add to your child themes functions.php file:

function my_add_to_head(){
    echo '<meta name="alexaVerifyID" content="xxx" />';
    echo '<meta name="wot-verification" content="xxx"/>';
    echo '<link rel="author" href="https://plus.google.com/xxx/posts" />';
}
add_action( 'wp_head', 'my_add_to_head' );

Once this code is added to your child themes functions.php file, you will no longer need the header.php file within your child theme as a template override.

You can use this same technique for the Google Analytics code that needs to be added to the footer.php file as there is a hook called wp_footer that you can use eg.

function my_add_to_footer(){
    ?>
    <script>
    // Set to the same value as the web property used on the site
    var gaProperty = 'UA-xxx';

    // Disable tracking if the opt-out cookie exists.
    var disableStr = 'ga-disable-' + gaProperty;
    if (document.cookie.indexOf(disableStr + '=true') > -1) {
        window[disableStr] = true;
    }

    // Opt-out function
    function gaOptout() {
        document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
        window[disableStr] = true;
    }
    </script>

    <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-xxx']);
    _gaq.push(['_gat._anonymizeIp']);
    _gaq.push(['_trackPageview']);

    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    </script>
    <?php
}
add_action( 'wp_footer', 'my_add_to_footer' );
  • Thank you. The header action worked fine. Unfortunately I couldn't get the footer part to work. I guess there's a syntax error with what I've tried. I edited my original questions and added the code I want to put into the footer. Could you let me know more specifically how exactly to implement that into the given action? Thanks so much! :) – japanworm Apr 13 '18 at 17:13
  • It's difficult to say what the issue was with your own implementation of the Google Analytics code was without seeing what actual code you used but I've just edited my answer to give an example that should work for you. – Mat Apr 13 '18 at 22:30
  • Thanks. I thought I tried the exact same thing, but it didn't work. Guess I just deleted a single character and that's why. :) Now it works fine. Thanks so much! – japanworm Apr 14 '18 at 9:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.