Enqueue Masonry

  • Resolved jake.wpsupport

    (@jakewpsupport)


    8 years, 6 months ago

    JSFiddle

    WordPress Codex on wp_enqueue_scripts

    I am trying to get Masonry to work in the footer/widget area of my local development site. I am using _S to create a new parent theme. I seem to be having trouble enqueuing the Masonry JQuery correctly into the functions.php. From what I read online, the masonry script is included into the WordPress core, and should be rather easy to enqueue…and I believe I would not need to register it, right? I am currently trying this in functions php:

    function spharler_scripts() {
	wp_enqueue_style( 'spharler-style', get_stylesheet_uri() );

	wp_enqueue_script( 'spharler-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );

	wp_enqueue_script( 'spharler-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}

	// Adds Masonry to handle vertical alignment of footer widgets.
	wp_enqueue_script( 'masonry');
	wp_enqueue_script( 'jquery-masonry', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'spharler_scripts' );

    I will try to get a GitHub fork of my project up if necessary.

Viewing 9 replies - 1 through 9 (of 9 total)
  • stephencottontail

    (@stephencottontail)

    8 years, 6 months ago

    When I use your posted code, Masonry loads correctly for me (although I’m not sure if you need to use both masonry and jquery-masonry; you could try just loading masonry, but I’m not sure if it would make a difference).

    Is the fiddle you posted an exact replica of the code in your theme?

    Thread Starter jake.wpsupport

    (@jakewpsupport)

    8 years, 6 months ago

    Hi Stephen, thanks for your time. Glad it worked for you, maybe that will help me narrow down my problem. Are you using underscores? I was confused about needing to load jquery-masonry as well. Either way, when I take it out, there is still no affect to my footer. When I use firebug in Firefox browser to inspect the code, I see the masonry scripts in the footer…just no effect to the widgets, they are still not responding. I was suspecting maybe a css issue. The fiddle code is taken directly from my site, only the target area of the footer though. Also, if you look at the css, it imports the _S.css, so the reset styles from that would be included as well.

    stephencottontail

    (@stephencottontail)

    8 years, 6 months ago

    In your fiddle, you have the widget area wrapped in <div class="widget-area"> ... </div>, but you’re targeting $( '.site-footer' ) with Masonry. Also, you’ve got JQuery (capital J) instead of jQuery in your first line of JavaScript. Were those just copy-and-paste errors?

    Also, I think it looks cleaner if you explicitly set a width on Masonry elements, even if you’re using a pixel value for columnWidth. The “bricks” look cleaner to me this way, especially in a situation like this where you’re setting a contrasting background color.

    Thread Starter jake.wpsupport

    (@jakewpsupport)

    8 years, 6 months ago

    Ah, thanks for pointing that out. The capital J was likely a copy-paste error, but the class name was a change I forgot to revert back to. I had initially tried it with “.widget-area”, but that was not working, so I tried “.site-footer”. I have now made those corrections, but it still is not working. Perhaps your suggestion of setting widths to the elements will help, I will try that. I have now setup a GitHub repo with all the source code: spharler website

    Thread Starter jake.wpsupport

    (@jakewpsupport)

    8 years, 6 months ago

    I added .widget {width: 400px;} to my css styles…is that what you were suggesting? When I checked the elements in browser, they seem to have already had defined widths with .site-footer .widget.

    stephencottontail

    (@stephencottontail)

    8 years, 6 months ago

    Let’s forget about settings widths on the Masonry elements for now. I don’t think it’s related to your main issue.

    I cloned your repository into my local WP install and once I enqueued the script that contains the Masonry settings:

    wp_enqueue_script( 'spharler-masonry-settings', get_template_directory_uri() . '/js/masonry-settings.js', array( 'masonry', 'jquery' ) );

    Masonry worked for me. If you add that code to spharler_scripts(), do you see Masonry loading on your footer widgets?

    Thread Starter jake.wpsupport

    (@jakewpsupport)

    8 years, 6 months ago

    Sorry Stephen, it is still not working. I think I remember having it set up that way before when I was first trying to get Masonry on there, but then began trying the less specific methods. I’m surprised it’s working on yours though. When I open the page, it shows the widgets at the bottom with the css layout, but they are not ideally positioned with Masonry. I also notice the positions do not change when I resize the browser, as Masonry does.

    I added a screenshot on the repository showing how it looks on my screen:
    https://github.com/jspharler/spharler

    stephencottontail

    (@stephencottontail)

    8 years, 6 months ago

    I don’t know all the specifics of how Masonry works, but in general I’ve noticed that Masonry attempts to place items such that the height of the containing element is as small as possible. Because of this, if you have “bricks” of widely different heights, you do occasionally get some strange placements. Unfortunately, there isn’t a lot you can do about that.

    The likely reason the positions aren’t changing is because .main-page is set to 960 pixels wide (and doesn’t change even if it overflows the browser window) and the width of the Masonry container .widget-area is set to 100% of it’s containing element (which is .main-page). Because of this, Masonry never changes the width of the Masonry container and so the “bricks” never move. If you set a max-width and 100% width on .main-page, the Masonry container resizes correctly:

    .main-page {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}
    Thread Starter jake.wpsupport

    (@jakewpsupport)

    8 years, 6 months ago

    Your awesome Stephen! Thanks for the help, the problem is fixed! The solution was a combination of making the changes to .main-page that you suggested, and also the css width of the widgets.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Enqueue Masonry’ is closed to new replies.