If someone could point me in the right direction on how exactly to do this without yelling about follow codex site lol. I wouldnt be here if I wasnt able to get it working haha.

I created a neat little jquery, css , and html code to do a lightbox effect on an image. However, I am having trouble adding the javascript part. I tried to follow the tutorials on how to do it but it never ends up working. So I have my css and html already added to my theme on a custom page. Now how do I add the javascript part?

Thanks and here is my jfiddle! https://jsfiddle.net/w3yLx8vt/31/

  • 1
    It is not clear what is that you are asking. please edit you question to include relevant parts of the code whit which you are having trouble, and what the help that you need with it, is it adding the JS, passing parameters, something else? – Mark Kaplun Feb 8 '16 at 3:43
  • Sorry about that, I have edited it. – Irish Redneck Feb 9 '16 at 12:25

The best practice is the following:

Put your Javascript code in a file, yourcustomjs.js, and store it in your theme folder. I would recommend yourtheme/js/yourcustomjs.js.

Be sure that you wrap your script, where needed, in a Document.ready function like the following:

jQuery(document).ready(function($) {
    // your code

This enables you to ensure the $ shortcut is working.

Afterwards you need to register and enqueue your script. Usually, you do this in your functions.php, but I always recommend to create a file yourtheme/library/scripts.php, which is included in functions.php. This allows you to handle all the Javascript files in one place, with no additional stuff around it.

In your scripts.php you have to register your Javascript within WordPress.

wp_register_script (
    'yourscripthandle', //string $handle: a string to identify this script
    get_bloginfo( 'template_url' ) . '/js/yourcustomjs.js', //string $src: Path of your script file
    array ('jquery' ), // array $deps = array(): defining which scripts your script is dependend on. In your case, it's jQuery.
    '', // string|bool $ver = false: The version of your Script
    true //bool $in_footer = false: whether your script should be enqueued in `wp_head()` or `wp_footer()`

Now WordPress knows about your script, and you need to tell WordPress to output it, and this is done with wp_enqueue_script():

wp_enqueue_script( 'yourscripthandle' );

There you go! If you followed the steps correctly, your script should be loaded in the footer.

BTW: analogous to registering and enqueueing scripts, you should do the same with wp_register_style() and wp_enqueue_style()

| improve this answer | |
  • I copied and pasted everything you typed . Then just copied my javascript into those brackets for the script. Created the file structure you gave and then pasted my html into a custom page. Still nothing tho. Any ideas? Sample is at: chesapeaketees.com/test-page and password is SecretPlace – Irish Redneck Feb 12 '16 at 14:39
  • Did you look at your source code? You do not call wp_head(). You got some pretty messed up stuff there, including two closing </html> tags, not closing <div>s, and stuff like that. Please try to use this code on a template that works, or sort your template out. To start with: Validation – fischi Feb 12 '16 at 15:34
  • Wow thank you for that tool. Should i be worried my code has more errors than code lol... Well I taken the html code and put inside of a default template page along with adding the css to the style sheet, but stll nothing.. Guess those conflicting errors are effect it. – Irish Redneck Feb 12 '16 at 23:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.