#81 Moving the Header to WordPress

Running Time: 13:01

It’s time to actually get into moving our design into WordPress. Might as well start top-down and start with the header. Other than just being a logical place to start, it means we’ll be looking at things like the <head>

Watch the Screencast

#84 Moving Footer into WordPress

Running Time: 6:06

We start out by fixing up some image file paths. I always make a distinction when using images inside a WordPress theme. Is this image part of this specific theme? Or would it make sense to use in any theme

Watch the Screencast

#86 Photoshopping the Gallery

Running Time: 16:19

I was excited to get started on the Gallery area on the site. It’s one of the areas that was particularly bad in v9. It doesn’t get a ton of traffic, but maybe we can turn that around. I enjoy …

Watch the Screencast

#87 Gallery Grid-izing

Running Time: 11:21

We have the gallery area set up in WordPress it’s spitting out what we need it to spit out, but there is almost no styling at all on the page yet.

We start by going over the code in the …

Watch the Screencast

#88 Building the Gallery Bar

Running Time: 15:52

We set about building the bar below the gallery header. This bar has quite a job. It tells people where they are and what they are viewing (breadcrumbs, in a simple way). It also will contain pagination, a button, and …

Watch the Screencast

#89 Tweaking the Gallery Bar

Running Time:

In this video we make a bunch of tweaks to the bar we have set up with most of the functionality of the Gallery. Design is all about tweaking, isn’t it?

We adjust some padding to make things line up …

Watch the Screencast

#94 Google Custom Search Setup

Running Time: 18:07

The search area in the header “works” in that it’s designed and you can click it open and closed and all that. But it doesn’t actually do any searching yet. That’s pretty important eh?

On this site we use Google

Watch the Screencast

#96 Templates for Search Results

Running Time: 28:40

Search works! It’s just the template that you land on isn’t quite right. We need to tweak up the template so it looks right and matches the style of the site.

The template that search uses at the start pretty …

Watch the Screencast

#97 Photoshopping the Almanac

Running Time: 14:43

The Almanac was a thing launched in v9 and never quite got done. It’s getting closer though and closer every day. So in v10 we’ll design around the assumption that it is “done.”

We look at the existing v9 design, …

Watch the Screencast

#98 Building the Almanac, Part 1

Running Time: 28:14

This is an extra special EMPIRE STRIKES BACK themed episode of the v10 redesign series!

Everything starts out just fine. We start moving some things over to our WordPress template from our static mockup. We have the header working in …

Watch the Screencast

#99 Building the Almanac, Part 2

Running Time: 3:19

This is an extra special RETURN OF THE JEDI themed episode of the v10 redesign series!

We left the last screencast utterly defeated. We were trying to use wp_list_pages() to output some navigation for the homepage of our Almanac section. …

Watch the Screencast

#100 Almanac Styling, Part 1

Running Time: 13:27

Now that we’ve battled through getting the proper content on the homepage of the Almanac, we can dig into some actual styling with CSS.

We decided to go with a handwriting font for some bits of this design. We browse …

Watch the Screencast

#101 Almanac Styling, Part 2

Running Time: 16:50

We jump forward just a teensy bit here. This is a pretty comprehensive screencast series, but it’s only 40 hours or so and of course this actual project is actually more like a few hundred. In this case the jump …

Watch the Screencast

#102 Almanac Styling, Part 3

Running Time: 10:26

In this screencast we wrap up the Almanac section. There is a pretty clear hierarchy in the Almanac. It goes:

Home Almanac Home Property or Selector Letter Page

Every one of those steps have a view to themselves. So far …

Watch the Screencast

#103 Photoshopping Snippets Area

Running Time: 12:26

Time to dive into the Snippets area! That is, the actual content area of it. We already have the header in place. The snippets area is pretty popular. Without diving deep into analytics, I know from watching social media and …

Watch the Screencast

#109 Preparing for Working on Comments

Running Time: 12:45

I’m very excited to work on the comments section for this site. CSS-Tricks is home to some excellent discussions, thanks to all you fine folks. Designing the comments section is important because it needs to showcase those great discussions, keep …

Watch the Screencast

#110 Photoshopping Comment Thread

Running Time: 15:18

We start digging into Photoshop here and designing the comments area. We start at the top, meaning the individual comments themselves (as opposed to the comment form).

We snag an avatar to work with. We’ll be using the Gravatar service …

Watch the Screencast

#111 Building Comment Thread

Running Time: 37:38

The design for comments might look very simple. And it is! But I think simple is effective in this case. Comments are such an important part of CSS-Tricks I want them to be very readable and comfortable.

Now we’re going …

Watch the Screencast

#113 Photoshopping Comment Form

Running Time: 7:08

In this screencast we jump back into Photoshop and design the comment form itself. As in, the inputs and textarea users need to fill out to leave a comment. This is placed by default at the end of the comment …

Watch the Screencast

#114 Building Comment Form

Running Time: 22:53

In this screencast we’re going to get into building the comment form in HTML/CSS. The markup for the comment form lives in the comments.php file in our theme. We look for the <form> element to find it.

We lay out …

Watch the Screencast

#115 Setting up Google AdSense

Running Time: 13:34

We’re going to be adding in a new advertising zone on the site powered by Google AdSense. We did remove a BuySellAds zone a bit ago, so it’s not like we’re just trying to dump on new ads until the …

Watch the Screencast