Javascript Not Working in Child Theme

  • mcography

    (@mcography)


    12 years, 6 months ago

    I am working on a child theme of Twenty Thirteen. I want to make a slide down about page (something like the one seen here), but I can’t get the javascript to work.

    I put this before the end of <head> in header.php:

    <script>
 $(document).ready(function(){
 $("toggle").click(function(){
  $("abouttoggle").slideToggle();
  });
 });
</script>

    And this in the body:

    <div id="abouttoggle">
 <div id="abouttoggle_inner">
   <h1>This is the About Page.</h1>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  </div>
</div>

    But when I click the button, it doesn’t do anything. What am I doing wrong?

Viewing 15 replies - 1 through 15 (of 32 total)
1 2 3
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 6 months ago

    Doesn’t look like you’re enqueing the JavaScript or using no-conflict wrappers.

    See:
    – http://codex.wordpress.org/Function_Reference/wp_enqueue_script
    – http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 6 months ago

    Also you’re trying to select these elements:

    <toggle>

    and

    <abouttoggle>

    Do you see what I mean here?

    See jQuery selectors: http://api.jquery.com/category/selectors/

    Thread Starter mcography

    (@mcography)

    12 years, 6 months ago

    I did try to figure out wp_enqueue_script but it didn’t seem to work, and I found it confusing. I will look at it again.

    As far as your second comment, yes I understand. It should be “#abouttoggle” not “abouttoggle” right? I fixed that, but it’s still not working. Even if I’m not putting the script in the recommended place (using wp_enqueue_script), shouldn’t it still work if it’s in the head of the document?

    Thanks for your help, by the way.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 6 months ago

    Can you link the page in question? I can’t answer whether it should work alone otherwise.

    Thread Starter mcography

    (@mcography)

    12 years, 6 months ago

    This is the site I’m working on. Thanks.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 6 months ago

    Try using chrome’s developer toolbar for JavaScript debugging: https://developers.google.com/chrome-developer-tools/

    Right click on the page (anywhere applicable) and select “Inspect element”. Then go to the “Console” panel.

    Do you see the error?

    First resolve that error. It’s because you’re not using a no-conflict wrapper.

    Thread Starter mcography

    (@mcography)

    12 years, 6 months ago

    According to the instructions about no conflict wrappers here, I changed the script to

    <script>
 jQuery(document).ready(function(){
 $("toggle").click(function(){
  $("#abouttoggle").slideToggle();
  });
 });
</script>

    But it’s still giving me an error saying the jQuery is not defined. How do I fix that?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 6 months ago

    You can’t use the dollar like that unless you pass it through your wrapper’s parameter, see the third example:
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

    Thread Starter mcography

    (@mcography)

    12 years, 6 months ago

    I thought the third example meant that you could use the dollar sign within the “jQuery(document).ready(function(){” wrapper. However, I changed it to

    <script>
 jQuery(document).ready(function(){
  jQuery("toggle").click(function(){
   jQuery("#abouttoggle").slideToggle();
   });
 });
</script>

    and it’s still not working. Any ideas?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 6 months ago

    Converting this jQuery

    jQuery(document).ready(function(){
 $("toggle").click(function(){
  $("#abouttoggle").slideToggle();
  });
 });

    To how the third example explains would result in this:

    jQuery(document).ready(function($){
 $("toggle").click(function(){
  $("#abouttoggle").slideToggle();
  });
 });

    Now it’s saying jQuery is not defined because you’re trying to use jQuery before the jQuery library has been called. It’ll be easier if you enqueue your JavaScript.

    If you want to see how easy enqueing JavaScript can be look at stage 2, step 2 on this tutorial I made for some jQuery that needed enqueing for another theme: http://wordpress.org/support/topic/put-test-inside-images-on-home-page

    Stage 2, step 2 is the part where you enqueue the JavaScript. You put the JavaScript in a file and enqueue it.

    Thread Starter mcography

    (@mcography)

    12 years, 6 months ago

    I followed your instructions for Stage 2 and enqueued the script, but it’s still not working.

    I put this in functions.php:

    <?php
	function toggleAbout() {
		wp_enqueue_script( 'toggle-about', get_stylesheet_directory_uri() . '/../../js/toggle-about.js', '', '1.0', true );
	}
	add_action( 'wp_enqueue_scripts', 'toggleAbout' );
?>

    And I put this in toggle-about.js:

    jQuery(document).ready(function($){
 $("toggle").click(function(){
  $("#abouttoggle").slideToggle();
  });
});

    Thanks for your patience and help with this.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 6 months ago

    Your webpage is showing blank for me, a blank white screen.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 6 months ago

    Did you copy the ‘functions.php’ file from the parent theme? If so that may be why your site is no longer working, you need to create a new functions.php file.

    Thread Starter mcography

    (@mcography)

    12 years, 6 months ago

    No, I didn’t. I created a new functions.php. I don’t know what’s going on. I removed functions.php and the site is working again.

    This is the only code that I had in functions.php:

    <?php
 function toggleAbout() {
 wp_enqueue_script( 'toggle-about', get_stylesheet_directory_uri() . '/js/toggle-about.js', '', '1.0', true );
	}
  add_action( 'wp_enqueue_scripts', 'toggleAbout' );
?>

    What am I doing wrong?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 6 months ago

    If you remove that code so that there is absolutely nothing in functions.php (of your Child Theme) does your site still break?

Viewing 15 replies - 1 through 15 (of 32 total)
1 2 3

The topic ‘Javascript Not Working in Child Theme’ is closed to new replies.