jQuery Masonry with WordPress

[mintertweed]

First of all, here is my website.

I wanted to use the masonry function now bundled with WordPress. I found this handy little website. Only problem is, I can’t seem to get it to work.

I’m currently using the Starkers theme. I added the first bit of code calling the function to my functions.php file. Then I used the author’s code as a reference to create this for my index.php:

<div id="main-content">
    <div id="container">
        <?php if ( have_posts() ): ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <div class="brick">
                <article>
                    <h2><a href="<?php esc_url( the_permalink() ); ?>" title="Permalink to <?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
                    <time datetime="<?php the_time( 'Y-m-d' ); ?>" pubdate><?php the_date(); ?> <?php the_time(); ?></time> <?php comments_popup_link('Leave a Comment', '1 Comment', '% Comments'); ?>
                    <?php the_content(); ?>
                </article>
            </div> <!-- end brick -->
        <?php endwhile; ?>
        <?php else: ?>
        <h2>No posts to display</h2>
        <?php endif; ?>
    </div> <!-- end container -->
</div> <!-- end main-content -->

And this is my CSS from my style.css file:

/*
    BLOG
*/

#container {
    width: 891px; /*width of the entire container for the wall*/
    margin: 0 -11px 0 0;
}

.brick {
    width: 266px; /*width of each brick less the padding inbetween*/
    padding: 0px 10px 10px 10px;
    background-color: #FFFEF2;
    color: #404040;
    margin: 0px 11px 11px 0px;
}

.brick a {
    color: #404040;
}

Now, step three is where I’m having some trouble. It’s purpose is to set up the masonry function so that my div containers can create a wall of posts. But the author doesn’t say where to put it. I thought, “Hey, a function! It must go into my functions.php file!” Apparently not.

I looked through the comments and, sure enough, someone had beat me to it. The response says that JavaScript or jQuery is usually placed in the footer. Well, since I have a footer.php and a html-footer.php, I tried them both at separate times. Neither of them worked. The function appears in plain text at the base of my website. So, now I am here asking for help.

Thank you for anything you can tell me!

Edit: I should note that I did have Masonry working on this website. It was a bit finicky though, so I thought I would try a proper implementation. The CSS from my style.css file is the exactly the same as before. It creates three columns with equal spacing between them. So, I know that’s at least right.

[TheDoc]

You’ll need to make sure you’re wrapping your JS in proper script tags:

<script>
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: '.item'
});
</script>

[TheDoc]

Of course, don’t forget to include the actual file before that:

<script src="/path/to/masonry.pkgd.min.js"></script>

[TheDoc]

Ah, I didn’t know it was included with WordPress.

[TheDoc]

Also note that both jQuery and Fitvids are throwing a 404:

[Alen]

Where is your js folder located? Theme folder? What code are you using to output jquery?

[Alen]

That will not work.
Try:

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.min.js"></script>

[Author]

Posts