Join Chris Coyier for an in-depth discussion in this video Finishing the CSS, part of WordPress 3: Creating and Editing Custom Themes (2010).
There is just one more thing we need to do before the styling of our page is…complete and that's deal with this footer down here.…So you can see that this block text kind of outside our page wrap or…white div area here.…Let's look in the HTML and what's going on with that footer.…Now it's after the end of the page wrap, so that makes sense why it's not in this white box.…It has the HTML5 tag footer and then here is the content in there.…So let's get start to styling that up.…It's going to be in the style that CSS file, because of course the footer will…be in all of our pages and I might as well put it in this file which we'll get…loaded on all pages.…
We'll put the styling information at the way bottom where any good footer…information should be. So footer.…Now it's not subject to the same width, because it's outside of this.…So we're going to have to set the width of our footer equal to the width of what…our page wrap is, which is 800 pixels.…We're going to center it with margin 0 auto.…Now we don't need to give it any top padding, because it's already have been…
- 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.