Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Shaun Taylor
Shaun Taylor
2,654 Points
Posted by Shaun Taylor
Shaun Taylor
2,654 Points

Wordpress and jQuery plug-in

Hello - Hoping someone can help as I'm a bit stuck!

I've gone through the building a custom Wordpress theme and even watched the how to install java in to the theme, but I still don't understand how to add the piece of jQuery I need - the tutorial on here instructs you how to add a slider, but I can't see the similarity...

I built this site previously which included a div which slides down when you click on the big green 'button'... http://ivylink.co.uk/auditing.php

For this I have used the following code in the header for the page. But I understand you cant do this in Wordpress?! 

<script type="text/javascript" src="jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    $("#slidediv1").hide();
    $("#slidediv2").hide();
    $("#slidediv3").hide();
    $("#slidediv4").hide();
    $("#slidediv5").hide();

    $(window).load(function() {

    $("#toggle1").click(function() {    $("#slidediv1").slideToggle(1000); return false; });
    $("#toggle2").click(function() {    $("#slidediv2").slideToggle(1000); return false; });
    $("#toggle3").click(function() {    $("#slidediv3").slideToggle(1000); return false; });
    $("#toggle4").click(function() {    $("#slidediv4").slideToggle(1000); return false; });
    $("#toggle5").click(function() {    $("#slidediv5").slideToggle(1000); return false; });

    });

});

</script>

I have then applied the reverent ID tags to hide the div and then slide the div out on clicking the box.

This is the exact effect I want to replicate on one of my wordpress pages - However i seem to be stuck!

Any help and advise would be greatly appreciated :)

Thanks,

Shaun.

Leonardo Hernandez
Leonardo Hernandez
13,798 Points

Tip: 

// instead of 
    $("#slidediv1").hide();
    $("#slidediv2").hide();
    $("#slidediv3").hide();
    $("#slidediv4").hide();
    $("#slidediv5").hide();

    $("#toggle1").click(function() {    $("#slidediv1").slideToggle(1000); return false; });
    $("#toggle2").click(function() {    $("#slidediv2").slideToggle(1000); return false; });
    $("#toggle3").click(function() {    $("#slidediv3").slideToggle(1000); return false; });
    $("#toggle4").click(function() {    $("#slidediv4").slideToggle(1000); return false; });
    $("#toggle5").click(function() {    $("#slidediv5").slideToggle(1000); return false; });

// this

  $("#slidediv1, #slidediv2, #slidediv3, #slidediv4, #slidediv5").hide();

  $("#toggle1, #toggle2, #toggle3, #toggle4, #toggle5").click(function() {    $("#slidediv1").slideToggle(1000); return false; });

Super clean ! Pretty sure that works. But an even better way would be to use the jQuery .each() method.

https://api.jquery.com/each/

Leonardo Hernandez
Leonardo Hernandez
13,798 Points

Sorry messed up my first comment

Tip: 

 // instead of $("#slidediv1").hide(); $("#slidediv2").hide(); $("#slidediv3").hide(); $("#slidediv4").hide(); $("#slidediv5").hide();

$("#toggle1").click(function() {    $("#slidediv1").slideToggle(1000); return false; });
$("#toggle2").click(function() {    $("#slidediv2").slideToggle(1000); return false; });
$("#toggle3").click(function() {    $("#slidediv3").slideToggle(1000); return false; });
$("#toggle4").click(function() {    $("#slidediv4").slideToggle(1000); return false; });
$("#toggle5").click(function() {    $("#slidediv5").slideToggle(1000); return false; });

// this

$("#slidediv1, #slidediv2, #slidediv3, #slidediv4, #slidediv5").hide();

$("#toggle1, #toggle2, #toggle3, #toggle4, #toggle5").click(function() { $("#slidediv1").slideToggle(1000); return false; });

Super clean ! Pretty sure that works. But an even better way would be to use the jQuery .each() method.

https://api.jquery.com/each/

4 Answers

Leonardo Hernandez
Leonardo Hernandez
13,798 Points

Place this in your header.php, after your wp_head() function. Your functions.php looks good. 

<script type="text/javascript">

jQuery(document).ready(function() {

    var $ = jQuery; 

    $("#slidediv1").hide();
    $("#slidediv2").hide();
    $("#slidediv3").hide();
    $("#slidediv4").hide();
    $("#slidediv5").hide();

    $(window).load(function() {

    $("#toggle1").click(function() {    $("#slidediv1").slideToggle(1000); return false; });
    $("#toggle2").click(function() {    $("#slidediv2").slideToggle(1000); return false; });
    $("#toggle3").click(function() {    $("#slidediv3").slideToggle(1000); return false; });
    $("#toggle4").click(function() {    $("#slidediv4").slideToggle(1000); return false; });
    $("#toggle5").click(function() {    $("#slidediv5").slideToggle(1000); return false; });

    });

});

</script>
Leonardo Hernandez
Leonardo Hernandez
13,798 Points
Leonardo Hernandez
Leonardo Hernandez
13,798 Points

JQuery on WordPress needs to run in a "no-confilict" mode. The WordPress installation even includes a jquery library for you to use.

This prevents compatibility problems and is document below.

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

You will find a couple of paragraphs about JQuery there and how to register your scripts properly through functions.php

Then you will have to start you JQuery code like this 

jQuery(document).ready(function() {

});

Notice: No dollar sign! But if you want, and you can use the dollar sign. 

jQuery(document).ready(function() {

 var $ = jQuery; 

});
Shaun Taylor
Shaun Taylor
2,654 Points
Shaun Taylor
Shaun Taylor
2,654 Points

Thanks for the reply, I understand what you're saying but in practise I'm not sure what I need to do...

So, I have this in the functions file from the tutorial on here: 

function theme_js() {
    wp_register_script( 'slider', get_template_directory_uri() . '/js/slider.js', array('jquery'), '', true );
    wp_enqueue_script( 'slider' );

    wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery'), '', true );

}
add_action( 'wp_enqueue_scripts', 'theme_js' );

I assume this would activate the jQuery library and also pull in a separate slider.js file... I don't know where I include the code from my first post? This is code for utilising the the query 'slider' again from the tutorial... Does the code I used in my first post need to be a separate .js file like slider is here in the example? Where does it go?

Really sorry if I'm missing something - do you think you could let me know the exact code I need to use and where I need to place it for this to work?

Thanks a million Leonardo!

Shaun.

Shaun Taylor
Shaun Taylor
2,654 Points
Shaun Taylor
Shaun Taylor
2,654 Points

Thanks a lot! This seems to be working now. So far so good!

Is it wise to put your query code in the header file? wouldn't the header file get rather full if I were to utilise lots of different query?

Thanks again :)

Leonardo Hernandez
Leonardo Hernandez
13,798 Points

Yeah, putting the code in a file is a cleaner approach. Give it a go !