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
English
Current price: $10 Original price: $195 Discount: 95% off
9 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 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
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
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

COURSE UPDATE DECEMBER 2016:

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!

COURSE UPDATE AUGUST 2016:

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
01:44

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
02:53

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

Second Theme - Reviewing the Photoshop Files
03:52

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
01:10

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
00:14

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
03:57

Let's make or code smarter with conditionals in PHP 

Conditionals in PHP
06:33

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

Arrays in PHP
06:14

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

Associative Arrays in PHP and Concatenation
03:48

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
03:59

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

PHP in HTML or HTML in PHP?
02:50

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
04:26

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
03:44

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
03:20

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

PHP Functions - Standard Functions
06:37

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
03:46

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

PHP Functions - Functions with arguments
03:17

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
03:59

Let's review the functions that return values 

PHP Functions - Functions that return values
06:42

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

Math & Numbers in PHP + Some Examples
12:53
+
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
04:35

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
01:58
+
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
03:40

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
04:09

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

Creating footer.php File
04:04

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
01:10

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

Creating page.php
03:45

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

WordPress Reading Adjustments
01:20

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
04:41

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
04:20

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

Writing our first styles
04:49

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

Creating a Menu in WordPress
02:53

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

Printing the Menu in our Theme
03:21

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

Changing Menu Appeareance with CSS
08:50

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

Creating a Sidebar
02:44

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
05:37

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

Adding Widgets and Printing them in our Theme
03:01

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
07:38

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

Adding a Featured Image
01:39

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
02:37

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
02:24

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
02:30

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

Styling Featured Image with CSS
03:56
+
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
03:59

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
06:42

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
04:01

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
08:36

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

Styling our Blog with CSS
14:02

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
01:45

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
06:57

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
05:58

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
09:00

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

Adapting our blog template file
04:56

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
01:23

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

Adding a Contact Form
04:49

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

Changing Styles to our Contact Form
12:24

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
02:56

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

Printing Latest 2 post in our Home Page
06:38

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
06:09

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
04:55

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
05:19

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
03:41

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
05:04

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

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

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

Adding Image Widget Plugin
03:37

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
06:01

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

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
03:55

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

Screenshot to Our Theme
03:08

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
01:36
+
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?
03:05

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

Installing WordPress
02:56

Let´s Download and Install HTML5 Blank Theme

Downloading and Installing HTML5 Blank Theme
02:40

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
04:26

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

Image files for this part of the course
01:17

Image Links for the Second Part
00:43
+
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
03:04

Let´s create all the pages for our website

Adding all the Pages
01:12

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

Making some Reading Adjustments to our WordPress
00:47

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

Creating the Main Menu
02:12

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

Changing CSS to our Menu
12:16

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

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

Let´s start working with the aboutUs template.

Adding the page-aboutUs.php template
02:56

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

Adding and Printing a Featured Image
01:40

Let´s take a step further with our Featured Image

Advanced Behavior to our Featured Image
04:15

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

CSS to our Featured Image
04:12

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

Adding fields to About Us
05:56

Let´s print those fields in our Theme

Printing the fields in our theme
02:03

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

Checking if Field Exist before Printing
05:04

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
01:33

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
06:27

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
05:59

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

Final CSS Adjustments to the About Us Section
05:18

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

Building our own Grid with CSS
06:22
+
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?
02:58

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
01:18

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

Creating Tours Custom Post Type
03:12

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

Adding Fields with Advanced Custom Fields
07:03

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
06:44

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
02:37

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
03:25

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

Printing data in our template
10:49

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

Styling the page-tours.php with CSS
12:00

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

Adding single-tours.php
03:13

Let´s write some code to our single tours template

Working with the single-tours.php
08:53

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

Adding CSS to our Single Tour
12:18

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

Creating a Gallery
02:49

Let´s add the Fancybox jQuery Plugin to our Theme

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

Let´s create the Testimonials post type for our project

Creating Testimonials Custom Post Type
03:08

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

Adding fields with Advanced Custom Fields
02:26

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
01:57

Let´s create the template for our testimonials

Adding page-testimonials.php
02:18

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

Writing a Custom Loop and Printing the Fields
04:42

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
14:05
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.