# Jquery $(document).ready(function() where in single.html wordpress

**URL:** <https://forum.pinegrow.com/t/jquery-document-ready-function-where-in-single-html-wordpress/4620>\
**Category:** Questions\
**Created:** [October 18, 2020, 1:58pm UTC](https://forum.pinegrow.com/t/jquery-document-ready-function-where-in-single-html-wordpress/4620 "2020-10-18T13:58:18Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mazzel](https://avatars.discourse-cdn.com/v4/letter/m/58956e/32.png) [@mazzel](https://forum.pinegrow.com/u/mazzel)\
**Post date:** [October 18, 2020, 1:58pm UTC](https://forum.pinegrow.com/t/jquery-document-ready-function-where-in-single-html-wordpress/4620/1 "2020-10-18T13:58:18Z")

</div>

Hello,  
In single.html I handle one post as it should be. The header and footer are separately created from index.html.  
In single.html I have a DIV that should show jQuery content (slider).  
Normally in webdesign you put something like this at the end of your html to get it started:

```auto
$(document).ready(function(){
  $(".mynicediv").myNiceDiv();
});

```

How can I do it in Pinegrow?  
Should I put it within my single.html template definition?

Note the .js and .css library that I use for this div are included in inc/custom.php at the end as part of functions.php. I am working with the ST2 theme, setting it to my favour.  
Normally you would put the $document.readz(function(){…} after this library inclusions. But I just want it in single.html

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [October 19, 2020, 9:34am UTC](https://forum.pinegrow.com/t/jquery-document-ready-function-where-in-single-html-wordpress/4620/2 "2020-10-19T09:34:20Z")

</div>

I’m not quite sure what you mean by this:

> [@mazzel](#):
>
> Note the .js and .css library that I use for this div are included in inc/custom.php at the end as part of functions.php. I am working with the ST2 theme, setting it to my favour.  
> Normally you would put the $document.readz(function(){…} after this library inclusions. But I just want it in single.html

In WordPress all of your scripts and styles should be enqueued in your functions.php. Pinegrow does this for us from the and tags on the page. If you have your firing function, surrounded by tags in the HTML document after you include the library using tags you should be okay. If they end up getting enqueued in the wrong order you’ll need to use the WordPress actions to manually enqueue the js files.

> **[Including Scripts and Styles | Pinegrow Web Editor](https://pinegrow.com/docs/wordpress/enqueue-scripts-and-styles/)**
>
> Controlling how script and style resources are included into exported WordPress theme.

Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![mazzel](https://avatars.discourse-cdn.com/v4/letter/m/58956e/32.png) [@mazzel](https://forum.pinegrow.com/u/mazzel)\
**Post date:** [October 25, 2020, 5:38pm UTC](https://forum.pinegrow.com/t/jquery-document-ready-function-where-in-single-html-wordpress/4620/3 "2020-10-25T17:38:22Z")

</div>

Solved, I put it in a seperate .js script file (slider.js). I then did do a wp\_enqueue/do\_action in function.php. Basically in inc/custom.php (using PG startertheme2 files)  
This is the way it should be, sounds the same like you advised Bob.  
So I did get the OWL slider working now, OWL 2.3.4. Css and js from the OWL library are wp\_enqueue’d and also the own slider.js is enqueued. In the slider.js I also steer the slider with the OWL options.  
Since jQuery and the $ sign are a seperate story in wordpress, I made the slider.js like this and that works for those who also try to get OWL.

```
jQuery(function($) {
	$('.owl-carousel').owlCarousel({
   navigation : true,
    singleItem : true,
    transitionStyle : "goDown"
    })
})
```