#001 – Intro to the Series

Hello everyone! Welcome to the complete series on building a mobile first artist website with WordPress. This is slightly different than the last series where we recorded as we built. In this course, the "final" website is already built: JeffCampana.com. We'll still walk through every step of the building process, it will just happen a bit quicker and with …


#002 – A Look at the Old Site

In this screencast we take a look at Jeff's existing website. This series isn't so much "redesign" focused as the v10 series was, but there is an existing website here and we will be using some existing content from it. Even if we weren't, we should be well acquainted with what came before in order to move forward.

There is …


#003 – Initial Client Communication

In this screencast I talk about what the communication was like between me and Jeff when he first emailed me about wanting to redesign the site.

The overall vibe from Jeff was "It's time." It's time to redesign the site. There doesn't always have to have fancy business reasons for everything, that natural feeling o wanting to redesign is fine. …


#004 – A Photoshop Canvas

From the last video, we know we have five major points to consider when starting into the design of this site. We'll keep those at the top of our mind as we move forward.

We're starting "mobile first" of course, and we're going to start figuring out the design in Photoshop. We won't linger there, but the creative tools in …


#005 – Photoshopping Mobile, Part 1

We start out with our Photoshop file open. The rather silly looking "elongated" iPhone screenshot, which simply just gives us a canvas in the mobile first context.

We start out as simple as can be: with Jeff's name. We need to pick a font straight away. This kind of thing can be very difficult. We have a legacy font to …


#006 – Photoshopping Mobile, Part 2

We have the "header" of the design in place, we just need to figure out the rest of the page. We have a list of the most important goals we're trying to accomplish, so that will help us guide us. Essentially a set of links ("main navigation") will serve us well.

For instance, we need to showcase Jeff's writing. A …


#007 – Setting Up the Local Development Environment

We want to be working locally while working on this project. Just a few reasons:

  • It's fast.
  • We can work offline from anywhere.
  • We're working on a complete redesign that will take many days, we can't leave a live site half-cocked.
  • There is no risk working locally.
  • We can use version control, giving us a record of what changed when


#008 – Giving Ourselves a Fresh Start with a Clean Theme, Part 1

We're going to stop looking at the old site here soon. This is the last time! Our plan now that we have a proper local dev environment is to give ourselves a completely fresh start. We want to strip the WordPress theme down to bare bones nothing and build up from there.

We start by duplicating the theme, calling the …


#009 – Giving Ourselves a Fresh Start with a Clean Theme, Part 2

We in the midst of stripping down our WordPress theme to about as bare-bones as we can get it. We're not worried about the design we're trying to get to, we're concerned about stripping away the old and giving us the cleanest most data-only theme we can get to start with.…


#010 – CodeKit For Great Success

In this screencast we have CodeKit start watching our project. This makes lots of developer tasks much easier.

The first thing we do is us it to losslessly optimize an image. Easy one click.

Then we install Compass in the project. This gives us the ability to use CSS3 mixins provided by Compass, instead of having to create our own, …


#011 – The Header & Custom Fonts via TypeKit

We've picked out Proxima Nova as the main font to be used for Jeff's site. It's darn popular these days, but it looks great with Jeff's work. Simple, clean lines, doesn't force too much personality. We use Typekit so that we can use it on the web. We go through the process of adding the scripts and CSS and stuff …


#012 – Slider Foundations

We decide to go with the RoyalSlider for the slider on the homepage. I've long been a fan of the AnythingSlider, because I was part of it's creation and I think it's very powerful. However, I think it's a bit long in the tooth these days not supporting touch events or fluid width environments very well. The RoyalSlider is …


#013 – Tweaking the Slider

The slider is implemented and works, it just doesn't look like how we have designed it. We go through the process of stripping away HTML and CSS that we don't need. We also look at the settings for the RoyalSlider to turn off some things that we don't need.

We look at how you can remove certain files from showing …


#014 – Positioning the Slider

The slider works! But it's not placed quite exactly as we have designed in our Photoshop file. We need more room below it to expose more of the main navigation.

In this screencast we dig into the CSS that comes with the slider and clean house! Some of the sizing and positioning we also do in the JavaScript in the …


#015 – Home Page Navigation, Part 1

We have a plan for the home page navigation, we just need to get it done in code. Home page navigation, I say specifically, because this is likely only going to be used on the homepage. It would be a bit much to use on every internal page, the way it's designed now. Point being, we can put this into …


#016 – Home Navigation, Part 2

We have a good start on the homepage navigation, but there is some styling stuff that still needs to get done. We start by completing the content itself, adding a few more nav links for a total of five. Then we alter the fonts and colors of the elements we used to match our Photoshop design.

This was the first …


#017 – Home Navigation, Part 3

We're almost done with the homepage navigation, but there is some weird space below our slider and above the navigation itself. We dig into finding out why.

For those of you who like to watch exact solutions, this isn't for you. We struggle with figuring it for quite a while, showing off troubleshooting steps along the way. We ultimately figure …


#018 – Footer

This will be about the simplest footer ever on a site. It will be a copyright symbol with Jeff's name (It's always nice, I think, to have the name of the site in the footer in plain text for easy copy-and-paste) and social media links. The year will auto update so it never looks out of date.

<footer class="site-footer"> &copy;<?php


#019 – The Blog, Part 1

We start to work on the blog area of the site. We want to have the blog area of the site at /blog/ - so we end up making a page template for that called page-blog.php and using the Settings Reading setting to make that page the blog homepage. This way we have very specific control over that page and …


#020 – The Blog, Part 2

The blog is outputting what we want it to, but the typography and layout of it isn't quite there. We add a bit of markup here and there as needed to give us better semantics and elements used just for styling reasons. For instance, our .page-wrap is a div because it doesn't impart any semantic value, it's just to push …


#021 – The Blog, Part 3

The typography still isn't quite right, so we spend a little more time making adjustments to it. This is worthwhile doing here, because header and body copy typography will server just about everywhere on the site well.…


#022 – Blog Archives

There is only one way to get to the blog area of the site from the homepage, and that's by clicking the "Lastest Writing". But that takes you to the most recent blog post. We'll also need a way to get to older blog posts. Jeff doesn't write super duper often, so outputting a list of every single blog post …


#023 – Page Template

In pretty much all WordPress themes there is a filed called page.php. This is the template that controls "Pages" - one of the default type of content that all WordPress sites have. Pages differ from Posts in that they don't go to the RSS feed, they don't use the permalink URL structure you choose for Posts, and they are able …


#024 – Subpage Navigation

The homepage navigation is meeting our needs well, but having that huge chunk of navigation on every page of the site isn't practical. We'll need something more understated for the sub pages of the site.

In this screencast we create that subpage navigation, just a row of links we can place underneath the header. The only big consideration is how …


#025 – Super CMS, The Plugins

We can really extend the "CMS" abilities of WordPress with just a couple of plugins: Advanced Custom Fields and Custom Post Types UI.

With these installed, we can create brand new content types that make more sense for the sites we work on. No sense being stuck with "Posts" and "Pages". On Jeff's site, we could really use "Events" …


#026 – Super CMS, Plugin Setup

With our two workhorse CMS-extending plugins installed, we spend a bit of time setting them up.

"Events" on Jeff's site is a perfect example. An "Event" should have a title and description, so those default fields are fine, but it also has a bunch of other data that make way more sense as structured fields than as just text data …


#027 – Admin Control of Homepage Slides

We have another post type that needs the proper custom fields applied: the homepage slides. This is the kind of thing that would be easy and tempting to hard-code into the template, but we're going to go the extra mile here and allow Jeff to control everything about the homepage slider. Post new photos of work as a new slide. …


#028 – Events, Admin and UI

We learned how to do a custom loop and output custom data from our custom post types and custom fields in the last video. This time we need to do it again, only for the slightly more complex Events section. We'll need a custom page template just for the events area so we have a place we can write all …


#029 – Events Wrapup

I thought we could scoot by Events which what we talked about in the last video, but as I fleshed out the Events area enough code had to be written I thought it was worth a wrap-up video.

In some cases, we have to check for the presence of a custom field before outputting it. Namely if the field isn't …


#030 – The Contact Form

One of the five major areas of the site is the contact page. It barely requires any covering at all though, because we simple built it in Wufoo and embedded the code for it as a page and published it.

Worth noting is that Wufoo integrates with MailChimp, which Jeff uses to send a newsletter to people interested in keeping …


#031 – Limiting the Slider Height for Desktop

When the browser window gets larger, the slider at the top of the homepage gets ridiculously big. This is a mobile first series, but since the mobile version of the slider is already working well (perhaps we should load smaller images, but functionally it's cool) we can focus on making it better for desktop now.

With some simple CSS, we …


#032 – Moving the Home Nav, Media Queries

We working on fixing up the site so that on "desktop" (i.e. larger) screens the site still looks good. The homepage navigation is another thing that gets a littler ridiculously large on desktop. So instead of doing that, we shift it over to the right side exposing a space on the left.

We take the opportunity to talk about media …


#033 – Media Queries in JavaScript

As we were desktop-izing the site, we moved the homepage navigation over to the right side of the page to open up a hole on the left side for more content. We'd like to add this content only when the screen is large enough. Not just load it all the time and hide it on mobile. That wouldn't be very …


#034 – Ajaxing in a Blog Post

We end up with a really simple test which loads in an article from the blog to display if there is room:

// Load additional content if enough room enquire .register("(min-width: 700px)", { match: function() { $("#home-article").load("/blog/ #main-article"); } }) .listen();

jQuery makes Ajax super easy, and even easier with the .load() function. The only little trick here is where …


#035 – Desktop Hover States

Just because this is a mobile-first series doesn't mean we can ignore the interactions of desktop/laptop computers. We spend a bit of time making sure there are :hover/:focus/:active states for "clickable" things like links. We use the Sass ability to darken/lighten colors to make altering the colors on these states very easy.

It's this easy:

a { color: $linkColor; &:hover,


#036 – Large Screen Single Blog Page

On larger screens, we have more room on all our pages. We've dealt with this on the homepage, but we can do better on the other subpages as well. A single blog post page is an important one.

By default, we output a list of all older blog posts below the current article. On mobile we show that below the …


#037 – Color Manipulation

Back when we were messing with giving CMS abilities to the homepage slider, we gave a custom field to each homepage slide a color picker. That gives us access to that color wherever we need it. In the template, we'll wrap each slide in a <div> with a data-* attribute where we plunk that color value courtesy of Advanced Custom …


#038 – Comments Cleanup

WordPress powers the comment area of Jeff's site. This will be super easy to clean up with our CSS superpowers. We make a .scss file just for comments (the perfect example of where a Sass partial is appropriate). We include that in the global stylesheet. Then we tweak up the look of the comments by giving them space, adjusting the …


#039 – Cross Device Testing

For the most part so far, we've used the iOS simulator to test the mobile version of our site. That's pretty good, a lot better than testing a narrow browser window, but it is also not nearly comprehensive.

We use BrowserStack to test the site on some other devices, through their official simulators. Everything was looking good on the Samsung …


#040 – Series Wrapup

It's time to bring this series to a close. It's been a fun ride!

There are some difference between what we covered and what is actually on JeffCampana.com. As is usually the case, some stuff ended up nicer the first time I did it, and some stuff ended up nicer the second time. I'll try to put the "best …