Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
The many ways visitors access web sites, via mobile devices, tablets, and desktops, now requires sites to incorporate responsive design elements that adapt to different screen sizes and browsers. In this course, Morten Rand-Hendriksen demonstrates design strategies, best practices, and actual code examples for creating a responsive web site. The course covers layout, navigation, responsive video embedding, and content sliders. The final chapter shows how to create an index page with jQuery Masonry, a jQuery plugin that helps you create dynamic grid layouts.
Now that you've seen what Masonry can do, let's install it into the Anaximander theme so we can use it to create a cool, functional front page. To download Masonry, go to the Masonry web site and right-click on the Download the script jquery.masonry.min.js. So I'll go click Save link as, and I'll navigate to my WordPress installation or where I have my theme, and I'll go into my theme, go into the js folder, and simply save jquery.masonry.min.
Now that I have jquery.masonry added to my theme folder, I want to enqueue it into the site. So again, I'll go to functions.php and I'll scroll all the way to the bottom, make a few new lines, and this is where I want to enqueue jquery.masonry. If you go to the code_snippets file for this course, you'll find that full function for enqueueing masonry. So I'll simply copy it out and paste it in, and then I'll explain what happens.
So you see here it says exclamation point, which is not, so we're saying if this is not an admin page, then run the following. So if it is an admin page, none of this happens. Inside the function we first register the script by giving it a name, then pointing to where it is. It's in the template_directory under the folder js and the script is called jquery.masonry.min.js. This script is related to the jQuery library that ships with WordPress, so therefore we're telling WordPress to also load the jQuery library.
Once we register a script, we enqueue the script, and by enqueueing the script, I mean we add the script to the very top of the page. So all we are doing here is saying wp_enqueue_script and then we just call that name that we just gave the script. This adds the jquery.masonry script itself to WordPress. The next thing we need to do is create the function that actually calls up a jquery_masonry script. That function is down here and what it does is it says find the ID masonry-index and assign masonry to it.
And then inside that ID we have an itemSelector called .index-post-container and each of these should be floated in the way that masonry floats content. This, by the way, is also where you want to add additional functions, so for example if you want to add the animation function that animates this content as you move it. So what I mean is when this content slides around in the screen, instead of it just popping into place, you want to add that in here.
So what you would say is isAnimated: true, and there are countless other options you can also add. You'll find all of these in the documentation on the masonry web site. Once you've completed a function to add in Masonry, save functions.php, go back to your site, reload it, and though nothing happens quite yet, to make sure Masonry is being enqueued properly, go Ctrl+U in Chrome to open the code itself and then Ctrl+F to open the Finder and type in masonry.
And here you can see masonry being enqueued and you'll also see that function we created being listed in the footer, meaning masonry will kick in. Now note that I said it's listed in the footer. If we go back to the function here, you'll see that the add_action function that adds the anaximander_add_masonry, which is this custom code here, is being added in wp_footer, meaning it's added at the very end of the page. That just means the function doesn't run until all the content is filled in on the page, and we're doing that because we don't want masonry to try to reorganize content before all the content is available.
With Masonry installed and up and running, we're now ready to hook it into our index page.
There are currently no FAQs about WordPress: Building Responsive Themes.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.