How to Turn PSD Files into WordPress Themes
OSTraining
Course Summary
This class will take you step-by-step from your initial design in Photoshop to a finished WordPress theme. Please note that this is an older class. We keep it around because some people find it useful, but newer classes are available in our, "All the WordPress Theme Design Classes" pathway.
-
+
Course Description
This class will take you step-by-step from your initial design in Photoshop to a finished WordPress theme. Please note that this is an older class. We keep it around because some people find it useful, but newer classes are available in our, "All the WordPress Theme Design Classes" pathway.For the first part of the class, we'll introduce our class project for the class and show you the tools you'll need to build WordPress themes:
- Introducing the WordPress Theming Course
- Resources You'll Need (Mac)
- Resources You'll Need for WordPress Themes on Windows
In the second part of the class, we show you how WordPress themes work and how to plan your project:- Theme Template Tour
- Starter Theme: Startbox Feature Tour
- Planning: Sidebars, Widgets and More
- Examining Startbox Div Structure
- Create Some Content, Widgets and Main Navigation
In the third part of the class, we take your design image and use Photoshop to make it ready for WordPress:- Photoshop Slicing - Part 1
- Photoshop Slicing - Part 2
In the fourth part of the class, you'll learn how CSS is used to implement your design:- Styling the Header and Logo
- Styling and Placing the Main Navigation
- Hooks and Sidebars
- Styling the Homepage Top Widgets - Part 1
- Styling the Homepage Top Widgets - Part 2
- Styling the General Widgets
- Styling Internal Pages Part 1
- Styling Internal Pages Part 2
- Styling Internal Pages Part 3
- Styling the Author Page
- Styling the Search Results
In the fifth part of the class, you'll learn how to design for custom content types:- Overview of Custom Content Types
- Styling Custom Archive Page and Custom Loop
- Create and Style a Custom Single Page
In the sixth part of the class, we cover some useful tips on how to properly build your themes:- Filtering Content with PHP
- Properly Including Javascript and CSS Files
In the final part of the class, you'll learn how to build your theme using the parent / child theme structure:- Start from Scratch or Use a Starter Theme?
- Hacking the Header Template
- Hacking the Footer
- Creating a Sidebar Widget Area
Christopher DeRosia (Topher) has been "doing the web" since 1994. With the advent of PHP in 1998, his web sites became much more dynamic and exciting.
He is an accomplished programmer, having written his own content management systems and managed some very large websites. He loves to help people enjoy their websites and believes, "playing with WordPress is fun!". He has built over 30 sites with custom themes and plugins.
Topher lives in Michigan, USA.
-
+
Course Syllabus
Introduction
Introducing the Theming Course
Resources for Themes on Windows
Resources for Themes on Mac
Preparation
Theme Template TourFree
Startbox Feature TourFree
Examining Startbox Div StructureFree
Content, Widgets and NavigationFree
WordPress Theme Intro Quiz
Photoshop
Photoshop Slicing - Part 1Free
Photoshop Slicing - Part 2
Themes and Photoshop Quiz
CSS
Styling the Header and Logo
Styling the Main Navigation
Hooks and Sidebars
Homepage Top Widgets 1
Homepage Top Widgets 2
Styling the General Widgets
Styling Internal Pages Part 1
Styling Internal Pages Part 2
Styling Internal Pages Part 3
Styling the Author Page
Styling the Search Results
WordPress Theme CSS Quiz
Custom Content Types
Custom Content Types
Styling Custom Archive Page
Create a Custom Single Page
Tools
Filtering Content with PHP
Including Javascript and CSS Files
WordPress Themes and CCT Quiz
Parent Themes
From Scratch or a Starter Theme?
Hacking the Header Template
Hacking the Footer
Creating a Sidebar Widget Area
WordPress Parent Themes Quiz
Summary
Summary and Final Thoughts