WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Javascript not working in functions.php (7 posts)

  1. edwardgyngell
    Member
    Posted 1 year 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');
  2. David Gwyer
    Member
    Posted 1 year ago #

    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: http://codex.wordpress.org/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' );
  3. edwardgyngell
    Member
    Posted 1 year ago #

    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?

  4. David Gwyer
    Member
    Posted 1 year ago #

    Can you post a link please?

  5. edwardgyngell
    Member
    Posted 1 year ago #

    edwardgyngell.com

  6. David Gwyer
    Member
    Posted 1 year ago #

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

    http://codex.wordpress.org/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.

  7. edwardgyngell
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic