Custom Word Press Page Links

For a song index, ItGoesLike.com, I use WordPress. I made a page for each of the 60 songs. On the homepage, I wanted to link to each of the songs in a fun, visually appealing way. Thus I employed the content block “Custom HTML.” This allowed me to insert my own html, css, and javascript. What did I do with this freedom?

Song blocks

Each song link is an <a> anchor tag that contains 2 elements: song title, and song gist. These blocks are contained within a <div> named #catalog, which is a flex box. Here is the CSS for the container and the children (songs) :

#catalog {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-evenly;
	}

	#catalog a.catalogItem {
		border: 1px solid #000;
		width: 230px;
		border-radius: 0px;
		text-align: center;
		background: rgba(214, 188, 188, 0.4);
		margin-bottom: 20px;
		padding: 0 8px;
		box-shadow: 2px 1px #000;
		font: Arial, sans-serif;
		text-decoration: none !important;
		color: #000;
		
	}

It looks like this: (I’ll explain the Shuffle later / below)..

What is with the various background colors?

I wanted to use bright colors and didn’t want to manually try different hex values for every block.. so,,, I devised a script that randomly assigns a hex value given limitation on how dark it can be.. Here is the code, first the function and then the loop through each anchor block to assign a bg color.

      function getRandomColor() {
                var letters = 'BCDEF'.split('');
                var color = '#';
                for (var i = 0; i < 6; i++ ) {
                    color += letters[Math.floor(Math.random() * letters.length)];
                }
                return color;
            }

jQuery('#catalog a').each(function() {
  jQuery(this).css("background-color", getRandomColor());
}); 

—–

Note that this function is called on each page load, giving a unique rendering at each visit.

Shuffle = Randomly Sort the Song Blocks

I thought it would be interesting to let the user click a button to shuffle the sequence of the song blocks. By default, they appear in alphabetical order. Shuffle play after all, is a common feature for the context of playlists. Here is the jQuery function I found for shuffle, followed by the click handler I made…

(function(jQuery){
 
    jQuery.fn.shuffle = function() {
 
        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = jQuery.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = jQuery(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });
 
        this.each(function(i){
            jQuery(this).replaceWith(jQuery(shuffled[i]));
        });
 
        return jQuery(shuffled);
 
    };
 
})(jQuery);

//end of shuffle plugin

jQuery("#shuffler").on("click",function() {
  jQuery("#catalog a").shuffle(); 
}); 

That’s It

Check out how it all comes together at the It Goes Like Song Catalog. Reload the page a few times. Click “Shuffle” a few times.. You’ll dig it the most!