[Resolved] Display grid of posts randomly

[Ryan]

Is there any particular library or script which will allow me to display a grid of posts (like tiles) in a random order each time the page is loaded?

I have looked into using Metafizzy’s Packery or Isotope library but I can’t see a random order sorting method.
Is there anything out there that you could recommend?

[Ryan]

Had some more time to look hard at this one. I know it’s quite off topic for something in a GP forum but I think I might be on to something. I thought about just generating my own shuffle function with jQery, borrowing a bit of logic from this Stackoverflow post http://stackoverflow.com/questions/1533910/randomize-a-sequence-of-div-elements-with-jquery.

So I made a test JSFiddle https://jsfiddle.net/coolwebs/zLgsdno7/4/

Now I suppose it’s all about integrating it into a GP page template. Is the posts grid structured in a way that would allow me to do this kind of customization Tom?

I will try and look into it more over the next few days.

[Tom]

Hmm, tough one.

You could try (no idea if it will work):

Changing .container to .content-area
Changing .band to .site-main

You may want to place .blog if front of those so it only applies to the blog as well.

[Ryan]

I will have a play around and let you know what I find. The reason for doing this is that I’ve got a potential lead for a website build. He wants to use a page as an advertisement billboard where adds will get randomly positioned each time the website page is loaded (so they can all share some space at the top of the page at some stag).

[Ryan]

Interesting.
Right now I have set it up on a test site by using GP Hooks http://blogname.coolwebs.com.au/ and it keeps giving me an error in the inspector saying that I cannot declare ‘$’ blogname.coolwebs.com.au/:349 Uncaught TypeError: $ is not a function

This is feels like deja vu from the time I was having issues with Google Tag Manager (GTM) for Google Analytics (GA).

I can see that the WordPress core loads and manages the jquery long before I call upon it in the hooks but it’s still having an issue.

What would I be doing wrong?

[Tom]

In your javascript, replace all $ with jQuery.

You need to be more specific in JS while in WordPress as jQuery isn’t the only library that uses $.

[Ryan]

Thanks, that helped out heaps. I will have to keep that in mind – i think that was the issue I was having with the GTM code on another support post.

Anyhow, I got it working in this demo site http://blogname.coolwebs.com.au/
Obviously have to work on it some more. I have to change the code every time I choose between masonry and grid for the blogs as GP inserts another container div above the article elements.

<script>

(function($) {
  
  $.fn.randomize = function(tree, childElem) {
    return this.each(function() {
      var $this = $(this);
      if (tree) $this = $(this).find(tree);
      var unsortedElems = $this.children(childElem);
      var elems = unsortedElems.clone();
      
      elems.sort(function() { return (Math.round(Math.random())-0.5); });  

      for(var i=0; i < elems.length; i++)
        unsortedElems.eq(i).replaceWith(elems[i]);
    });    
  };

})(jQuery);

jQuery(document).ready(function() {
                console.log('random shuffle')
		jQuery("body").css("display", "block");
		jQuery("div.content-area").randomize("div.masonry-container");
});

</script>

I think I find this a bit easier than trying to integrate a library such as isotope (with shuffle) when you already have masonry. Less (lib) code is better 😉

[Ryan]

I found something better:

function my_random_posts_order( $query ) {
    if ( $query->is_home() && $query->is_main_query() ) {
        $query->set( 'orderby', 'rand' );
    }
}
add_action( 'pre_get_posts', 'my_random_posts_order' );

I could not manage to get the code working in GP Hooks so I added it to my child functions.php file.

[Tom]

Ah yea, that’s a much better method 🙂

[Tito Dupret]

Would it be possible to add this under Blog customization in GP ?

Best from Brussels,

[Tom]

As an option in the Customizer, it would be possible but I’m not sure there’s enough demand.

Using the function above is a pretty easy solution without needing to create an option for it 🙂

[Author]

Posts