I've seen a few people ask about this, but I can't seem to get any other suggestions to work on my site.. I am trying to use slicknav.js on a Wordpress site I'm working on and it is not working at all. I got it to work at one point, but unfortunately had to scrap that site and start over and now I can't get it working.
I've done a little testing and just realized that NONE of my scripts are loading. wp_enqueue_scripts() isn't passing off any of my scripts at all.. Any idea what I may have done to break that?
I'm developing locally, so I can't give a link... But here is all my code.
Functions.php
<?php
// WP Enqueue Styles
function wop_styles() {
wp_enqueue_style( 'normalize_css' , get_template_directory_uri() . '/css/normalize.css' );
wp_enqueue_style( 'fontawesome_css' , 'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' );
wp_enqueue_style( 'googleFonts_css' , 'https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto+Slab:400,700|Satisfy' );
wp_enqueue_style( 'slicknav_css' , 'https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.5.5/slicknav.min.css');
wp_enqueue_style( 'style_css' , get_template_directory_uri() . '/css/compile.css' );
}
add_action( 'wp_enqueue_scripts' , 'wop_styles' );
// WP Enqueue Scripts
function wop_scripts() {
wp_enqueue_script( 'slicknav_js' , 'https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.5.5/jquery.slicknav.min.js' , array('jQuery_js', 'slicknav_css') , true);
wp_enqueue_script( 'theme_js' , get_template_directory_uri() . '/js/theme.js' , array('jQuery_js'), true );
}
add_action( 'wp_enqueue_scripts' , 'wop_scripts' );
my Theme.js file:
(function($){
$('menu-header-menu').slicknav();
})(jQuery);
Finally, here is my HTML markup.
<header class="page-header"> <!--- BEGIN .page-header --->
<div class="branding">
</div>
<nav>
<?php wp_nav_menu(array('theme_location' => 'header-menu', 'container' => false,)); ?>
</nav>
</header> <!--- END .page-header --->
<footer class="page-footer"> <!--- BEGIN .page-footer --->
<?php wp_footer(); ?>
</footer> <!--- END .page-footer --->
</body> <!--- END .page-outer-wrapper -->
</html>
My footer doesn't show any scripts, and even when I change $in-footer = false, Nothin.
Obviously I have some stuff between the header and footer, but I figured these were the only real important parts..
Any ideas??
$in_footer
(boolean) (optional) Normally scripts are placed in the <head> section. If this parameter is true the script is placed at the bottom
of the <body>. This requires the theme to have the wp_footer() hook in
the appropriate place. Note that you have to enqueue your script
before wp_head is run, even if it will be placed in the footer.
If I understand correctly. You want to call your scripts in your footer but your HTML markup doesn't include a footer?
To enqueue scripts in the header ($in-footer=false) it must be before the wp_head() call.
Reference: http://codex.wordpress.org/Function_Reference/wp_register_script
Related
For some reason a js isn't running on a page on my wordpress development site called 'information'. The page template was copied from a page which successfully runs the script so I'm not sure what's missing. I've tried to remedy the situation by running this script in the functions.php file:
function my_scripts() {
if( is_page( array( 'information') ) ){
wp_enqueue_script( 'variable_fonts', 'js/variable_fonts.js', array(), '1.0.0', true );
}
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
I've also tried running this script on the page itself:
<script>
if(location.pathname=="/information/")
script.src = /js/variable_fonts.js;
</script>
Neither option is working. Am I missing something?
You forgot to call the function. Just add
my_scripts() to the end of your file
So with a bit more digging I realised I'd forgot to close the page after chopping out the get footer and get sidebar stuff from the bottom of the page, which was causing the scripts not to load. All fixed now by adding:
<?php wp_footer(); ?>
</body>
</html>
I have an HTML form which requires a javascript and JQuery to calculate prices. This is what the form looks like with the javascript implemented and everything working correctly: https://counterboosting.com/wp-content/themes/appointment/csgoboost/
Now I would like to put this form onto my wordpress website page. All the HTML shows up and it seems like the CSS also works but the Javascript just won't work.
There are 3 Javascripts and 3 CSS files to be linked, as you can see if you look at the source code of the link I put above.
I tried to Enqueue the scripts in functions.php file like this:
function wp_theme_enque_scripts() {
wp_enqueue_script( 'boosting', get_template_directory_uri() . '/csgoboost/js/boosting.js', array('jquery'), '1.0.0', true );
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/csgoboost/js/bootstrap.min.js', array(), '3.3.6', true );
wp_register_style('bootstrap.css', get_template_directory_uri() . 'csgoboost/css/bootstrap.css', array(), '3.3.6', 'all' ); wp_enqueue_style( 'bootstrap.css');
wp_register_style('boosting.css', get_template_directory_uri() . 'csgoboost/css/boosting.css', array(), '3.3.6', 'all' ); wp_enqueue_style( 'boosting.css');
}
add_action( 'wp_enqueue_scripts', 'wp_theme_enque_scripts' );
I then put this code in the HTML page:
<script src="https://www.counterboosting.com/wp-content/themes/appointment/csgoboost/js/jquery.js"></script>
<script src="https://www.counterboosting.com/wp-content/themes/appointment/csgoboost/js/bootstrap.min.js"></script>
<script src="https://www.counterboosting.com/wp-content/themes/appointment/csgoboost/js/boosting.js"></script>
This is the page I want the form to display on but the javascript is not working: https://www.counterboosting.com/buy-csgo-rank-boosting/
I'm really desperate to fix this, its been over a week that I've been try this. I'd even reward anyone able to help me here.
Thank you so much in advance (as you might tell, I am not very experienced in this field)
I see SyntaxError: expected expression, got '<' from my browser console from your page https://www.counterboosting.com/buy-csgo-rank-boosting/ I think you can fix it from there first.
I have a JavaScript file that isn't being loaded and I'm not sure why. I'm customizing a theme (by creating a child theme) in WordPress and I have this functions.php file:
<?php
function enqueue_resources()
{
if (is_page("Projects")) {
wp_enqueue_script("isotope", "http://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js", array("jquery"));
wp_enqueue_script("images-loaded", "http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js", array("jquery"));
wp_enqueue_script("my-script", get_stylesheet_directory_uri() . "/assets/js/my-script.js", array('jquery', 'isotope', 'images-loaded'), null);
}
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ));
}
add_action('wp_enqueue_scripts', 'enqueue_resources');
... function to print out currently enqueued scripts/styles
And this is the page where I'm trying to enqueue the script: http://dev.presspedal.com/rcnw/projects/ .
I've checked and the correct files/folders exist, the URL generated is correct, the other two scripts are being added to the HTML, no plugins are causing this issue (I deactivated all of them and it's still an issue), wp_head(); wp_footer; get_header(); and get_footer are all being called correctly and my-script.js is in the $wp_scripts->queue.
But my-script.js isn't being added to the HTML. It's just not there. Here's the weird part: sometimes my-script.js is added to my page, but when I clear cache and refresh, it's gone again.
Any help?
I have the following situation:
I am carrying this pure HTML theme (that use BootStrap CSS framework) into a WordPress theme.
This is the original pure HTML demo theme (I have the entire source code because it is a downlodable example): http://www.html.it/guide/img/bootstrap/demo/home.html
And this is my personal WP theme on wich I am working on: http://onofri.org/WP_BootStrap/
As you can see the only difference from the original demo website and my personal WP theme is that in the second one the SlideShow in the header (made using the flexslider JQuery plugin) is not shown.
I have do the following operations:
1) In my footer.php file I have disabled the JavaScript loading commenting them and I call wp_footer(), in this way:
<!--
<script src="http://code.jquery.com/jquery.js"></script>
<script src="/wordpress/wp-content/themes/AsperTheme/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="/wordpress/wp-content/themes/AsperTheme/assets/plugins/flexslider/jquery.flexslider.js"></script>
<script src="/wordpress/wp-content/themes/AsperTheme/assets/plugins/fancybox/jquery.fancybox.pack.js"></script>
<script src="/wordpress/wp-content/themes/AsperTheme/assets/js/scripts.js"></script>
-->
<?php wp_footer(); ?>
</body>
2) I have insert the following code into my functions.php file to load all the previous JavaScript using the WP standard way:
/* Function automatically executed by the hook 'load_java_scripts':
* 1) Load all my JavaScripts
*/
function load_java_scripts() {
// Load JQuery:
wp_enqueue_script('jquery');
// Load FlexSlider JavaScript
wp_enqueue_script('flexSlider-js', get_template_directory_uri() . '/assets/plugins/flexslider/jquery.flexslider.js', array('jquery'), 'v2.1', true);
// Load bootstrap.min.js:
wp_enqueue_script('bootstrap.min-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.min.js', array('jquery'), 'v3.0.3', true);
// Load FancyBox:
wp_enqueue_script('fancy-js', get_template_directory_uri() . '/assets/plugins/fancybox/jquery.fancybox.pack.js', array('jquery'), 'v2.1.5', true);
// Load scripts.js:
wp_enqueue_script('myScripts-js', get_template_directory_uri() . '/assets/js/scripts.js', array('jquery'), '1.0', true);
// Load Modernizer:
wp_enqueue_script('myodernizer-js', get_template_directory_uri() . '/assets/js/modernizr.custom.js', array('jquery'), '2.6.2', true);
}
add_action('wp_enqueue_scripts', 'load_java_scripts');
As you can see I set all scripts depend on JQuery so JQuery is loaded first.
But as you can see the jquery and\or the jquery.flexslider.js can't work.
The strange thing is that I change the end of my footer.php file in this way the SlideShow is correctly shown:
<script src="http://code.jquery.com/jquery.js"></script>
<script src="/wordpress/wp-content/themes/AsperTheme/assets/plugins/flexslider/jquery.flexslider.js"></script>
<?php wp_footer(); ?>
</body>
</html>
So what am I missing? What could be the problem?
Looking at the source code of my website (into FireFox) it seems to me that all the JavaScript is loaded but can't work, the SlideShow not appear.
What is the difference?
WordPress runs jQuery in nonConflict mode, you'll have to replace all $ by jQuery.
Example:
$('.flexslider').height();
Becomes
jQuery('.flexslider').height();
WordPress codex: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers
I'm using the Smooth Div Scroll jQuery Plugin to have a moving filmstrip on a website. The images loaded into the film strip are of a custom post type and each have a title and contain a single image. The plugin scrolls horizontally across a long div containing any amount of images. My problem is that I can scroll for a seemingly infinite amount of time even after the images are gone.
Here's the my breakdown of the problem:
I've tried using plain images instead
of the post loop, and everything
worked as expected (no infinite
scrolling).
I've tried setting scripts between document.ready and window.load, with document.ready they don't load at all.
I've tried calling a public function "recalculateScrollableArea" so that the area could be calculated after the images are loaded to no avail, then by calling an alert box in jQuery in the script I could see that it was still being called before the images were loaded.
How it should look usually:
How it looks when it over-scrolls:
The Smooth Div Scroll code and the following initializing code are both called at the bottom of the footer:
jQuery(window).load(function() {
jQuery("div#makeMeScrollable").smoothDivScroll({
autoScroll: "onstart" ,
autoScrollDirection: "backandforth",
autoScrollStep: 1,
autoScrollInterval: 15,
visibleHotSpots: "always"
});
This is what I did to try and fix the resizing:
jQuery(document).ready(function() {
jQuery("#makeMeScrollable").smoothDivScroll("disable");
});
I should also mention, the images for the posts are surrounded by "p" tags but I don't see why that would be the issue.
Thanks for reading!
EDIT:
Here is some more code, most of it is stock and working when just plain IMGs are place instead of the loop.
The base CSS and jQuery files are the same as the ones in this simple demo: http://www.smoothdivscroll.com/basicDemo.htm
jQuery and jQuery UI Imports (Working)
function jQuery_from_Google() {
if ( !is_admin() ) { // actually not necessary, because the Hook only get used in the Theme
wp_deregister_script( 'jquery' ); // unregistered key jQuery
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js', false, '1.5.2'); // register key jQuery with URL of Google CDN
wp_enqueue_script( 'jquery' ); // include jQuery
}
}
// nur for Themes since WordPress 3.0
add_action( 'after_setup_theme', 'jQuery_from_Google' ); // Theme active, include function
function jQueryUI_from_Google() {
if ( !is_admin() ) { // actually not necessary, because the Hook only get used in the Theme
wp_register_script( 'jqueryui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'); // register key jQueryUI with URL of Google CDN
wp_enqueue_script( 'jqueryui' ); // include jQueryUI
}
}
// nur for Themes since WordPress 3.0
add_action( 'after_setup_theme', 'jQueryUI_from_Google' ); // Theme active, include function
Imports take place at the bottom of the footer:
<?php // Smooth Div Scroll inport for filmstrip galleries ?>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/javascript/filmstrip.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/SmoothDivScroll-1.1/js/jquery.smoothDivScroll-1.1-min.js"></script>
</body>
</html>
Here's a snippet of code for one section which uses a loop for content:
<?php if(is_page('engagements')) { ?>
<div id="makeMeScrollable">
<div class="scrollingHotSpotLeft"></div>
<div class="scrollingHotSpotRight"></div>
<div class="scrollWrapper">
<div class="scrollableArea">
<?php
$args = array( 'post_type' => 'engagement_photos' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
the_content();
endwhile;
?>
</div>
</div>
</div>
<?php } else if(is_page('weddings')) { ?>
Here's an example of adding an image in WordPress:
You may want to try the following code in the functions.php file.
function init_my_scripts()
{
if (!is_admin())
{
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://code.jquery.com/jquery-1.6.1.min.js');
wp_enqueue_script('jquery');
wp_deregister_script('jQuery UI Core');
wp_register_script( 'jQuery UI Core', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'); // register key jQueryUI with URL of Google CDN
wp_enqueue_script( 'jQuery UI Core' ); // include jQueryUI
wp_register_script('filmstrip', get_bloginfo('template_directory').'/javascript/filmstrip.js');
wp_enqueue_script('filmstrip');
wp_register_script('smoothDivScroll', get_bloginfo('template_directory').'/SmoothDivScroll-1.1/js/jquery.smoothDivScroll-1.1-min.js');
wp_enqueue_script('smoothDivScroll');
}
}
add_action('init', 'init_my_scripts');
Of course, you can change the jQuery CDN to Google CDN, change 'template_directory' to 'stylesheet_directory', etc.
Found the problem, I tried putting in regular hardcoded imgs which worked fine and then wrapped them in "p" tags which produced the same issue. I guess I was just over-thinking the problem. Sorry. Now to figure out how to get the loop to just produce the imgs.