• James posted an update 1 year, 2 months ago

    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 show on click 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 is compatible will other themes on other websites http://'?php

    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
    });