Topic: Google Tag Manager and child themes in general

1 2 →

Author

Posts
December 11, 2015 at 2:57 pm #703250

tfmeier
Participant

Child theme and Custom section in Customizer

A structural question here. I have spent the best part of the last month adopting an expanded demo to my new site. Part of that I’ve also updated the Custom section in the Customizer. I’m now wanting to add Google Tag Manager and am instructued to add this right after the <body> tag of every page.

On the forum I’ve read that it’s best to use a child theme for this. Couple of questions:
1. Would it be possible to add the code for Google Tag Manager to the Custom section of the Customizer (with the downside of code changes being overwritten with future X updates?)
2. This raises a new question. Do I/should I have to make a copy of the code in the Custom section of the Customiser since this will be overritten with X updates?
3. If I were to adopt a child theme (the installation process looks quite straight forward) where do I make future changes to my site to?
4. Lastly what’s the easiest way to install Google Tag Manager?

For point 1 it’s a simple pre-update task to copy the contents of the custom section of customizer in a backup file, compare and restore after the upgrade

December 11, 2015 at 7:54 pm #703550
Rue Nel
Moderator
Hello There,

Thanks for writing in!

1.] Would it be possible to add the code for Google Tag Manager to the Custom section of the Customizer (with the downside of code changes being overwritten with future X updates?)
– No. This is not how you add the Google tag manager.

2. This raises a new question. Do I/should I have to make a copy of the code in the Custom section of the Customiser since this will be overritten with X updates?
– No. The customizer custom section is only for custom css and for custom JS script. No other codes should be placed here except those two. It will not be overwritten during updates because it is being saved in the database.

3. If I were to adopt a child theme (the installation process looks quite straight forward) where do I make future changes to my site to?
– If you use a child theme, All your changes in the customizer will still be in the customizer. With a child theme, you can easily add custom functions and custom templates. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

4. Lastly what’s the easiest way to install Google Tag Manager?
– The easiest way is to use a plugin. You can search at the WordPress plugin repository (https://wordpress.org/plugins/)

As an alternative, you need to install a child theme and once your already have your child theme active and ready, please insert this following code in your child theme’s functions.php file.
```
// Add Google Tag Manager Code
// =============================================================================
function add_google_tag_manager_code(){
?>





<?php 
}
add_action( 'x_before_site_begin', 'add_google_tag_manager_code' );
// End Add Google Tag Manager Code
// =============================================================================
```
Hope this helps. Kindly let us know.
December 11, 2015 at 8:55 pm #703592

tfmeier
Participant

Ok thanks for the update.

For point 4. there are two ways as I understand. Either a plugin or a child theme with corresponding edit to functions.php.

If I were to go the child theme route I understand I have to copy functions.php to the exact same child theme path. Can I directly access the file system from within the WordPress (or X) admin panel or do I need an FTP client of sorts?

December 11, 2015 at 11:29 pm #703681

Rue Nel
Moderator

Hello There,

Yes you are right. You need a child theme and you can edit the child theme’s functions.php file in Appearance > Editor and select funcstions.php file at the right side. Please note that this may not be applicable if you do not have file permission to edit the files. If that is the case, you will then need FTP access with an ftp client like Filezilla.

Hope this helps.

December 12, 2015 at 8:41 pm #704442

tfmeier
Participant

This reply has been marked as private.

December 12, 2015 at 10:13 pm #704492
Rue Nel
Moderator
Hello There,

Please update your child theme’s functions.php file:
```
<?php

// =============================================================================
// FUNCTIONS.PHP
// —————————————————————————–
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// —————————————————————————–
// 01. Enqueue Parent Stylesheet
// 02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( ‘x_enqueue_parent_stylesheet’, ‘__return_true’ );

// Additional Functions
// =============================================================================

// Add Google Tag Manager Code
// =============================================================================
function add_google_tag_manager_code(){
?>


<noscript>iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:";j.async=true;j.src=‘//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-XXXXXX');</script>


<?php 
}
add_action( 'x_before_site_begin', 'add_google_tag_manager_code' );
// End Add Google Tag Manager Code
// =============================================================================
```
Please let us know if this works out for you.
December 13, 2015 at 7:37 am #704749

tfmeier
Participant

Unfortunately it didn’t work. I have had two tries:
1. functions.php directly as above
2. Copy functions.php from theme ‘x’ and then add GTM code

In both cases I get an error 404. When is this file loaded?

December 13, 2015 at 7:40 am #704751

Thai
Moderator

Hi There,

In this case, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link login to your site
– WordPress Admin username / Password
– FTP Account

Don’t forget to select Set as a private reply. This ensures your information is only visible to our staff.

Thanks.

December 14, 2015 at 6:16 am #705846

tfmeier
Participant

This reply has been marked as private.

December 14, 2015 at 2:12 pm #706455

Jack
Keymaster

Hi there,

Thanks for writing back!

I’ve checked the structure and there are a couple of things that were wrong with it, the functions.php of the child theme was in a folder called “bkp”, the functions.php should always be in a root directory of a theme following WordPress guidelines which you can find here https://developer.wordpress.org/files/2014/10/template-hierarchy.png

I then took a look at the site, but it’s actually returning a 404 for the whole site, after taking a closer look at the setup, I saw your .htaccess was empty, I then added the default WordPress .htaccess which brought the site back up, though there are some styling issues and it redirects to a get-in-touch page, how should that work?

Lastly where do you specify which is the active theme and can you have more than one theme active?

You’d specify which theme is active in wp-admin > appearance > themes. You can activate any theme you want from there (the parent theme or child theme).

I think if any pages/files are found in ‘X-child’ that versoin of the file is used for WP; e.g. if we have a functions.php in both ‘X’ and ‘X-child’ the version in ‘X-child’ will be used. So there’s no reason to migrate/copy all files from ‘X’ but only the ones I want to change. Is this correct

That’s correct, the files in the child theme will override the files in the parent theme, where x-child is the child theme. You only need to add the files to the child theme you want to modify, you don’t want to move all files from the parent theme to the child theme.

Cornerstone know that I’m editing an ‘X-child’ version of a file and not the ‘X’ version?

Cornerstone edits pages/posts etc, rather than the actual files within the theme, in effect the files in the theme (both parent and child) remain unmodified. 🙂

Hope this helps! Let us know if we can be of any assistance.

December 14, 2015 at 11:55 pm #707021

tfmeier
Participant

Thanks for the update and bringing back the site.

To your queries:

1. I have made a bkp copy of the original functions.php that got created as I edited the file (i.e. Appearance | Editor and then selecting functions.php from the right) so that I don’t lose the original. There was no file in theme root as I removed it to see whether the site comes up

2. The redirect to get_in_touch was a test to see the custom 404 page given I have placed the home page under Draft status; not used under normal operation

3. Didn’t know about .htaccess and certainly didn’t edit that

So what’s the easiest way to replay this? I have activated ‘X’ (not ‘X-child’) to see whether the original site and theme is still ok. I have also published the home page. All looks fine – phew. Now what needs to be done to redo this whole process? The reason I had to go down the child theme path is to install the Google Tag Manager code… Please advise

December 15, 2015 at 2:17 am #707123

Zeshan
Member

Hi there,

The process will be same as mentioned above, i.e. you need to install/activate a child theme and then place your code in its functions.php file.

Also, I’ve tried to access your FTP account but it’s giving me incorrect login error. Please confirm.

Thank you!

December 15, 2015 at 4:49 am #707305

tfmeier
Participant

This reply has been marked as private.

December 15, 2015 at 6:59 am #707425

Paul R
Moderator

Hi,

Thank you for providing your ftp login.

I was able to fix your code in your child theme’s functions.php file.

Please change the text GTM-XXXX in the code with your container id.

https://support.google.com/tagmanager/answer/6103696?hl=en

You may activate your child theme after adding your container id

Hope that helps.

December 15, 2015 at 7:09 pm #708316

tfmeier
Participant

Thanks heaps. We’re back in business!
Author

Posts

1 2 →