JS Not Functioning - New Child Theme Installed

Support
#1

I was told to install a child theme, and that should fix the issue? But it didn’t.
What do i have to do to make the auto-mobile-expander script work, and keep my GA script and my Outbrain (retargeting scripts)?

<!-- Auto Expand Menu on Mobile View -->

(function($){
  $(window).on('load', function(){
    $('#x-btn-navbar').trigger('click');
  });
})(jQuery);

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-125068227-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-125068227-1');
</script>
<script type="text/javascript" src="https://cdn.ywxi.net/js/1.js" async></script>

<!-- Outbrain Campaign Pixels --> 

<script data-obct type="text/javascript">
  /** DO NOT MODIFY THIS CODE**/
  !function(_window, _document) {
    var OB_ADV_ID='00e978b63b74ea3fd3bbd0878a945d6a8b';
    if (_window.obApi) {var toArray = function(object) {return Object.prototype.toString.call(object) === '[object Array]' ? object : [object];};_window.obApi.marketerId = toArray(_window.obApi.marketerId).concat(toArray(OB_ADV_ID));return;}
    var api = _window.obApi = function() {api.dispatch ? api.dispatch.apply(api, arguments) : api.queue.push(arguments);};api.version = '1.1';api.loaded = true;api.marketerId = OB_ADV_ID;api.queue = [];var tag = _document.createElement('script');tag.async = true;tag.src = '//amplify.outbrain.com/cp/obtp.js';tag.type = 'text/javascript';var script = _document.getElementsByTagName('script')[0];script.parentNode.insertBefore(tag, script);}(window, document);
obApi('track', 'PAGE_VIEW');
</script>

<script async src='https://tag.simpli.fi/sifitag/be0b2e80-41ea-0137-5cd8-067f653fa718'></script>
#2

Hi Jesse,

Thank you for reaching out to us. You should add your custom JS to the Theme Options > JS:

(function($){
$(window).on('load', function(){
$('#x-btn-navbar').trigger('click');
});
})(jQuery);

Hope this helps!

#3

For some reason my post was cut short and was missing all three sets of code.
All three sets are already located in that area, can you check out my site and see what’s wrong please?

#4

Hey Jesse,

I was able to recover your post and I see the three sets of code. So to add those scripts to your site you do need a child theme. I see you’ve already setup the child theme just paste the following code in your child theme’s functions.php file

function site_scripts(){
?>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-125068227-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-125068227-1');
</script>
<script type="text/javascript" src="https://cdn.ywxi.net/js/1.js" async></script>


<script data-obct type="text/javascript">
  !function(_window, _document) {
    var OB_ADV_ID='00e978b63b74ea3fd3bbd0878a945d6a8b';
    if (_window.obApi) {var toArray = function(object) {return Object.prototype.toString.call(object) === '[object Array]' ? object : [object];};_window.obApi.marketerId = toArray(_window.obApi.marketerId).concat(toArray(OB_ADV_ID));return;}
    var api = _window.obApi = function() {api.dispatch ? api.dispatch.apply(api, arguments) : api.queue.push(arguments);};api.version = '1.1';api.loaded = true;api.marketerId = OB_ADV_ID;api.queue = [];var tag = _document.createElement('script');tag.async = true;tag.src = '//amplify.outbrain.com/cp/obtp.js';tag.type = 'text/javascript';var script = _document.getElementsByTagName('script')[0];script.parentNode.insertBefore(tag, script);}(window, document);
obApi('track', 'PAGE_VIEW');
</script>

<script async src='https://tag.simpli.fi/sifitag/be0b2e80-41ea-0137-5cd8-067f653fa718'></script>
<?php 
}

add_action( 'wp_head', 'site_scripts' );

Then navigate to Theme Options > JS and remove everything from there and only add this code in there:

(function($){
$(window).on('load', function(){
$('#x-btn-navbar').trigger('click');
});
})(jQuery);

I see you’ve also added invalid comments in JS section <!-- Auto Expand Menu on Mobile View --> These comments are for HTML and will trigger an error, make sure to remove the comments as well from global JS section. To learn more about JavaScript comments please see https://www.w3schools.com/js/js_comments.asp

Hope this helps!

#5

Where do i find my child theme’s functions.php file?
I currently use wpengine, but when i looked in the phpmyadmin area i didn’t see a child theme folder.

#6

Hello Jesse,

Thanks for updating the thread. :slight_smile:

You can find the child theme function.php file under Appearance > Theme Editor > Theme Functions. Here’s a screencast that you can take a look.

You can also use FTP route. Use software like Filezilla and under /wp-content/themes/pro-child/ you can find function.php file. To get started with Filezilla, please take a look at following resource.

Thanks.

#7

I follower your instructions, added the code to the functions PHP in the WP-admin back end and then deleted everything out of the Theme Options > JS and added back in only the script you provided. However, the mobile-view automatic click open of the menu still does not appear to function. Any suggestions at this point?

Jesse

#8

Hey Jesse,

I checked your site and the script for opening mobile menu is working fine, i tested in a mobile device as well however you can replace that script with the following:

jQuery(document).ready(function($){
	$('#x-btn-navbar').click();
});

This could also be a cache issue on your end. Make sure to clear all caches including your device browser’s cache after adding the code. Let us know how this goes!

#9

Sorry! I didn’t know there was a such thing as clearing your server cache. It started working right after I cleared that cache. Thank you!

#10

Glad we were able to help :slight_smile:

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.