Join Chris Coyier for an in-depth discussion in this video Breaking up the HTML, part of WordPress 3: Creating and Editing Custom Themes.
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.…
- 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
Skill Level Intermediate
Q: What prerequisite skill do I need to be successful in this course?
<div>A: This course is set at the intermediate/advanced level. You’ll do best if you have a good knowledge of <a href="http://www.lynda.com/Photoshop-training-tutorials/279-0.html">Photoshop</a>, plus a good grasp of <a href="http://www.lynda.com/PHP-training-tutorials/282-0.html">PHP</a>, <a href="http://www.lynda.com/HTML-training-tutorials/224-0.html">HTML</a>, and <a href="http://www.lynda.com/CSS-training-tutorials/447-0.html">CSS</a>.</div> <div><br /> </div>
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?<br />
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.<br /> <br /> 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 <span style="font-family: Courier;"><?php get_header(); ?></span> line:<br /> <br /> <span style="font-family: Courier;"><div id="main-content"></span><br /> <div><br /> Near the end of the file, just before <span style="font-family: Courier;"><?php get_sidebar(); ?></span>, add a closing div tag, <span style="font-family: Courier;"></div></span>, to complete the div wrapper.</div> <br /> The resulting code will look like so. You may also copy and paste this into a new file and save it as index.php.<br /> <br /> <span style="font-family: Courier;"><?php get_header(); ?><br /> <br /> <div id='main-content'><br /> <br /> <?php if (have_posts()) : while (have_posts()) : the_post(); ?><br /> <br /> <div <?php post_class() ?> id="post-<?php the_ID(); ?>"><br /> <br /> <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2><br /> <br /> <?php include (TEMPLATEPATH . '/inc/meta.php' ); ?><br /> <br /> <div class="entry"><br /> <?php the_content(); ?><br /> </div><br /> <br /> <div class="postmetadata"><br /> <?php the_tags('Tags: ', ', ', '<br />'); ?><br /> Posted in <?php the_category(', ') ?> | <br /> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?><br /> </div><br /> <br /> </div><br /> <br /> <?php endwhile; ?><br /> <br /> <?php include (TEMPLATEPATH . '/inc/nav.php' ); ?><br /> <br /> <?php else : ?><br /> <br /> <h2>Not Found</h2><br /> <br /> <?php endif; ?><br /> <br /> </div><br /> <br /> <?php get_sidebar(); ?><br /> <br /> <?php get_footer(); ?></span><br />
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.