Learn Photoshop to WordPress Theme Development from Scratch
4.6 (92 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.
660 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn Photoshop to WordPress Theme Development from Scratch to your Wishlist.

Add to Wishlist

Learn Photoshop to WordPress Theme Development from Scratch

Create amazing WordPress Themes from Scratch using Advanced Custom Fields, Post Types & Twitter Bootstrap 100% practice
4.6 (92 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.
660 students enrolled
Last updated 1/2017
Current price: $10 Original price: $195 Discount: 95% off
9 hours left at this price!
30-Day Money-Back Guarantee
  • 16 hours on-demand video
  • 2 Articles
  • 13 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
Have a coupon?
What Will I Learn?
Create a WordPress Theme with Twitter Bootstrap
Create 3 Different WordPress Themes from Scratch
Convert 19 PSD files into WordPress Templates
Learn how to transform any PSD file into a WordPress Theme
Learn Good Practices in WordPress Theme Development
Learn some advanced Features like Custom fields and Custom Post Types
Understand WordPress Theme Development
Create Mobile First WordPress Themes
View Curriculum
  • A Code Editor (There´s a video where i show you 4 alternatives that´re free)
  • A Local Server (I´m gonna be using MAMP but WAMP it´s also free)
  • Photoshop (You can use the 30 days free trial)
  • Exercise Files & Code Snippets Included!
  • 19 PSD Files already Included
  • Images for this course already included

Start creating your own CUSTOM WordPress Themes from scratch with this 100% practical course.

We will build 3 projects, adding more functionality and complexity: 

  • A City Blog Website: You will Learn the basics of WordPress Theme Development
  • A Travel Agency Website: In this project you will learn how to use WordPress starter themes, Advanced Custom Fields, Widgets API and Custom Post Types.
  • A Blog: In this project you will learn how to integrate Twitter Bootstrap to create amazing responsive WordPress themes.

WordPress powers 25% of the websites in the world, knowing WordPress Theme Development is a key skill this days, you will be able to develop your own themes by the end of this course.

15 Hours of content full of tips, tricks and techniques for WordPress theme development in one course, Plus:

  • 3 Complete Projects will be developed
  • 19 PSD files to Convert into WordPress templates included
  • Understand what are Custom Post Types, Custom Fields and how to use the Widgets API
  • You can ask me anything about WordPress Theme Development using the Udemy Panel


17 New Videos, PHP Basics :) if you want to learn WordPress then you should know at least the basics of PHP, and in this course you will find 17 videos that will teach you PHP the right way!


35 new Videos had been added to this course where you will learn how to develop a WordPress Theme using Twitter Bootstrap

Who is the target audience?
  • Don't be afraid to code, i will guide you and help you in all the process :)
  • if you have basic HTML & CSS experience and you want to create dynamic sites, this course is for you!
  • Previous WordPress Theme Development experience isn´t required, i assume this is your first WordPress Theme
  • If you´re trying to Learn Custom Post Types, Custom Fields, Widgets API, create a REAL WORLD PROJECT this course is for YOU!
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 207 Lectures Collapse All 207 Lectures 16:14:39
What we´re going to build in this course
10 Lectures 27:00

Let´s take a look at the very first WordPress Theme that we´re gonna build in this course, hope you´re excited for this one!

Preview 03:13

The Second theme is a most advanced theme, in this video i´m gonna showcase some functionality that this theme has, so you can start developing this kind of websites when you finish this course!

Preview 05:47

Here's the 3rd Project for this Course, it will be a Theme using Twitter Bootstrap

Preview 03:12

Let´s see what you will be capable of doing when you finish this course

Preview 03:51

So this is the video for the Code Snippets, they will help you for a quick answer if you misspelled something in the code or you can compare your code with the one provided in the course. Remember that you can also ask me wherever you want on the Udemy Panel!

About Code Snippets

Are you excited for this course? let´s review the Photoshop Files for the first theme that we´re gonna build!

First Theme - Reviewing the Photoshop Files

In this video let´s review the Photoshop Files for our Second Theme

Second Theme - Reviewing the Photoshop Files

We need some images for this course, let´s review them. If you have your own images, you can use them!

Image Files for this Course

Here´s the link for some of the images that i will be using in this course, credits to the authors and owners of this images, remember that you can use your own images or download this ones. They all share Creative Commons Attribution 2.0 Generic Licence, so this is the links to the original author.

Image Links

Let´s review the tools that you will need for this course, a Local Server, a Code Editor, WordPress and of course Photoshop!

Preview 01:04
PHP: The Basics - Up And Running with PHP
17 Lectures 01:26:11

Let's create our first PHP File

Preview 07:13

Let's see how you can print values with PHP 

Preview 02:53

Creating variables in PHP is really easy, let's see some examples

Creating Variables in PHP

Let's make or code smarter with conditionals in PHP 

Conditionals in PHP

An array is a collection of items, they're really powerful and really easy to create and manage

Arrays in PHP

An Associative Array is more readable than indexed array, let's see some examples!

Associative Arrays in PHP and Concatenation

When working with arrays, var_dump, print_r and pre will be your best friends, let's see some examples

var_dump, print_r and pre in PHP

There're 2 styles when writing PHP Code, PHP in HTML or HTML in PHP


Loops are great and they're everywhere in PHP, let's review the 3 most populars for WordPress development, first the For Loop

For loop in PHP

Loops are great and they're everywhere in PHP, let's review the 3 most populars for WordPress development, let's continue with the foreach loop

The foreach loop

Loops are great and they're everywhere in PHP, let's review the 3 most populars for WordPress development, the last one but most popular in WordPress, the While loop

The While loop

Every language has a lot of built in functions, let's review some of them in PHP

PHP Functions - Standard Functions

If a function doesn't exist, you can create your own, let's see how you can create a function in PHP and then Call It

PHP Functions - User-defined functions

Let's see how you can pass arguments into functions to make them more powerful

PHP Functions - Functions with arguments

In WordPress there're a lot of Template Tags, which are functions that print content, they look magical, but let's recreate a small example of what's behind this Template Tags

Template Tags in PHP and WordPress - Example

Let's review the functions that return values 

PHP Functions - Functions that return values

Yeah, not everyone loves math, but let's see some examples of Math, Numbers and PHP!

Math & Numbers in PHP + Some Examples
Building Our First Theme - A City Blog
3 Lectures 11:08

Let´s see how to install WordPress using MAMP (the process is gonna be the same if you´re using WAMP)

Installing WordPress Locally

The index.php file and the style.css are the minimum that you require to create a theme, let´s do that in this video!

Preview 04:35

The WordPress Theme Hierarchy is your map and best friend for developing themes, it could be a little scare at the first time, but in this course you will learn everything about it

Reviewing the Theme Hierarchy
Working with the template files
21 Lectures 01:19:08

So let´s write our very first loop, the loop is the most important part for a WordPress Theme.

Creating the index.php and the WordPress Loop

So let´s create the header.php file, and i´m gonna show you how to add different header files also!

Creating header.php File

The footer.php is another really common WordPress file, let´s create our footer.php in this video

Creating footer.php File

So let´s create some pages, this way we can have a more realistic environment to create our theme

Creating all our pages to have some data to work with

the page.php file will be applied to all the pages by default, let´s create this file!

Creating page.php

Let´s make some adjustments to our WordPress installation before continue, this way you can see how flexible WordPress is

WordPress Reading Adjustments

In this video we´re going to add a logo to our header.php, this logo will link to the homepage when clicked

Adding our Logo to the Header

So let´s continue adding more files to our theme, in this video let´s add the functions.php file and enqueue our very first stylesheet.

Adding a Stylesheet and Creating functions.php file

Now that our Stylesheet is in place, it´s time to add our very first styles.

Writing our first styles

Let´s create a Dynamic Menu in WordPress, this way ourselves or our clients will have full control

Creating a Menu in WordPress

Now that our menu has been created, it´s time to print it on our theme

Printing the Menu in our Theme

Our menu it´s printed, let´s make some changes and adjustments with CSS

Changing Menu Appeareance with CSS

The sidebar.php is another important file that you can use in your templates, let´s create it

Creating a Sidebar

Widgets are small pieces that you can re use and are really simple to use, also they provide some really advanced functionality, so let´s see how you can make widgetize your theme

Adding a Widget Zone

Now that we have created our Widgets, let´s print them in the theme.

Adding Widgets and Printing them in our Theme

Let´s add some CSS to our widgets, this technique will apply to all the widgets in your WordPress Theme

Changing CSS to Our Sidebar and Widgets

Featured Images are another powerful functions that WordPress provides, let´s see how we can enable them in our themes

Adding a Featured Image

You can create custom sizes to your images in WordPress, let´s learn how to use the add_image_size() function

Introduction to add_image_size() function

Have you changed the size for your images but you already have some images uploaded? dont´t worry, the Regenerate Thumbnails will help you, so this way you don´t have to re-upload all your images again

Regenerate Thumbnails Plugin for Theme Development

Let´s check if an image is already uploaded, this way we can control and show alternative content if no image is uploaded as Featured Image

Checking if a Featured Image Exists and Printing

With our Featured Image in place, let´s add some CSS to change it´s appeareance

Styling Featured Image with CSS
Adding Advanced Functionality to our Website
27 Lectures 02:22:14

Let´s add some post to our Blog so we have some data to make the Queries!

Adding some post to Query in the Blog

If you really want to go further in custom WordPress Development, the WP_Query provides everything you need to Query the WordPress database following the best practices

Writing a Custom Loop with WP_Query

Let´s see other options that the WP_Query function provides, you can Query everything in the WordPress database using this function

More About WP_Query

WordPress provides tags to print the content that we got from the WP_Query, let´s see some of them

WordPress tags for printing content

Let´s add some CSS to our Blog Section, you will learn some advanced techniques in this video !

Styling our Blog with CSS

The single.php file is the template that WordPress provides for the single entry in your blog, let´s create this file!

Building the single.php file

Let´s take a look at some Template Tags that you can use on the single.php file

Template Tags to print content in single.php file

Now that we have printed our Tags in the Single.php it´s time to make some styling with CSS

Styling our single.php file with CSS

You can create different template files based on the category for any entry, let´s create the category.php file

Building the category.php file

In this video, let´s make some adjustments to the Blog Template

Adapting our blog template file

So our Blog and Category Templates are looking great, let´s add some CSS to make them Mobile First!

Going Mobile First with Blog and Category

Let´s see how we can add a Contact Form to our Website

Adding a Contact Form

Now we have our contact form in place, let´s add some CSS to make it look better

Changing Styles to our Contact Form

The front-page.php will be the template for the front of your page, let´s create this file

Creating a front-page.php file

Let´s add a Query to show the latest 2 post in our home page

Printing Latest 2 post in our Home Page

Now we have our latest 2 post in the front page, let´s style them with some CSS

Adding CSS to the latest 2 post

You can also Query Pages to show anywhere you want, let´s Query the About Us Page and show some of it´s content in the Home Page

Querying a Page and showing in front-page.php

If you´re looking for a way to add a JavaScript file to your theme, the best way is to enqueue a new file, in this video i´m gonna show you how.

Adding a JavaScript file to our theme with functions.php

So let´s add a Carousel to our project, following this method you can add ANY JavaScript or Library to your theme

Adding bxSlider to our Project

So let´s add a loop that will show the latest entries from the Blog in the Carousel

Writing the Custom Loop to show latest entries in our Slider

Let´s create a new Widget Zone to the Home Page

Adding a new Widget Zone in the front-page.php

In the previous video we created a widget zone, let´s add some images to them.

Adding Image Widget Plugin

Finally let´s add some CSS to our images in the Widgets for the Home Page

Styling our widget images on front-page.php with CSS

SEO is really really important, let´s write some code to make our website SEO Title Friendly
Creating Dynamic page titles for better SEO

The get_template_part will help you to organize your code better, let´s take a look at it in this video

The get_template_part() function

Following the best practices, adding a Screenshot to our theme is really important, let´s do that in this video

Screenshot to Our Theme

So let´s take a look at our finished theme, i have to say, you have to be really proud to reach this point!

Reviewing the Finished Theme
Building Our Second Theme - A Travel Agency Website
6 Lectures 15:07

Let´s take a look at some of the advantages of using a Starter Theme for WordPress Theme Development

Why use a WordPress Starter Theme?

Before we start, let´s install WordPress, this way we can start in the same place.

Installing WordPress

Let´s Download and Install HTML5 Blank Theme

Downloading and Installing HTML5 Blank Theme

Let´s take a look at HTML5 Blank File Structure, you will see that a lot of the code is already written for us

Getting To Know HTML5 Blank Structure

Let´s review some images for this part of the course.

Image files for this part of the course

Image Links for the Second Part
Preparing our theme for Development
6 Lectures 21:33

The Developer Plugin has a lot of other Plugins that´re really handy for WordPress Development, let´s install it

Installing Developer Plugin

Let´s create all the pages for our website

Adding all the Pages

Let´s make some adjustments to our website, you will see how flexible is WordPress

Making some Reading Adjustments to our WordPress

Let´s create and assing our Menu to our WordPress Site

Creating the Main Menu

Let´s add some CSS to make our Menu look better

Changing CSS to our Menu

In this part of the course we will expand WordPress by installing a Plugin called Advanced Custom Fields

Installing Advanced Custom Fields Plugin
Working with About Us Page
12 Lectures 51:45

Let´s start working with the aboutUs template.

Adding the page-aboutUs.php template

Let´s add and Print a featured image to our website

Adding and Printing a Featured Image

Let´s take a step further with our Featured Image

Advanced Behavior to our Featured Image

Now we have our Feature Image, let´s add some CSS to make it really pop up!

CSS to our Featured Image

Let´s start working with the Advanced Custom Fields Plugin, let´s create our very first fields

Adding fields to About Us

Let´s print those fields in our Theme

Printing the fields in our theme

Let´s check if a field has some information before printing it

Checking if Field Exist before Printing

So let´s create more image sizes, this way we can serve to our users the correct image size when they visit the website

Adding New image Sizes to our About Us Section

Let´s change a little bit our fields, let´s print the ID, this way we have full control !

Printing Image Attachment by ID to have full control

Let´s add some CSS3 to our images, remember that i told you that we have full control? this way we have less code and less pain!

Adding a Polaroid Effect with CSS3 to our Images

Let´s make the final adjustments with CSS to our About Us section

Final CSS Adjustments to the About Us Section

Let´s start creating our own Grid, this way we can make a Mobile First Website!

Building our own Grid with CSS
Working with Tours Section
14 Lectures 01:33:31

Let´s review what´s a custom post type, and how HTML5 Blanks comes with one already created

What´s is a Custom Post Type?

For easy Custom Post Type creation the Custom Post Type UI plugin is the best, let´s install it

Installing Custom Post Type UI Plugin

Now that we successfully installed the Custom Post Type UI plugin, let´s create the Tours Custom Post Type!

Creating Tours Custom Post Type

Let´s see how we can add Fields to our newly created Post Type

Adding Fields with Advanced Custom Fields

So we have our Post Type created and also the fields, let´s populate with some Tours, so we have some data to Query

Adding some Tours to have data to work with

Let´s create a new template for this part, the page-tours.php will hold all our tours!

Creating page-tours.php and assigning to our Tours Page

Let´s query our tours Post Type, this way you can take one step further the WP_Query function!

Writing a Custom Loop to show our Tours

Our Loop is ready, let´s print some of the fields in this video

Printing data in our template

Now that our fields are printed, let´s add some CSS to make our Template look amazing!

Styling the page-tours.php with CSS

Let´s review the WordPress theme Hierarchy and create a single file to show when a user visits any tour

Adding single-tours.php

Let´s write some code to our single tours template

Working with the single-tours.php

Let´s add some CSS to our Single Template for all our tours

Adding CSS to our Single Tour

WordPress provides a gallery functionality that´s really really powerful, let´s take a look at it

Creating a Gallery

Let´s add the Fancybox jQuery Plugin to our Theme

Adding Fancybox library to our Theme
Working with Testimonials Section
6 Lectures 28:36

Let´s create the Testimonials post type for our project

Creating Testimonials Custom Post Type

With our Post type in place, let´s add some fields

Adding fields with Advanced Custom Fields

Everything is almost ready, let´s populate our Testimonials post type with some testimonials so we can create a Query

Adding some Testimonials to have data to work with

Let´s create the template for our testimonials

Adding page-testimonials.php

Let´s write a custom loop and print all the fields for our newly created template !

Writing a Custom Loop and Printing the Fields

Now that we have our fields and information printed in our template, let´s add some CSS to make it look amazing!

Styling Testimonials with CSS
6 More Sections
About the Instructor
Juan Pablo De la torre Valdez
4.6 Average rating
1,481 Reviews
5,430 Students
15 Courses
Freelance Web Developer and Owner of Easy-WebDev

My name is Juan Pablo De la torre Valdez, i´m from Guadalajara. Mexico.
For the last 10 years i been working with the web, i have a lot of experience in modern Web Technologies such as Foundation, Bootstrap, RWD, WordPress, Drupal, PHP, JavaScript & jQuery, HTML5, CSS3, SASS and Photoshop.

I started a company called CreativaWeb where i design and develop WordPress based websites.

I really like to design and develop websites, in the recent years i made hundreds of websites for Government, Universities, Startups and Medium-Size Companies from my city, the whole country and  from another countries.


Soy diseñador y programador web desde hace más de 10 años, tengo amplia experiencia y trabajo diariamente con tecnologías como Foundation,  Bootstrap, WordPress, Drupal, PHP,JavaScript y jQuery, HTML5, CSS3, SASS y Photoshop.

Comencé una compañia llamada CreativaWeb, donde principalmente diseño y desarrollo sitios web en WordPress.

Me gusta combinar mi trabajo en diseño y programación; en los años anteriores he hecho cientos de páginas para dependencias del Gobierno, Universidades, Pequeños y Medianos de negocios de mi ciudad, a nivel nacional y de otros países.