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!

$139

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!

$139

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!

$139

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!

$139

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
  • david

    hi could I use fireworks instead of photoshop for this course?

    • Hi David, Well the first part of the course is all about PS so that could be a difficult translation over to FW — unless you’re already very well versed with FW. A few users have skipped the PS info and jumped directly into the WordPress section of the course without any problems. I hope this helps! -Geoff

  • Rob Chandler

    Hey Geoff,

    This looks great, I have a question… I recently purchased “Building Custom WordPress Sites from Scratch” from Udemy, and was wondering how close these lessons are, it seems to be fairly similar. Is there anything in this lesson that is not in the other one that I would need?

    Thanks,
    again great tuts!
    Rob C.

    • Hey Rob, Thanks for your message. I piled tons and tons more into this course, admittedly. When I do a course for someone else (which I’m no longer doing these days) there are a lot of restrictions and limitations. For courses I do for myself and Ten Ton, the sky’s the limit and I can put in as much detail as I want — which I love doing. The big difference in this course is the heavy detail in Photoshop, and then getting deep into the nitty gritty within the WP theme. At 13.5 hours, there’s TONS of stuff in there. So, you very well may want to check it out. And don’t forget, if for whatever reason you find it isn’t for you, you have that 60-day money back guarantee you can use. I hope this helps! -Geoff

      • Rob Chandler

        Thanks Geoff, just picked up the course and getting ready to dive in!

  • Danny Avery

    What is the publish date on “Scratch-Building WordPress Themes with Photoshop?” Where can I find this publish date on your website? Thanks!

    • Hi Danny, This course was recorded and published back in mid-2012. Although it uses the previous version of WP, it’s all still very current. Thanks! -Geoff

      • Danny Avery

        Thanks, just bought it and will devour it shortly! Looking forward to the awesomeness! -Danny

        • Enjoy Danny! -G

        • Ahmed Khursheed

          i need yours help plz help me

          • Danny Avery

            What’s up?

          • Ahmed Khursheed

            i want to course learn bt i have no money plzzz help me

          • Ahmed Khursheed

            ahmedkhursheed2009@hotmail.com facebook id add me i am waiting

  • David Murray

    Hello Geoff,

    Question.
    Say I have multiple categories and I only want to show posts that belong to a particular category and not all of them, what do I add to:

    { ?php query_posts ($query_string . ‘&showposts=7’); ?}

    To make it do that?

    I tried this:

    {?php query_posts ($query_string . ‘&showposts=7’, ‘&cat=1’ ); ?}

    But this seemed to do nothing and still showed all of my posts despite belonging to different categories.

    • Guest

      Never Mind, With a bit of experimenting and trial and error I got it to work. Here is the code that worked for me in case someone else has the same question.

      {?php query_posts ($query_string . ‘category_name=1&showposts=7 ‘); ?}

      Remeber “{” = “” so you will have to change that if your copying and pasting.

      • Nice David! Glad you got it to work -Geoff

        • David Murray

          No sorry I didn’t. The reply above I tried to delete it but for some reason its still there. I went back and edited my original comment. Any help would be great.

  • Mark

    Hi Geoff,

    I’m most of the way through, but I’ve run into a snag. The slideshow you use is no longer supported and seems to be broken by the new WP. I was wondering if you have an alternative? I came up with something called ‘Dynamic Content Gallery’ which seems similar, but I don’t seem to be able to get this one to play nice either…any ideas?

  • Tim Dawson

    Hi Geoff,
    I don’t have PhotoShop. Is there any hope I can do the course (or most of it) using PaintShop Pro ?

    • Hey Tim, Thanks for your message. Hmmm…I suppose it depends on how well you know PSP. If you knew it well, then I’m sure you could transpose what I’m showing in PS to the equivalent in PSP…but keep in mind that this is a pretty Photoshop-intensive course. Hope this helps a bit -Geoff

  • R Pro Host

    I’m REALLY enjoying this course – much more in-depth in the design side than I expected – which is great! Now, I’m getting into Chap. 8. As far as adding the Photoshop color palette to the theme, I found this site that really sped things up – hope this helps others: http://hex.colorrrs.com/

  • The Website Boy

    I took this course just to refresh my memory a little and I really like how you went all the way with the design and wordpress. I recommend this to anybody wanting to learn everything from scratch.

    Thank You and Keep Up The Good Work

  • Where is the diagram of the template hierarchy you mention at the end of lesson 8.2? I can’t see it in the project files.

  • Geoff: I noticed this question was asked 3 months ago but never answered. The “Featured Content Gallery” plugin hasn’t been updated in over 2 years.
    It may no longer be maintained or supported and may have compatibility
    issues when used with more recent versions of WordPress.

    Any ideas for another one to use to be able to complete the training?

  • Amy

    Thanks that was an interesting course.

  • David Murray

    I loved this course and started an amazing journey of building WordPress based websites but I have run into a bit of a snag in the Chapter “A Better Way For Building WordPress Menus” I came back after many months of using the knowledge I gained here to refresh my memory about formatting menus and the thing I needed to know you completely glossed over. What about formatting a sub/dropdown menu items in the main navigation? Do you have a resource to help me out with this? Thanks a bunch.

  • Raaj

    Do you also show how to create a dashboard admin backend in the course? So that it is customizable and clients can change colours, fonts and design if they wanted to from their end.

    • Hi Raaj, Sadly no. This course discusses how to build a complete theme from start to finish, including subpages, comment areas, etc. Thanks! -Geoff

  • Raaj

    Thanks geoff, but is it easy to add control panel etc to this theme that we are creating from scratch, because what if some people would prefer it to be customizable? Or is that not important?

    • Ahmed Khursheed

      i want to this course plzzz but i have no money plz help me

  • Muzical

    Geoff, wonderful course. I am almost done with building my first wordpress website from scratch. I’m trying to find out how to create drop down menus from a blank theme. Can’t seem to find an answer. Can you point me in the right direction?

  • Methew Costner

    Hello Geoff, I know I am quite late to leave a comment in your comment box though I wish to post my words here. I have been using TemplateToaster, and I am very satisfied with this product.You can check here :-

    http://templatetoaster.com/

    Can you tell me how come your course will be comparatively advantageous to me?

  • Muzical

    Hi Geoff, I have one question about menus. When I add a new page to my site, I don’t always want it to appear in the main navigation. How do I keep it from showing up in the main navigation? Every example I see talks about wp_list_pages. On my site (which I did with this course) it is wp_page_menu. I don’t know how to exclude some pages.

  • Ahmed Khursheed

    i want to this course but i have no money can any one help me plzzzzzzzzzzzzzzzzzzzzzzzzz

  • frankie

    Hi Geoff, looking to purchase the from scratch tutorials, how up to date is this course? as WP and the web has moved on in leaps last few years, I appreciate some styles still relevant but not wanting to learn old techniques or out of date plugins. Do you have a more recent version, Also do you need to know photoshop in any real depth prior to taking the course material??

    • Hi Frankie, Thanks for the comment. I agree that things have moved a lot in recent years. There’s a lot in this course that is still very relevant, however it doesn’t address things like responsive design. That said, I think it will still be a great starting point for theme design. As for your question about Photoshop, no an in-depth knowledge of Photoshop isn’t required. I hope this helps! -Geoff

  • Hey Geoff, any chance we’ll see an update to this course? One perhaps with a more recent version on WP and Photoshop (definitely still something including CS6 at least).

    • Heya! Yes absolutely. This is one of our most popular courses (and one of my personal favourites I’ve done too), so an update is on the short list! You’re still using CS6? I think a lot of people still are. Thanks again! -G

      • Yup still using CS6, and I know for sure a lot of people do too, so it would be great to see aspects from that and CC if you’re already on the newer stuff. I’m looking forward to seeing the updates as well, this course is definitely one of my faves too :)

        • Well thanks for the kind words! My thinking is to update this course both for Photoshop CS6 (seeing as there are still many CS6 users) and also for Photoshop CC (for those who’ve decided to upgrade). So I hope that sounds like a solid plan!

  • Joanne Dillon

    Hi Geoff, I paid to do this course on Udemy but can’t find the project files. Are you able to help please? A fellow student contacted Udemy but they were unable to help. Many thanks, Joanne

  • Becky Song

    Hi Geoff,

    Currently, I am working on course “scratch building WordPress theme” I am having trouble to download the theme you mentioned (Starkers). I hope you can give me the blank theme. I understand I can use other blank themes, but I would like to follow you with the same theme.

  • David Woodhead

    Great Course Geoff! Thank you!

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!)