Building Wordpress Themes From Scratch with Photoshop

Build Wordpress themes from scratch for fun or profit.
3.0 (2 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
37 students enrolled
Instructed by Ten Ton Online Design / Web Design
$19
$20
5% off
Take This Course
  • Lectures 105
  • Length 13 hours
  • Skill Level Intermediate Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 6/2015 English

Course Description

Design your own Wordpress themes from scratch for fun and profit.

Have you ever noticed that web designers make money by developing their own themes for Wordpress and selling them on marketplaces like Envato? Well, now you can too! Learn Wordpress theme design from the ground up in this massive Stone River eLearning course.

Join award-winning veteran trainer Geoff Blake as he takes you through the entire workflow process of scratch-building a WordPress theme using Photoshop!

About the Course

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.

What are the requirements?

  • A basic understanding of WordPress
  • A basic understanding of Photoshop

What am I going to get from this course?

  • You’ll get an in-depth and complete look at theme building, which you can directly apply to your projects — it’s literally a freelance startup kit!
  • Use your newfound skills in your own business, or to land bigger and bigger clients!
  • Clearly laid out, easy to follow lessons lead you each step of the way through the process of building fully functional WordPress themes.
  • Invest in your knowledge and skills, and discover how creative, straightforward, and profitable building themes can be!
  • You’ll gain a strong, valuable, highly marketable set of design, coding, and graphics skills, allowing you to build themes quickly and efficiently.

What is the target audience?

  • Those looking to learn how to build custom WordPress themes
  • Entrepreneurs who want to sell their themes
  • Web designers who want custom themes for their customers
  • Business owners who want a custom Wordpress theme

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
Hello and Welcome
Preview
01:43
Understanding WordPress and WordPress Themes
Preview
02:23
The Workflow Process
Preview
03:06
Viewing the Finished Site
Preview
03:58
Section 2: Setting Up Photoshop for Web Layout
Setting Photoshop's Preferences
Preview
05:57
Arranging The Workspace
Preview
09:42
Setting Panel Options
Preview
06:51
Customizing Menus And Keyboard Shortcuts
Preview
08:52
Saving Photoshop's Workspace
03:10
Photoshop Color Management For Web Design
05:26
Common Photoshop Productivity Techniques
05:55
A Few Final Photoshop Settings
04:16
Section 3: Getting Set Up for User Interface Design
Understanding Monitor Resolution
04:02
Fixed Versus Flexible Web Layouts
04:16
Introducing the 960 Grid System
08:58
Available Column Widths in the 960 Grid System
04:14
Building A Custom Grid System
14:01
Using Photoshop's Grid for Layout
03:17
Understanding the Golden Ratio
04:58
Understanding the Areas of A WordPress Site
04:06
Roughing Out The Design
04:50
Section 4: Developing A Wireframe UI in Photoshop
Getting Started with Wireframing
05:53
Creating the First Wireframe Object
06:05
Continuing to Wireframe Objects
07:24
Deleting Wireframe Objects
02:11
Faster Methods for Creating Wireframe Objects
10:31
Building Up the Wireframe
10:06
Adding in Horizontal Rules
04:00
Wireframing Additional Objects, Plus Some Extra Techniques
09:13
Continuing the Wireframe Development
06:34
Placing Objects for Loop Post Thumbnails
05:00
Roughing in A Photo Gallery
05:24
Section 5: Finishing Up the Wireframe
Wireframing the Menu Text
09:44
Creating More Wireframe Text
09:10
Adding in Additional Text Objects
07:55
Finishing Up the Text Wireframing
03:33
Getting the Layers Panel Organized
09:27
Additional Layer Group Techniques
06:36
Adding Text Labels to the Wireframe
07:36
Exporting the Wireframe for Review
07:39
Section 6: From Wireframe to Design
Preparing the Wireframe for the Design Phase
03:18
Determining the Design's Message
04:50
Choosing A Typeface Hierarchy
13:53
Choosing Colour Combinations
12:25
Saving Out Custom Photoshop Color Palettes
03:26
Sourcing Photography and Textures
08:05
Creating the Site Logo (And Using Smart Objects)
08:46
Introducing Layer Style Special Effects
07:06
Finishing Up the Header
03:11
Building the Menu
08:18
Developing the Slideshow and Body Background
04:11
Formatting the New Additions Area
03:07
Blog Loop Formatting
03:07
Developing the Sidebar
06:24
Finishing Up with the Footer & Saving Out Custom Styles
10:07
Section 7: Applying Photography and Textures
Adding A Texture to the Header with A Clipping Group
08:06
Including Additional Textures
04:36
Adding A Photo to the Slideshow
04:01
Inserting Photography for the New Additions Area
04:55
Adding Post Thumbnails in the Loop
05:29
Finalizing the Design and Exporting for Review
03:20
Section 8: Preparing A Blank WordPress Theme for Design
Tools of the Trade
04:12
Understanding Template Hierarchy
06:08
A Look At Geoff's Setup
01:44
Applying A Blank WordPress Theme
06:00
Reviewing & Adjusting the Style Sheets
05:13
Creating the First Div and CSS Rule
05:27
Roughing in the Layout
09:09
Further Roughing in the Layout
12:38
Adding the Photoshop Colour Palette to the Theme's Style Sheet
06:44
Creating Our Site's Page Structure and Main Navigation Menu
08:54
Creating Sample Posts for the Loop
03:30
Section 9: Building The WordPress Theme From Complete Scratch
Pulling the Header Graphic Out of the Layout
09:46
Inserting the Header Graphic Into the Theme
03:30
Extracting the Logo From Photoshop and Inserting it Into the Theme
08:56
Rebuilding the Navigation Menu Using CSS
20:00
Building up the Main Content Area
06:22
Roughing in the Inner Containers
18:37
Inserting the Positioning Statement
04:58
Creating Button Formatting with CSS
20:14
Building and Formatting the New Additions Area, Part One
05:52
Building and Formatting the New Additions Area, Part Two
12:13
Font Replacement with Google Fonts API
10:19
Consolidating Font Usage and Organizing Typography
21:12
One Giant Leap for Theme Design...
09:48
Formatting the Loop
09:53
Adding Post Thumbnails to the Loop
21:19
Getting the Sidebar Started
03:39
Section 10: Pushing the Theme Design Further
Reviewing How the Footer was Built
06:17
Formatting Hyperlinks
05:53

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Ten Ton Online, Geoff Blake, Lead Developer Ten Ton Online

Lead by award-winning veteran trainer Geoff Blake, Ten Ton Online produces top quality video-based software training products, helping users worldwide increase their web design and software skills. Taking a fresh approach to software education, Ten Ton believes that learning should be a fun, creative, in depth, and inspiring. Gain advanced skills in today's modern creative technologies, including HTML, CSS, WordPress, Adobe's Creative Suite, E-Commerce, and more, and have fun along the way!

Ready to start learning?
Take This Course