#81: Moving the Header to WordPress

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> and getting the right resources loading.

We split our screen into two halves, the static mockup project open in Sublime …

Play

#82: Building the WordPress Homepage, Part 1

The great move into WordPress is underway! We finish up the header.php file and move into index.php. index.php is in charge of our homepage. The first line of that file is a PHP function get_header() which essentially just gets the header.php file in plops it in there, which is why we started there.

We stay in our split screen layout …

Play

#83: Building the WordPress Homepage, Part 2

We continue porting code over from our static mockup to our WordPress index.php page. We tweak "the loop" a bit to output just what we want.

We get down far enough on the page where WordPress functions like get_sidebar() show up. Predictably, it behaves a lot like get_header() works. It goes and gets the sidebar.php file and plops it's content …

Play

#84: Moving Footer into WordPress

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 for this site? If it's for the specific theme, the image belongs in the theme folder somewhere. If it would …

Play

#85: Blog Post View (single.php) in WordPress

If we had to pick, the view for a single blog post is probably the most important template on the site. We have a static mockup of a blog post page, so we work on moving it over into WordPress.

The grid is slightly different. It uses our super easy grid structure and classes, only instead of the 1/2, 1/4, …

Play

#86: Photoshopping the Gallery

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 it very much and have a slew of content to get posted to it over time.

We start out by …

Play

#87: Gallery Grid-izing

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 functions.php file that sets up the custom post type that "Screenshots" are built from on this site. It's a little …

Play

#88: Building the Gallery Bar

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 all the while needs to be responsive.

This is start of what we refer to as "black bar" navigation which …

Play

#89: Tweaking the Gallery Bar

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 better. We style the dropdown so the menu that is revealed looks a bit nicer. While adjusting that, we make …

Play

#90: Setting Up Individual Pages in the Gallery

Every screenshot (or video) in the gallery has it's own individual page. You get to them easily, just by clicking the image itself. We want to make this page as compelling to visit as possible. We'll work on that in some upcoming videos, but for now let's make sure the individual pages at working in WordPress and using as much …

Play

#91: Photoshopping Individual Gallery Pages

In this screencast we spend a bit of time thinking about what an individual Gallery screenshot page will look like. There is a bit of data that we already know we have. We have a title. We have a description. We have a set of tags that have been applied to it (it's custom taxonomy). We also have some custom …

Play

#92: Building the Individual Gallery Pages

We have a bit of a Photoshop mockup to work from here as we continue building the template for the individual gallery page.

First up, we styled the Next and Previous links. They are in absolutely positioned box in the gallery bar, so that we could center them on the page despite the other buttons and stuff already in the …

Play

#93: An Attempt at Smooth Loading Gallery Pages

We spent all this time in our static mockup making some clever JavaScript that would "smooth load" the images in the Gallery. Now that we have the real Gallery going with real images, that is gone.

Essentially, we need to get our image wrappers having a padding-top of the aspect ratio of the image. That was easy in the static …

Play

#94: Google Custom Search Setup

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 Custom Search Engines to search the content. WordPress has built in search, but it's not very good. It just matches …

Play

#95: JavaScript for Multiple Google Custom Search Engines

All of our Google Custom Search Engines are set up (we set up a different one for each section of the site). Our UI for search is ready to go. We have templates for each search results subpage ready to go. We just have one final step to get everything tied together: make the little "Search in: " links work. …

Play

#96: Templates for Search Results

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 generic. It's a template that I use on lots of WordPress sites. It's just like "page.php" - the "Default" template …

Play

#97: Photoshopping the Almanac

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, which is kinda-sorta OK but doesn't serve the content super well. As a quick aside, we see that the rollovers …

Play

#98: Building the Almanac, Part 1

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 our static mockup, so we start with that. That's always a great place to start because we do all that …

Play

#99: Building the Almanac, Part 2

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. One of our calls to it worked, the other didn't. We tried all kinds of stuff to get it to …

Play

#100: Almanac Styling, Part 1

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 through some fonts on Dafont, and end up downloading Shadows Into Light. The download comes with the font in …

Play

#101: Almanac Styling, Part 2

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 forward was to style up the two-page spread a little bit. We walk through those changes in the beginning.

The …

Play

#102: Almanac Styling, Part 3

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 we've looked at the top most levels and bottom most levels but haven't done anything in the middle. We spend …

Play

#103: Photoshopping Snippets Area

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 hearing from people in real life that they find a lot of useful stuff in this area.

In v9, a …

Play

#104: Building Snippets Area, Part 1 (HTML & CSS)

We now have a Photoshop design to work from for the homepage of the Snippets area. It's a lot more browse-able than it was before, but keeps the rainbow spirit that it had before. Now we can jump into actually building it in our WordPress templates. Writing all the HTML and PHP and CSS and YOU KNOW THE DRILL!

Step …

Play

#105: Building Snippets Area, Part 2 (HTML & CSS)

We have all the content we need on this page output and we have the header in place. Now we can start CSSin' the content into the design we have going in Photoshop.

One thing we did was make the list of seven categories static. It's just one less wp_list_pages() call and thus a bit more efficient. If we ever …

Play

#106: Building Snippets Area, Part 3 (HTML & CSS)

We're pretty close to being done building the homepage of the Snippets area of the site. Right away, we start tweaking things and getting more stuff into shape.

We have a weird experience where the absolutely positioned pseudo element didn't respond to a negative left margin but was fine with a positive right margin. Who knew.

Then we move into …

Play

#107: Building Snippets Area, Part 4 (JavaScript)

With the design for the snippets area "done" - we can now move into some interactivity (read: JavaScript).

We add a super lame rollover for the links on the left just so we have something, but we know we'll change that later. Then we set about actually writing some JavaScript. Upon visiting the page for the first time, the first …

Play

#108: Building Individual Snippets Page

We start about by looking at some of the grunt work I did behind the scenes fleshing out some things that needed to be done. Like adding in the rest of the wp_list_pages() calls to output the rest of the list of snippets for each category. And also adding in the CSS to change the color of the bar separating …

Play

#109: Preparing for Working on Comments

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 those great discussions happening, and facilitate all the functionality of a WordPress-based discussion thread.

The first step here is preparing …

Play

#110: Photoshopping Comment Thread

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 for sure, as that's tailor made for this and integrated perfectly into WordPress. Beyond that, I'm a big fan of …

Play

#111: Building Comment Thread

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 to jump into WordPress and make this comment thread a reality. The first thing we do is find a template …

Play

#112: Building Comments Thread Wrapup

Right at the end of the last screencast we figured out that our Photoshop design, as simple as it is, has a problem that is going to be too hard to overcome with code. Reply comments live within the same list item element as the original comments. That makes it hard to accomplish the design where the original comment box …

Play

#113: Photoshopping Comment Form

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 thread, way at the bottom of the page. Although, it can jump up higher in the thread if a user …

Play

#114: Building Comment Form

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 each of the three inputs (name, email, url) using the grid system we have in place. Boy we've gotten good …

Play

#115: Setting up Google AdSense

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 users can't take it anymore, we try and balance being tasteful and the need for the site to generate an …

Play

#116: Custom Header for Demos

The last remaining headers have come in! We can now finish those up and have all our custom headers done. In this screencast we'll work on the custom headers for the Demo section done by John Neiner.

Interestingly, John was the only illustrator who provided the artwork in Illustrator. That's nice for us in this case because we can …

Play

#117: Custom Header for Deals

After the weird confusion in the last video about which header we were actually doing, this time we really are going to be implementing the custom header for the Deals page! This one was done by Meg Hunt.

Like all the headers, we spent some time looking at the original files and figuring out how it's going to best …

Play

#118: Viewing Live Site with Theme Switcher Plugin

In this screencast we add a new plugin to the site that gives us the ability to switch the themes on the live site, but only so that we (as admins) can see it, not regular visitors.

Before we add it, we look at the status of our project in Tower. We have a number of files to commit that …

Play

#119: Custom Header for Videos

I think I said in a previous video that we had finished up all the headers. Just kidding! There is one left! This one is for the Videos area and was done by Alyssa Nassner. We've gotten it going in the static template we just need to move it over to WordPress land.

I also think for the last …

Play

#120: Choosing a Membership Plugin for WordPress

In this screencast we start talking about how we are going to build the membership area of CSS-Tricks. Part of the Kickstarter that made this whole thing possible was the promise that Kickstarter backers would get access to a private members-only area where they would watch videos like the one on this very page.

It's kind of a funny moment …

Play

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag