Javascript not working in functions.php

  • Resolved edwardgyngell

    (@edwardgyngell)


    12 years, 6 months ago

    Hello.

    I am trying to get masonry working on my website but the following code doesn’t seem to be calling the javascript into my footer. Can anyone tell me why not.

    Thanks

    function portfolio_masonry() {
	if (!is_admin()) {
		wp_register_script('jquery_masonry', get_template_directory_uri(). '/js/jquery.masonry.min.js', array('jquery'), '2.0.110526');
		wp_enqueue_script('jquery_masonry');
		add_action('wp_footer', 'portfolio_add_masonry');

		function portfolio_add_masonry() { ?>
			<script>
				jQuery(document).ready(function($){
					$('#masonry-index').masonry({
						itemSelector: '.index-post-container',
						isAnimated: true,

					});
				});
			</script>
		<?php
		}
	}
}

add_action('init', 'portfolio_masonry');
Viewing 6 replies - 1 through 6 (of 6 total)

  • Just a hint about enqueueing JS on your front end pages. You can use the ‘wp_enqueue_scripts’ hook instead of ‘init’ and remove the is_admin() test. Just tidies up the code slightly.

    See here for more details: https://codex.www.ads-software.com/Function_Reference/wp_enqueue_script

    As for the main issue, you have a function inside a function. Try the code below. Should work correctly:

    function portfolio_masonry() {
	wp_register_script( 'jquery_masonry', get_template_directory_uri(). '/js/jquery.masonry.min.js', array('jquery'), '2.0.110526' );
	wp_enqueue_script( 'jquery_masonry' );
}
add_action( 'wp_enqueue_scripts', 'portfolio_masonry' );

function portfolio_add_masonry() { ?>
	<script>
		jQuery(document).ready(function($){
			$('#masonry-index').masonry({
				itemSelector: '.index-post-container',
				isAnimated: true,

			});
		});
	</script>
<?php
}
add_action( 'wp_footer', 'portfolio_add_masonry' );
    Thread Starter edwardgyngell

    (@edwardgyngell)

    Thanks for the reply.

    The masonry.min.js is being called in the header but the javascript isn’t displaying in the footer? Will the wp-footer place the script inbetween the <footer></footer> tags?

    Can you post a link please?

    Thread Starter edwardgyngell

    (@edwardgyngell)

    edwardgyngell.com

    Make sure your theme implements the wp_footer() function or calling the ‘wp_footer’ hook won’t do anything. See here:

    https://codex.www.ads-software.com/Function_Reference/wp_footer

    As your jQuery is only running after the document is loaded you could always add it to the ‘wp_head’ hook instead.

    Otherwise why not just add it to a .js file and enqueue it with a loading dependency on the masonry script? Then you wouldn’t have to add the jQuery code manually to the header/footer via hooks.

    Thread Starter edwardgyngell

    (@edwardgyngell)

    I had the hook inserted but it doesn’t want to show up. I will try adding it through a enqueue. Thanks for your help.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Javascript not working in functions.php’ is closed to new replies.