WordPress 3: Creating and Editing Custom Themes
Illustration by John Hersey

Finishing the home page


WordPress 3: Creating and Editing Custom Themes

with Chris Coyier

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Video: Finishing the home page

The structure of our site is coming right along in Photoshop. So let's keep going, designing the content for the Home page. We still have this little kind of letterhead thing going on though. I'm kind of picturing the ability of maybe just having some intro text for Widget Corp. Now I know we have an About page and maybe that will be about the company. Maybe this will work, maybe it won't. We are still exploring a bit here. I could see some intro text working explaining what Widget Corp is. Now we need some Lorem Ipsum text, so one of my favorite resources for that is just to hop out to the web and go to html-ipsum.com, which I can just copy and paste some Lorem Ipsum text.
Expand all | Collapse all
  1. 6m 44s
    1. Welcome
      1m 19s
    2. Using the exercise files
      5m 25s
  2. 40m 42s
    1. Reviewing the client spec and deciding on WordPress
      6m 50s
    2. Reviewing assets and resources and creating a mood board
      8m 41s
    3. Building a home page mockup
      11m 26s
    4. Finishing the home page
      12m 27s
    5. Planning the rest of the site
      1m 18s
  3. 1h 8m
    1. Starting with a base project
      3m 6s
    2. Writing HTML code for the home page
      12m 6s
    3. Starting the CSS: Creating the header and basic style structure
      11m 28s
    4. Styling the Navigation panel
      10m 59s
    5. Styling the sidebar
      7m 55s
    6. Styling the home page, pt. 1
      8m 20s
    7. Styling the home page, pt. 2
      8m 17s
    8. Finishing the CSS
      3m 14s
    9. Moving on: One page is enough
      2m 43s
  4. 1h 56m
    1. Setting up WordPress and MAMP on a Mac
      6m 7s
    2. Setting up WordPress and WAMP on a Windows computer
      5m 38s
    3. Modifying important settings
      6m 26s
    4. Starting with a blank theme template
      4m 35s
    5. Introducing template file structure
      4m 55s
    6. Breaking up the HTML
      9m 53s
    7. Building the sidebar
      3m 54s
    8. Building the navigation
      7m 20s
    9. Showing one recent post
      4m 1s
    10. Fetching external content
      8m 23s
    11. Creating a custom home page
      3m 30s
    12. Introducing custom fields
      5m 23s
    13. Creating custom product pages
      9m 52s
    14. Creating custom category pages
      15m 39s
    15. Creating the blog home page
      5m 39s
    16. Creating a single blog entry page
      4m 15s
    17. Implementing comments
      5m 57s
    18. Finishing the home page
      4m 45s
  5. 34m 17s
    1. Will this work with WordPress?
      3m 10s
    2. Using JavaScript in themes the right way
      8m 35s
    3. Implementing something fun with JavaScript
      7m 53s
    4. Introducing plug-ins
      6m 31s
    5. Setting up security
      8m 8s
  6. 2m 7s
    1. Goodbye
      2m 7s

please wait ...
Watch the Online Video Course WordPress 3: Creating and Editing Custom Themes
4h 28m Intermediate Nov 03, 2010

Viewers: in countries Watching now:

In WordPress 3: Creating and Editing Custom Themes, author Chris Coyier shows how to build a custom WordPress theme from scratch and satisfy common client requests. The course covers steps necessary to build a theme using a complete workflow with Photoshop, HTML, CSS, and WordPress 3.0. Also included are tutorials on enhancing a WordPress site with JavaScript, using plugins, and ensuring site security. Exercise files accompany the course.

Topics include:
  • Building a design in Photoshop
  • Converting Photoshop design to HTML and CSS
  • Setting up MAMP on Mac and WAMP on Windows
  • Moving HTML and CSS into a WordPress theme
  • Building navigation
  • Using custom fields
  • Creating a commenting system
  • Using JavaScript and plugins
Developer Web
Chris Coyier

Finishing the home page

The structure of our site is coming right along in Photoshop. So let's keep going, designing the content for the Home page. We still have this little kind of letterhead thing going on though. I'm kind of picturing the ability of maybe just having some intro text for Widget Corp. Now I know we have an About page and maybe that will be about the company. Maybe this will work, maybe it won't. We are still exploring a bit here. I could see some intro text working explaining what Widget Corp is. Now we need some Lorem Ipsum text, so one of my favorite resources for that is just to hop out to the web and go to html-ipsum.com, which I can just copy and paste some Lorem Ipsum text.

I'll close that and just paste it in there. You can't see it because it's white, so let me select all here. Open the Character palette, change the color to-- maybe I will sample the same gray that was happening up here. Get non-italic, pull in the line height a bit, maybe make it a bit smaller. Some intro text to kind of drive home that letterhead look we have going on. What else can we do here? Now they definitely want to feature their widgets, so I want to have something going on the homepage to do that.

We'll grab our Rectangle tool as a divider. Let me pick one of the colors we already have going on here. Make sure our color palette is kind of reined in. We don't want to pick a hundred different colors on here. Keeping it simple is nice. So one of their widgets is, if we go out to these asset files they provided us with some project images. One of them is the Super Sprocket, so we'll just say Super Sprocket.

I've managed to make this text layer now beneath this layer, so we can see that here in the hierarchy of the Layers palette. Let me pull that above and spell it correctly, and maybe make it white so you can see it good, and larger. I am going to click on the T here and just drag. That's how you can adjust font sizes in Photoshop easily. We are going to need that picture for sure. So while we are out in the Assets, let me grab the-- maybe just the regular version of that. I'll drag it on the Photoshop to open it and just drag it over.

All right, that looks good. Maybe it can break into this a bit, maybe above it, sure. And maybe we'll have some information about the sprocket. I'll duplicate this paragraph going on up here and I'll do that by dragging it down onto this page icon, so I have two copies of it. They are going to be sitting right on top of each other, but hat's okay. I can drag the second one down here. And let me grab the Hand tool and move the page so you can see it better.

Double-click that and drag the handles of this text box in a bit, nudge. So that's cool. We might need a way to get to the Super Sprocket. Maybe you click the Sprocket itself, maybe you click the title, but maybe those aren't obvious enough. So let's get a button in there, kind of trying to line it up with the bottom, and we'll make it white for now because we are going to put a gradient over the top of it. Gradients are nice for buttons. They like give it some three dimensionality.

I double-clicked on this shape that we just made. I'll open the Layer Style palette. Say Gradient Overlay and I'll drag it all the way so we can see our button as we work with the colors. Click this bottom color here and pick a blue. Maybe I'll start with this blue, make it a bit darker, and then I will click the other white color, start with that color and make it a bit lighter. So we are working with this in the same color palette, just giving it some three dimensionality. Well I closed that Layer Style palette. I am going to open it back up again.

Let me give it a white stroke on the inside and then maybe give it a bit of a drop shadow, really emphasize that three dimensionality of it. So we want that button to be view product. An action item. I am going to make a new text layer called view product and stick it on top there. It's a little big, so I'll make it a bit smaller, all caps. That works.

We could move all the stuff up here but I am kind of thinking in this area up here, since it's the homepage and we are going to have an Our Widgets page that's just for viewing widgets and stuff, maybe we could have something like, I don't know, a quote from a customer or something like that. Let me grab block so we can kind of have a quote style, grab one of these colors that already exists, and write some quote in there. That's like... Grab this Text tool, click so I can get some text going, just anywhere, and I will move it into place in a minute.

"We are able to do the job we do because of these widgets," and I will drag it in here so you can see it. Maybe we should bring that Helvetica back. Make it nice and thin, italic. Hmmm, maybe we can split it into three lines.

Make it larger and that looks pretty cool. Space it out a bit, center it in there, just by dragging things around. That's kind of neat. Maybe we can bring in some more of that mail stuff that we are looking at, those scans of postal marks. I am going to open up that again. Maybe this dude here, pointing in. Let me zoom in on so we can see it good. It seems like a cool way to emphasize a quote, have a big finger pointing at it.

I am going to grab the Lasso tool and cut it out. Yeah, cut out this Return To Sender while we were at it. Just get the hand all by itself. Drag that over. Now it's too big, so I can resize it. Notice it also has the white on the back of it. If I set this layer, instead of at layer style Normal to a blending mode of Multiply, anything that's white will just go away, because white doesn't have anything to multiply. It doesn't have any value.

So just to keep somewhat organized over here, I will call it Hand. Resize it. Let me bring it in here, and maybe tone it back by adjusting the Opacity a little bit. Now it's sticking out, so we'll use that same technique we used for the postmark up here. I'll click on this Content area, then we'll go find the Hand and give it a mask. So we'll cut off those rough edges.

So that's pretty neat. Now just a few more things we want to do here. We have this sidebar and all we have here is navigation. So what else could we do with the sidebar? Well, we could do-- Their blog was a big deal, and they really wanted to blog. So I think maybe showing their most recent blog post, instead of just simply a link would be kind of neat. So maybe let's show just a small part or it, not their whole blog post, but just a small part of it. So let's make kind of a box over here where we plan to do that. If I just make a white box and I give it some drop shadow, I have been using a little drop shadow so I am not afraid of that. No distance, just a little bit of drop shadow here.

Now right against the edge that looks a little weird. I am going to hide these blue lines by pressing Command+Semicolon to get rid of them, so we can see what's going on there. Having a drop shadow around the whole thing looks a little too strong to me, so maybe we'll just emphasize just the corner of it. I am going to go ahead and put a layer mask on it by clicking the layer that we have just created in this little circle in the square here, so we have a layer mask to work with. Now I will click down the Gradient tool and make sure that it's a Linear Gradient, I am looking in this bar up here, and I am going to put it on mode Multiply and make sure that it's on the white to black.

Now a layer mask anywhere that is black is going to hide what's showing here and anything that's white is going to show. So I am not drawing, like literally drawing on what you can see. I am hiding. Anywhere that's black is going to hide in this particular layer. I am going to hit Shift and drag over here and you are going to see that it's going to hide a bit of this. What's going on there is that Drop Shadow is showing through here. Let me double-click this layer. On under Blending Options here, I am going to say Layer Mask Hides Effects.

So if I click that, that inner weird drop shadow is going to go away. Now we didn't quite accomplish what we want to. Let me set this back to Normal, and I am going to select the layer mask here and delete everything out of it. So it's all black. It's hiding everything. We want to show bits of it though. So I am just dragging the wrong direction. As I drag other direction, you can see it hides different parts of this. That's what working with the layer mask is all about. We can I am sure find a cool portion of this. I mean really any one of these looks kind of neat, but I want to try to show this upper right corner.

So let's get that going on. Then I am going to set it on Multiply, so that the next time we drag, it's going to duplicate-- wrong direction, I am going to drag down. So now we have just the corner showing, and I think that's a neat way to block off a bit of content here. So we could have any number of them. I will duplicate this entire thing, drag it down, and now we have another blocked off area. So that's kind of neat. We can fill up these areas with content. Maybe I'll put a bar in here.

Pick one of these colors that's already going on. The blog is probably appropriate in this case because, I am going to turn off drop shadow, because we were displaying the last blog post. So having these colors tie in is important. And I'll make it be the date. I will say like March 16th or something, and drag it right onto that bar, maybe I'll make it real small, and letters spaced out a bit.

That's what this is about. And that's going to display the title of the blog post. So Latest Blog Post. Make sure that color is some kind of readable color, and not all caps but maybe we'll go Italic with this, and we'll bring that letter spacing back to zero, and make it bigger, because it's the title. And then some of this Lorem Ipsum, because it's going to be the first few sentences of whatever they wrote for their blog post.

So let me Command+Click on this, which is going to hop us to this layer really quickly. I am going to duplicate it, drag it over here just to represent some content for what their latest blog post will be, just make it smaller, create the handles. So that works. Now we have a little bit more area, maybe we'll show another sprocket down here. Maybe we'll show some content from other blog posts over here, later blog posts or blog posts from another site even, but this looks like a pretty strong start for what's going to be the homepage of our site.

So let's make sure to save our work so far. Go up to the File menu and click Save and we'll call it Homepage Design. In fact we probably should have saved it long before this. Save early, save often is a good idea. So now we have a really strong mockup to work from as we start building out our theme.

Find answers to the most frequently asked questions about WordPress 3: Creating and Editing Custom Themes .

Expand all | Collapse all
please wait ...
Q: What prerequisite skill do I need to be successful in this course?
A: This course is set at the intermediate/advanced level. You’ll do best if you have a good knowledge of Photoshop, plus a good grasp of PHPHTML, and CSS.

Q: The index.php file that the author is working with in Chapter 3 doesn't match mine after the "Building a sidebar" movie. It appears to change between the "Building a sidebar" and "Building the navigation" movies. What code am I missing?
A: The author makes some changes off screen between several movies in this title, simply because there is so much material to cover. These changes are provided in the exercise files.

However, if you are following along without the exercise files, you catch up to him by adding the following code to your index.php file, directly after the <?php get_header(); ?> line:

<div id="main-content">

Near the end of the file, just before  <?php get_sidebar(); ?>, add a closing div tag, </div>, to complete the div wrapper.

The resulting code will look like so. You may also copy and paste this into a new file and save it as index.php.

<?php get_header(); ?>

<div id='main-content'>

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

        <div <?php post_class() ?> id="post-<?php the_ID(); ?>">

            <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>

            <?php include (TEMPLATEPATH . '/inc/meta.php' ); ?>

            <div class="entry">
                <?php the_content(); ?>

            <div class="postmetadata">
                <?php the_tags('Tags: ', ', ', '<br />'); ?>
                Posted in <?php the_category(', ') ?> |
                <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>


    <?php endwhile; ?>

    <?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>

    <?php else : ?>

        <h2>Not Found</h2>

    <?php endif; ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Q: How do I load my custom theme once I have finished?
A: Copy the Custom theme folder to your new WordPress installation and put it in wp-content > themes. Then you can activate the new theme and work with it from there.
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed WordPress 3: Creating and Editing Custom Themes.

Return to your organization's learning portal to continue training, or close this page.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.