Adding or modifying in files of parent theme via child’s function.php

Question 1

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="https://wordpress.stackexchange.com/questions/300632/<?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!

Question 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' );

1 Answer
1

Leave a Reply Cancel reply

1 Answer 1

Leave a Reply Cancel reply

1 Answer
1