Jquery Masonry bricks not appearing/loading

  • Hi Everyone:

    I am trying to use jquery masonry on the home page of this test site

    Much of what I am implementing is based on principles in Morten Rand-Hendrikson’s tutorial on jquery masony. I just copied the function with a few modifications.

    As you can see, the masonry script enqueues, but the itemSelector .photo-entry is not being transformed into a “masonry brick”. I can’t tell if the problem is with the function.php, home.php, or the style sheet. funtion.php and home.php are below.

    function anaximander_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', 'anaximander_add_masonry');

		function anaximander_add_masonry() { ?>
			<script>
				jQuery(document).ready(function($){
					$('#masonry-index').masonry({
						itemSelector: '.photo-entry',
						isAnimated: true
					});
			  	});
			</script>
		<?php
		}
	}
}

add_action('init', 'anaximander_masonry');
    <?php get_header(); ?>

<div id="primary" class="site-content">
<div id="content" role="main">

	<!-- Begin loop for latest photos -->
	<?php if ( have_posts() ) : ?>
<section id="masonry-index" class="group">
		<?php while ( have_posts() ) : the_post(); ?>
		<div class="photo-entry">

			<a href="<?php the_permalink(); ?>">
			<?php the_post_thumbnail(); ?>

			<footer>
				<h2><?php the_title(); ?></h2>
				<p class="date"><?php the_time('m.d.Y'); ?></p>
			</footer>
			</a>

		</div>
		<?php endwhile; ?>
</section><!-- #masonry-index -->
	<?php else : ?>

		<!-- Message if there are no photos -->
		<p><?php _e( 'Please check back soon for more photos!', 'twentytwelve' ); ?></p>

	<?php endif; ?>
	<!-- End loop -->

	<!-- Navigation for older and newer posts -->
	<nav class="photo-navigation">

		<p class="previous-photos">
			<?php next_posts_link('? Older posts ');  ?>
		</p>
		<p class="newer-photos">
			<?php previous_posts_link('Newer posts ?');  ?>
		</p>

	</nav>

</div>
</div>

<?php get_footer(); ?>

    ps. I’m using a childtheme

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    ‘init’ is no longer the correct action to enqueue scripts from. Use ‘wp_enqueue_scripts’. This will only fire for front end pages, so you don’t need if (!is_admin()). Unless you have good reason not to, use the jquery-masonry version bundled with WP. It is already registered, just enqueue it from ‘wp_enqueue_scripts’. If you must use a different version, you need to deregister the WP version before registering your own.

    It may not be a good idea to add other action hooks from within a ‘wp_enqueue_scripts’ callback, nor is there any reason to. Just add the ‘wp_footer’ action when your theme or plugin loads as is done normally.

    Thread Starter dgissen

    (@dgissen)

    Thanks bcworkz, but I don’t think that solves the latter problem. The script is loading but the masonry block does not happen for #masonry-index .photo-entry

    Moderator bcworkz

    (@bcworkz)

    It’s starting to sound like a jQuery error somehow. Are any errors recorded in your browser’s error console? Other than what I already mentioned, everything else seems to be in order.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Jquery Masonry bricks not appearing/loading’ is closed to new replies.