Video: Moving on: One page is enough

So we just finished up the HTML and the complete CSS styling for our homepage. In my workflow this is usually where I stop and move on to creating an actual WordPress theme. It's similar to what we did in Photoshop where we just mocked up the homepage. We could've kept on going in Photoshop and created the designs for all the different pages, but we decided that the homepage was enough for now and decided to move forward. So a lot of times that's what I'll do here too. I have this homepage completed in the HTML and CSS and I'll move into creating the actual theme.

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.

Moving on: One page is enough

So we just finished up the HTML and the complete CSS styling for our homepage.In my workflow this is usually where I stop and move on to creating anactual WordPress theme.It's similar to what we did in Photoshop where we just mocked up the homepage.We could've kept on going in Photoshop and created the designs for all thedifferent pages, but we decided that the homepage was enough for now anddecided to move forward.So a lot of times that's what I'll do here too.I have this homepage completed in the HTML and CSS and I'll move intocreating the actual theme.

But bear in mind that you don't have to stop here if you don't want to.You might want to press on and mock up additional pages.In fact that's what we've done here.I've mocked up a number of additional pages for other areas of this site,doing it this way is going to save us a little bit of time when move intotheming in the next chapter.So let's take a look at these pages and the final HTML and CSS code.Now this is the exact file that we're going to be working from when we werecreating the themes.So we're looking at the index.html file.Now we just finished up theming this.

It's just slightly different than where I left you guys off.There is the Search form at the top.I've added a home link and there is a little bit of content here to fill outthis column, this Web Special of the Week.So let's take a look at this project in TextMate.We'll look at that index.html file and at the top of our sidebar is this formthat's that search form, in case you're following along and want a search formon your site as well.I've added this Home link and I've added just another up here.

I got another h2 tag with this coupon below it.So that's just the only thing that's different on the homepage, this index.html page.There is a few other pages that I've mocked up though.One of them would be the homepage of the blog.So if you click on The Grind here and go to the blog, The Grind is going tohave this kind of big bold identity and then recent blogpost and that's whatthat's going to look like.A single blog article like if you were to click on this article and go read thisindividual article, is this file called blog single.html.

It looks like this.This is the design for an individual blog post.Then inside the store there are category pages.We're hoping they look like this with the different categories here andindividual products below those category headers.This is what we want an individual product to look like, a big image for theproduct and this kind of design here.So these are the exact files that we're going to be working from as we moveforward with our WordPress theme.

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 PHP, HTML, 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.

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.

Already a member ?

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

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:

new course releases

newsletter

general communications

special notices

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:

new course releases

newsletter

general communications

special notices

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