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

General Questions
1

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:

$(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

2

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

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.

Cheers,
Bob

1 Like
3

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