A super detailed journey through the redesign process of an entire website. This very website, in fact.
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>…
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 …
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 …
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 …
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. …
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 …
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 …
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 …
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 …
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 …
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 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 …
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 …
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 …
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 …
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 …
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, …
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 …
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. …
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 …
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 …
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 …
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 …
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 …
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 …
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 …
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 …
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 …
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 …
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 …
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 …
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 …
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 …
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 …
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 …
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 …
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 …
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 …
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 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 …
