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

Breaking up the HTML


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: Breaking up the HTML

So we are in a great place right now, because we have our finished HTML and CSS template that we finished at the end of Chapter 2 and we just took a tour of the WordPress themes. So we can move that static stuff to this dynamic WordPress theme stuff. That's the plan. Move from one to the other. To do that, we are going to open up both projects side by side in TextMate and look at them both at the same time to do the moving. So I am going to open up the HTML and CSS by dragging the whole folder to the TextMate icon in the dock to open that whole project and open up the theme by dragging that whole folder to the TextMate icon at my dock.
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

Breaking up the HTML

So we are in a great place right now, because we have our finished HTML and CSS template that we finished at the end of Chapter 2 and we just took a tour of the WordPress themes. So we can move that static stuff to this dynamic WordPress theme stuff. That's the plan. Move from one to the other. To do that, we are going to open up both projects side by side in TextMate and look at them both at the same time to do the moving. So I am going to open up the HTML and CSS by dragging the whole folder to the TextMate icon in the dock to open that whole project and open up the theme by dragging that whole folder to the TextMate icon at my dock.

So I have got both of these projects opened side by side. I am just going to arrange them just so, so we can be looking at both at the same time. So we are going to be moving static on the left. Our static HTML and CSS to dynamic on the right. Our WordPress theme on the right. Left to right. We have got a little bit of prep to do before we can start looking at that though. All these images from our sliced up CSS over here we are going to drag over into our theme. So I am going to Option+Drag all those images in to the images folder of our theme.

So now our theme can have access to them as well. There is a little bit of a thing to note here in that our CSS file was in a folder in our static thing before. It's no longer in a folder over here. So the relationship between it and the images are just slightly different. So if I open up that CSS file in our theme, first thing I am going to do is actually move that CSS to the theme. Open up the CSS file, literally just select all of it and just paste it over here.

So our theme and our static has the same. We don't have to do a careful line-by-line analysis of the CSS. That's just a straight copy and paste except for these file paths. It start with this dot, dot, dash over here. They don't need to start with that ../ anymore, because of that change in relationship, but TextMate has a really easy Find and Replace. So this ../ we will just replace it with nothing. Hit Replace All, close it, and now we can see that in that example we are looking at, it doesn't start with ../ anymore.

It's just gone and that's just replaced with the proper file path. So there we go. I am going to save that CSS file. Then we are going to start looking at the index.html file over here. We are going to start with the header.php file in our WordPress theme. Both of these start with the DOCTYPE. So we are starting at the top and working our way to the bottom. Anything that we see different, we are going to check it out on a line by line analysis and figure out what we should do. So right away on line 2 we can see that there is a bit of a difference.

So over here it just says html. Over here it says html and it's got this special php function in here. WordPress has a special function for outputting the language attributes. There is no reason to remove that. It's just nice. It's just saying WordPress is going to be setting the English language and just proper outputs that attribute there. So we got to analyze if WordPress is trying to do something smart for us over here. Not to remove it, just because we don't have it over here, but to leave it in because it's not affecting anything.

It's just WordPress trying to help out and be a little smart. It comes up again right away, because it comes up in this meta character set. We just have a static UTF8 over here. But WordPress is outputting it dynamically here and we might as well leave that. It's just WordPress trying to help us out with some smarts. This meta tag here right here in between these PHP tags is saying don't index. So that's a little weird. Why would we tell a theme not to index? Well, it's only telling it to index on very specific pages.

WordPress has this thing called conditional tags. So if we read this out loud in plain English, it says if is a search. So is_search is the conditional tag. It will return true or false, meaning that this meta tag is only going to get output if this is true, which is only if you are searching for something literally on a search result's page on your WordPress theme, and those type of pages can have a lot of repetitive content on them. It's good to not have search engines index those page and possibly penalize you for duplicate content and stuff like that.

Over here where we are linking the CSS files. That happens down here in the WordPress theme. It's fine. It's doesn't matter where that happens. Right here, we are linking to the style. css file, but in our CSS link here, it has the special WordPress function, bloginfo, stylesheet_url. It's just ensuring the fact that this URL that it outputs is absolutely going to be correctly pointed at the CSS file that's part of our theme. So it's nice to leave that there. But boy! What's going on with this title tag? That's a lot of code there.

That there is a lot of these conditional tags that we looked at. As we covered, WordPress works in this modular way. There is all these little chunks that are getting called. You remember how it calls the header, it calls the footer, and it calls the sidebar. Every single page on our entire WordPress site. At WordPress there is going to be thousands of pages. All over them are going to call header .php, all of them are going to use the same code over, and over, and over again. So it needs to do smart things with the title of the page.

If it's the homepage, it should probably just say what the name of the site is. If it's an archived page, it should probably mention the fact that it's an archive page. So this looks like a lot of code. Don't worry about it too much. It just kind of makes sure that what gets output in that title tag is a smart and appropriate thing for the title instead of here on our static side on the left it just says Widget Corp. We wouldn't want that just to be the title of our head in every single page of our whole site. That will be no good. We have some JavaScript going on up here.

We are going to cover JavaScript in the later chapter in this course. So let's not worry about JavaScript right here at this moment. We have the opening body tag then. So here is the opening body tag in the WordPress theme. WordPress has a special function for it called body_class. It outputs a bunch of classes based on the type of page that you are looking at. So if it was a search page, there is going to be class of search on it as well as a whole bunch of other thing. It's just a really nice and convenient thing that WordPress provides mostly for styling of CSS. Then we open up our page-wrap.

There is this class of group over here. We don't have a class of group here. So we detected a difference. We might as well put this class of group over here as well. So that's a match, div with an id of header, this h1 tag in here that links to Widget Corp. Over here it's the same deal, only it's outputting these links dynamically. So we are doing good. Then we just have a paragraph tag over here that says Established 1987. Over here we have a div of class description. That's different.

We might as well just do what we have already written in our page. So we are making those match, but we will leave in this dynamic part. That we can change through WordPress settings. Remember we looked at settings and how it said just another WordPress blog? We might as well make that say Established 1987 and that way we are staying dynamic. We are using the intelligence of WordPress. That's where this header. php file ends over here. So we need to be careful here, because notice we opened the body tag, we opened the page-wrap, but we didn't close either of those two thing.

We really need to be careful when we open tags to make sure that they are closed again. Make sure that our page looks right and validates and all that good stuff. Let's jump right away to footer.php. So this is what comes with the blank theme, but in our static we can just zoom all the way to the bottom to take a look at what's happening in the footer. Let's make sure that page-wrap is closed and notice we did all that scrolling. So sometimes when you do see a closing div tag, you are like what is that closing again? This is a nice comment to remind us what it exactly is closing.

So let's copy that and make sure that because we opened it, we are going to close it. Then grab this footer code over here. This is more appropriate of what's going on. We will just paste it in there and leave what was already there. So we can copy and paste. This is smart. It's about the same thing, outputting the copyright, but this is dynamically outputting the year and the name of our site. That's nice. So we don't have to change the copyright manually each year. Paste that in there. Get rid of the old stuff.

So we have made sure that the body is closed and that tag that we opened is closed. We are doing a good job there. We have this wp_footer in here that is telling us that's where the footer of this site is if a plug-in or something like that needs to know where the footer of your site is. Here it is, in case it needs to insert its own kind of stuff, and our nice, little, friendly comment reminding us about analytics. That's where we are. We have analyzed this as best as we can so far, going line by line and comparing what we already have and fixing it up in WordPress theme.

So we are doing a good job and we are going to continue looking at comparing these files to what we have already written and making it into a WordPress theme. So we have finished our line by line analysis of this theme, moving from the left to the right, making sure the tags are closed, and that we've moved and properly have everything that is from our working site into our WordPress theme. Let's take a look in the browser and see where we made it. Fair warning, this may not look super pretty, because we are not quite there. We are only half way through, but you should see some progress of this thing starting to take shape as it should.

Well, that's a little messed up, but don't worry about it. There is a reason that it looks like that and we are going to be fixing everything. I am sure you guys can relate to this site looking a little weird once in a while. Don't worry. We are going to fix it all up as we move along.

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.