Using jquery in wordpress

Here is how I am adding custom jquery to a wordpress theme I am currently developing.. in other words how I am making an inbox in the header and want it to display when the user clicks on the inbox icon and then disappear when you click on something else.

First I had to call the jquery script in the foot.php of my wordpress theme (you want it being the last thing loaded)

I imported it using the following code to ensure that it will be compatible with other themes on other websites

<script src="<?php bloginfo('template_directory'); ?>/js/effects.js" type="text/javascript"></script>

I then added this code to the file /js/effects.js

jQuery(document).ready(function($){
// First of all hide all elements you want hidden when page loads
$(‘.inbox-mail’).hide(); // hiding mail box

// when you click the icon
$(“.site-header-user-notifcations-mail”).click(function(e){
e.preventDefault(); //use prevent default to stop the link from being active. This is good for keeping the link alive for those who havnt got javascript loaded but getting rid of it when javascript is loaded.
$(“.inbox-mail”).toggle(); // toggle is an intelligent show/hide
e.stopPropagation(); //stop propagation helps with when clicking away
});
$(document).click(function(){
$(“.inbox-mail”).hide(); // when you click anywhere in the document rehide mail but it doesn’t matter if when clicking inside this div due to stoppropagation
});
$(“.inbox-mail”).click(function(e){
e.stopPropagation();  //stop propagation prevents the conflict with the above code as you are clicking the document as well
});

You can adapt this method to create all sorts of different effects from popups to menu items.

Leave a Reply

Your email address will not be published. Required fields are marked *