Join Chris Coyier for an in-depth discussion in this video Starting the CSS: Creating the header and basic style structure, part of WordPress 3: Creating and Editing Custom Themes (2010).
So with out HTML in place, we are ready to start working with CSS in styling our page.…I want to make a working copy of this, put it on our desktop, and open it up in…TextMate as a project.…So this is our HTML, our whole project.…Here I am going to open up our index.html file.…Notice this line here we are linking out to a style.css file.…That's here in our project.…This is what we are going to be working with.…Notice there are a few lines in here already, a basic reset, we're setting the…font to Georgia here and then this line here is all about those new HTML5…elements, ensuring that they are display block as they should be.…
We are going to be using two other applications in this movie. One is…Photoshop, we are going to have our Photoshop mockup open, as this is what we…are trying to write CSS to match, this is how we want it to look, and the other…is just the browser.…So I'm going to have the browser open. I want to open our project here, drag the…HTML file into the browser, and this is what our HTML file currently looks like…
- 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?
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:
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(); ?>
<?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' ); ?>
<?php the_content(); ?>
<?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 : ?>
<?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.