Week 07: Creating the Theme 2 of 2

Step 1: Drop in Your CSS

It’s up to you whether you want to split your css into multiple files or put it all in one. However you want to do it, you will load all your styles up in either style.css or linked files that style.css loads via import tags.

Step 2: Import Your HTML Protosite

This is the most complex part. I’ll do a demo of this in class so we can walk through it together.
The main idea is this:

  1. Identify your Header/Footer and Sidebar areas
  2. Drop in the Header, including the WordPress php tags where useful
  3. Drop in the Footer, including the WordPress php tags where useful
  4. Utilize the rest of the theme files to generate page content where needed

Step 3: Save a new screenshot thumbnail

Your theme will still have the default screenshot, which shows a preview of the theme in the Appearance menu:

It’s good practice to take a screenshot of your final theme and replace the screenshot.png with your own graphic.

Step 4: Drop in Custom Favicon

I recommend favicon.cc for generating a favicon.
Don’t forget to include the link to your favicon in your header.php:

<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Web Development Courses, Rants, Tutorials and Hacks