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 (61 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.
404 students enrolled
$19
$95
80% off
Take This Course
  • Lectures 206
  • Length 16 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

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

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

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

What 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.

Curriculum

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

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!

05:47

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!

03:12

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

03:51

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

01:44

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!

02:53

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

03:52

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

01:10

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

Article

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.

01:04

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

Let's create our first PHP File


02:53

Let's see how you can print values with PHP 

03:57

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

06:33

Let's make or code smarter with conditionals in PHP 

06:14

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

03:48

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

03:59

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

02:50

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

04:26

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

03:44

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

03:20

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

06:37

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

03:46

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

03:17

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

03:59

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

06:42

Let's review the functions that return values 

12:53

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

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

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!

01:58

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

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

04:09

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

04:04

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

01:10

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

03:45

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

01:20

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

04:41

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

04:20

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.

04:49

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

02:53

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

03:21

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

08:50

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

02:44

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

05:37

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

03:01

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

07:38

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

01:39

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

02:37

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

02:24

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

02:30

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

03:56

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

Section 5: Adding Advanced Functionality to our Website
03:59

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

06:42

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

04:01

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

08:36

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

14:02

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

01:45

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

06:57

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

05:58

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

09:00

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

04:56

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

01:23

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

04:49

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

12:24

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

02:56

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

06:38

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

06:09

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

04:55

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

05:19

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.

03:41

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

05:04

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

01:28

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

03:37

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

06:01

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

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

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

03:08

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

01:36

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

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

02:56

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

02:40

Let´s Download and Install HTML5 Blank Theme

04:26

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

01:17

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

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

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

01:12

Let´s create all the pages for our website

00:47

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

02:12

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

12:16

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

02:02

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

Let´s start working with the aboutUs template.

01:40

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