Join Chris Coyier for an in-depth discussion in this video Building a home page mockup, part of WordPress 3: Creating and Editing Custom Themes (2010).
Now it's time to start creating the actual design of the site in Photoshop.…If you don't have any interest in working in Photoshop, or this part of the…workflow, the finished Photoshop file is available in the exercise files.…If you don't have access to those, it's also free exercise file available on the course page.…Then you can continue with this course in Chapter 2.…We are going to be working in the homepage design.…The homepage is just as good of a place to start as any, but you wouldn't…necessarily have to.…If you have particular inspiration to start with a different area of your site,…by all means go for it.…
Now we have this mood board created.…It just has some typography styles and some color choices,and some things…we are playing with to kind of set the mood for what the design is going to be like.…So I have that open here. We'll be using that potentially a bit, but we are…going to need a new document for the actual design.…So I will create a new document.…I am going to create it at 800x1200 pixels, width and height respectively there.…
- 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.