Scratch-Building WordPress Themes with Photoshop

From blank Photoshop doc to fully functional WordPress site, discover exactly how to create your own custom themes!

This course includes…

  • Unlimited lifetime access
  • Downloadable project files
  • 30 day money-back guarantee

Start right now!

$162

Enroll in this course
  • Project files included!
  • No recurring monthly fees!
  • Unlimited lifetime access!

How does it work?

“This is by far the best training course on converting Photoshop PSD layouts to WordPress themes that I have watched. The lessons are easy to follow and understand. I was able to take the knowledge I gained from this course and immediately apply it to my real world projects. Geoff has once again saved me a lot of time and money by teaching me the skills I need to complete these types of projects on my own. Thanks!!!”

Michael

Learn how to build grid systems and wireframes!

The foundation of great WordPress themes begin in Photoshop, where you’ll see how to custom-build a grid system and how to wireframe out your designs!

Build and export colour palettes!

Develop rich colour palettes in Photoshop, then learn how to export them to code!

Convert your design from Photoshop to WordPress!

See how to take your fully realized Photoshop layouts and convert them to a fully functional WordPress theme!

Free course included!

Enrollment includes Foundations In Web Design, a free bonus course, at no extra cost!

  • Worksheets
  • Hands-on lessons
  • Other extras and goodies!

Let’s make sure this is a good fit

Before going further, let’s make sure you’re in the right spot. The info below will help…

Who is this course for?

Those wanting a solid understanding of web design, including…

  • People who don’t know where to start, who just want simple answers.
  • People who want to become full or part-time web designers.
  • Print designers who want to expand their skills into web design.
  • Employees who want to add to their skills, advance their careers, and become more marketable.
  • Small business owners who want complete control over their website.
  • Those who’ve been out of web design for a while, who feel out of touch, but who want to get back into the swing of things.
  • Artists, writers, photographers, and other creative-types wanting to build a site to showcase their work.
  • Those wanting to save the cost and headache of hiring an expensive web designer.
  • Non-profits, churches, and fundraising organizations.
  • Those who are retired, who want to supplement their income and help their community.
  • People with ideas for side-projects, small businesses, and creative online ventures.
  • Hobbyists and those interested in doing web design on the side.

Sound like a good fit? Then let’s get started! If not, then let’s find the right course for you.

Course description

Ready for an adventure into WordPress Theme Design? Join award-winning veteran trainer Geoff Blake as he takes you through the entire workflow process of scratch-building a WordPress theme using Photoshop! The training begins in Photoshop, where you’ll be introduced to some setup options and settings to optimize Photoshop for web design. Then, learn about building and using various grid systems, which will serve as the template for the theme layout. Next, it’s on to the next phase in the workflow process, wireframing and UI design in Photoshop. Learn how to stay organized and work quickly and efficiently. Once the wireframe structure is complete, you’ll see how to apply design to the wireframe, and then move the entire layout from Photoshop into the world of code. You’ll discover how to construct a WordPress theme from the ground up, starting with a completely blank canvas! You’ll see a variety of techniques for working between Photoshop, WordPress’s architecture, and the HTML, PHP, and CSS code that pulls it all together. CSS code that pulls it all together.

Course prerequisites

It’s a good idea to be familiar with the following before enrolling in this course:

Sound like a good fit? Then let’s get started! If not, then let’s find the right course for you.

“Finally, training that delivers! I have taken courses from numerous vendors, but absolutely none of them begin to compare with this course. I’ve taken a ton of courses from Lynda.com and frankly came away with more theory than practical application. But not with this course, you will get your hands dirty with code, you will be challenged to think through issues on your own but in the end you will have taken a giant step forward in learning to build a WordPress theme from scratch! Geoff is an outstanding instructor, I think I laughed almost as much as I learned. If you’re serious about improving your skills with WordPress then sign up for this course, lock yourself in your office and get to work. I promise it will be worth it! By the way I’ve been so impressed with Geoff as an instructor that this is the third course I’ve taken from him and will soon be starting on my fourth!”

Craig

Let a friend show you how

Hey, I’m Geoff. I help graphic designers, small business owners, and creative people just like you learn about web design, develop valuable, in-demand skills, launch online businesses and creative projects…and yeah, make more money! Learn more about me here.

Learning how to build websites is no different than figuring out perspective drawing, how to weave literary prose, or how to combine chords to make beautiful music. It’s like cooking or woodworking or learning how to fix your car…But for whatever reason, web design’s made out to be highly technical and overly complicated. Let’s change that.

Whatcha waitin’ for?!

Start right now!

$162

Enroll in this course
  • Project files included!
  • No recurring monthly fees!
  • Unlimited lifetime access!

How does it work?

What others are saying

People just like you are building dream web projects every day. A few would love to tell you how Ten Ton helped them get there.

“With Geoff’s excellent training, I graduated at the top of my 3-year college program in just 2 years.”

Ian’s story

“I fired my web designer and saved tons of money, thanks to Geoff’s videos.”

Bridgette’s story

“It’s because of Geoff that I can now call myself a web designer and can get paid for it.”

Patrick’s story

Start right now!

$162

Enroll in this course
  • Project files included!
  • No recurring monthly fees!
  • Unlimited lifetime access!

How does it work?

Course outline

Here’s a complete outline of all of the topics covered in this course

Chapter 1: Introduction

  1. Hello and Welcome (Free Lesson!)
  2. Understanding WordPress and WordPress Themes (Free Lesson!)
  3. The Workflow Process (Free Lesson!)
  4. Viewing the Finished Site (Free Lesson!)

Chapter 2: Setting Up Photoshop for Web Layout!

  1. Setting Photoshop's Preferences (Free Lesson!)
  2. Arranging The Workspace (Free Lesson!)
  3. Setting Panel Options (Free Lesson!)
  4. Customizing Menus And Keyboard Shortcuts (Free Lesson!)
  5. Saving Photoshop’s Workspace
  6. Photoshop Color Management For Web Design
  7. Common Photoshop Productivity Techniques
  8. A Few Final Photoshop Settings

Chapter 3: Getting Set Up for User Interface Design!

  1. Understanding Monitor Resolution
  2. Fixed Versus Flexible Web Layouts
  3. Introducing the 960 Grid System
  4. Available Column Widths in the 960 Grid System
  5. Building A Custom Grid System
  6. Using Photoshop’s Grid for Layout
  7. Understanding the Golden Ratio
  8. Understanding the Areas of A WordPress Site
  9. Roughing Out The Design

Chapter 4: Developing A Wireframe UI in Photoshop!

  1. Getting Started with Wireframing
  2. Creating the First Wireframe Object
  3. Continuing to Wireframe Objects
  4. Deleting Wireframe Objects
  5. Faster Methods for Creating Wireframe Objects
  6. Building Up the Wireframe
  7. Adding in Horizontal Rules
  8. Wireframing Additional Objects, Plus Some Extra Techniques
  9. Continuing the Wireframe Development
  10. Placing Objects for Loop Post Thumbnails
  11. Roughing in A Photo Gallery

Chapter 5: Finishing Up the Wireframe!

  1. Wireframing the Menu Text
  2. Creating More Wireframe Text
  3. Adding in Additional Text Objects
  4. Finishing Up the Text Wireframing
  5. Getting the Layers Panel Organized
  6. Additional Layer Group Techniques
  7. Adding Text Labels to the Wireframe
  8. Exporting the Wireframe for Review

Chapter 6: From Wireframe to Design!

  1. Preparing the Wireframe for the Design Phase
  2. Determining the Design’s Message
  3. Choosing A Typeface Hierarchy
  4. Choosing Colour Combinations
  5. Saving Out Custom Photoshop Color Palettes
  6. Sourcing Photography and Textures
  7. Creating the Site Logo (And Using Smart Objects)
  8. Introducing Layer Style Special Effects
  9. Finishing Up the Header
  10. Building the Menu
  11. Developing the Slideshow and Body Background
  12. Formatting the New Additions Area
  13. Blog Loop Formatting
  14. Developing the Sidebar
  15. Finishing Up with the Footer & Saving Out Custom Styles

Chapter 7: Applying Photography and Textures!

  1. Adding A Texture to the Header with A Clipping Group
  2. Including Additional Textures
  3. Adding A Photo to the Slideshow
  4. Inserting Photography for the New Additions Area
  5. Adding Post Thumbnails in the Loop
  6. Inserting Thumbnails in the Photo Gallery

Chapter 8: Preparing A Blank WordPress Theme for Design!

  1. Tools of the Trade
  2. Understanding Template Hierarchy
  3. A Look At Geoff’s Setup
  4. Applying A Blank WordPress Theme
  5. Reviewing & Adjusting the Style Sheets
  6. Creating the First <div> and CSS Rule
  7. Roughing in the Layout
  8. Further Roughing in the Layout
  9. Adding The Photoshop Colour Palette To The Theme's Style Sheet
  10. Creating Our Site’s Page Structure and Main Navigation Menu
  11. Creating Sample Posts for the Loop

Chapter 9: Building The WordPress Theme From Complete Scratch!

  1. Pulling the Header Graphic Out of the Layout
  2. Inserting the Header Graphic Into the Theme
  3. Extracting the Logo From Photoshop and Inserting it Into the Theme
  4. Rebuilding the Navigation Menu Using CSS
  5. Building up the Main Content Area
  6. Roughing in the Inner Containers
  7. Inserting the Positioning Statement
  8. Creating Button Formatting with CSS
  9. Building and Formatting the New Additions Area, Part One
  10. Building and Formatting the New Additions Area, Part Two
  11. Font Replacement with Google Fonts API
  12. Consolidating Font Usage and Organizing Typography
  13. One Giant Leap for Theme Design…
  14. Formatting the Loop
  15. Adding Post Thumbnails to the Loop
  16. Getting the Sidebar Started

Chapter 10: Pushing the Theme Design Further!

  1. Reviewing How the Footer was Built
  2. Formatting Hyperlinks
  3. Limiting the Number of Posts Appearing on the Home Page
  4. Inserting Custom Loop Pagination
  5. Inserting the Slideshow
  6. A Better Way for Building WordPress Menus
  7. Building and Formatting WordPress Subpages
  8. Applying Formatting to Post Pages
  9. Completely Customizing the Comments Area
  10. Adding A Ribbon Graphic to the Comments Area
  11. Customizing Category And Search Results Pages
  12. Adding A Search Field to the Header
  13. Building A Lightbox Photo Gallery
  14. Finishing Touches
  15. Addressing Browser Compatibility Issues

Chapter 11: Wrapping Things Up!

  1. Final Site Checklist
  2. Thanks for Watching, That Was Fun!

Frequently Asked Questions

Got questions? We’ve got answers!

What is Ten Ton?

Hey, I’m Geoff, an award-winning teacher, artist, and designer. Ten Ton Online is my premium online training platform to help graphic designers, small business owners, hobbyists, and other creative rabble-rousers learn about web design. If you want to discover how to build beautiful looking websites, how you can develop valuable, in-demand skills, or how to launch and market online businesses and creative projects, you’re in the right spot! You can view the full list of courses here.

Can I sign up any time?

Yes. All courses are completely self-paced. This means you can enroll now, and start your course whenever you like.

How do I watch the videos?

After enrolling, you’ll be able to stream your course lessons on the web, to your computer, tablet, or smartphone.

Can I download the video lessons?

To best serve the community, lessons are provided as streaming video only. This is because courses are sometimes updated to provide users with the latest information and content.

How long will I have access to my courses?

All courses come with unlimited, lifetime access. This means you can access your course as often as you’d like, without any limitations.

Are there recurring monthly costs?

Nope. There’s just a single one-time enrollment fee for your course.

Are courses self-paced or scheduled?

Courses are completely self-paced, allowing you to work through lessons at your own speed. You can skip ahead or go back, and otherwise move through your courses as quickly or slowly as you’d like. You can find out more about how it all works right here.

Are project files included?

You bet! Courses come with downloadable project files, allowing you to get the most out of your learning experience. You’re encouraged to follow along, step-by-step, so you can gain real-world, hands-on skills.

What is your refund policy?

All courses come with a 30-day money back guarantee. If you’re not satisfied with your course within 30 days of purchase, let us know. We’re here to help.

Where should I start?

Start with my free Foundations In Web Design course. It’ll give you a solid foundation in web design, and help you determine which direction you should head in based on your interests and goals.

I have more questions, how can I contact you?

You can contact me right here.

Start right now!

$162

Enroll in this course
  • Project files included!
  • No recurring monthly fees!
  • Unlimited lifetime access!

How does it work?

“Scratch Building WordPress Themes From Photoshop really launched me forward in being able to customize WP themes for my very happy clients. And the fact that I can refer back to the video any time I need to makes the Ten Ton videos a tremendous value. Because of that feature, whenever I need to dig into a subject, I head to Ten Ton first. Thanks Geoff!”

Chris

Hello and Welcome (Free Lesson!)

Understanding WordPress and WordPress Themes (Free Lesson!)

The Workflow Process (Free Lesson!)

Viewing the Finished Site (Free Lesson!)

Setting Photoshop's Preferences (Free Lesson!)

Arranging The Workspace (Free Lesson!)

Setting Panel Options (Free Lesson!)

Customizing Menus And Keyboard Shortcuts (Free Lesson!)