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.5 (84 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.
601 students enrolled
95% off
Coupon valid until Mar 1, 2017 7:59 AM UTC
Take This Course
  • Lectures 207
  • Length 16.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


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

About This Course

Published 10/2015 English

Course Description

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

What are the requirements?

  • 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

What am I going to get from this course?

  • 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

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!

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.


Section 1: What we´re going to build in this course

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!


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!


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


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


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!


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


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


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


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.


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

Section 2: PHP: The Basics - Up And Running with PHP

Let's create our first PHP File


Let's see how you can print values with PHP 


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


Let's make or code smarter with conditionals in PHP 


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


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


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


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


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


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


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


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


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


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


Let's review the functions that return values 


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

Section 3: Building Our First Theme - A City Blog

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


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!


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

Section 4: Working with the template files

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


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


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


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


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


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


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


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.


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


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


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


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


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


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


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


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


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


You can create custom sizes to your images in WordPress, let´s learn how to use the 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


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


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

Section 5: Adding Advanced Functionality to our Website

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


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


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


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


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


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


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


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


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


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


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


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


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


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


Let´s add a Query to show the 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


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


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.


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


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


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


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


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

SEO is really really important, let´s write some code to make our website SEO Title Friendly

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


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


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

Section 6: Building Our Second Theme - A Travel Agency Website

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


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


Let´s Download and Install 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


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

Image Links for the Second Part
Section 7: Preparing our theme for Development

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


Let´s create all the pages for our website


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


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


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


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

Section 8: Working with About Us Page

Let´s start working with the aboutUs template.


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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Juan Pablo De la torre Valdez, 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.

Ready to start learning?
Take This Course