Join Morten Rand-Hendriksen for an in-depth discussion in this video Exploring the finished Anaximander theme, part of WordPress: Building Responsive Themes.
- View Offline
Before we get started, let me quickly explain how this course is going to work. The idea of this course is to give you the tools and understanding necessary to build your own custom responsive themes or to take existing themes and make them responsive. To make this process easier, I've created a custom theme just for you that you can use as you follow along with this course. The theme start off as a regular static theme and as you progress, you'll incorporate responsive features that in the end will make it fully responsive.
All the techniques taught in this course are universal, but you may have to change them a bit to fit different themes. The cool thing about this course is that when you're done, you'll have a fully responsive and quite advanced theme you can use for your own web site. I designed and built a theme with this in mind so that you didn't have to start over with your old theme when you're done, unless you want to, that is. Let's take a look at this new theme called Anaximander and see what it does once you're finished with the course. The theme comes with lots of built-in functionality.
From the top, this themes has optional social icons, if you want to link your theme to Twitter or Facebook, along with a search box. Then we have a custom header with a custom menu that's hooked into the WordPress menu system that has nice dropdowns. The header is responsive, and you can also add an optional header image if you want to. In the course, I'll show you how to add a featured content slider, like the one you see here. We'll also incorporate what's called the Masonry-type layouts. It start to type of layout you see here on the front page, where all the content stacks next one another. And if we resize the window, you'll see the content reorganize to fit the screen.
And if we go into a single post, you'll see we have a responsive layout again that responds to the size of the screen and fits all screens, and we also have advanced features like the display of related posts under each individual single post, and footer widgets. In developing this course, I wanted to give you a reward at the end, which is why I built the Anaximander theme. Once you've completed this course, you'll have an advanced responsive WordPress theme you can use for your own web site if you like, and this theme is only available right here on lynda.com.
- What is responsive design?
- Installing the Anaximander example theme
- Deciding what screen sizes to target
- Designing menus
- Adding responsive images and video
- Using CSS media queries to apply different styles
- Handling sidebars on mobile displays
- Dealing with footer widgets
- Installing jQuery Masonry