The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other jQuery Masonry with WordPress

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #151318

    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">
                        <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(); ?>
                </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:

    #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.


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

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

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

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

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


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



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


    That will not work.

    <script src="<?php bloginfo('template_directory'); ?>/js/jquery.min.js"></script>
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘Other’ is closed to new topics and replies.