Professional WordPress Theme Development For 2017
4.5 (101 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.
3,181 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Professional WordPress Theme Development For 2017 to your Wishlist.

Add to Wishlist

Professional WordPress Theme Development For 2017

First, we learn the concepts behind Wordpress theming. Then, students will create a simple theme from scratch.
4.5 (101 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.
3,181 students enrolled
Created by Bruce Chamoff
Last updated 7/2016
English
Current price: $10 Original price: $20 Discount: 50% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 8 hours on-demand video
  • 16 Articles
  • 11 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create powerful Wordpress themes using modern Wordpress development methodologies.
  • Learn the Wordpress API hooks that helps your theme offer more features and benefits to Wordpress users and administrators.
  • Create themes that offer theme support for custom headers, backgrounds, post formats, title tags and more.
  • Add sections, textboxes, color pickers, file uploads and more programming the WordPress customizer.
  • Create a fully functional WordPress theme from scratch.
  • Transform a static Twitter Bootstrap website into a dynamic WordPress theme.
View Curriculum
Requirements
  • Students who know HTML and CSS
  • Basic understanding of WordPress
  • Basic knowledge of PHP or a desire to learn basic PHP coding
Description

This course is for any Wordpress user or web developer who would like to learn how to create powerful Wordpress themes and add development skills to their resume.

If you already have basic WordPress skills and wanted to know how themes are developed, then this is the perfect course for you. This course will super-size your WP skills and make you a powerful theme developer.

Become a confident WordPress theme developer and learn real WordPress theme coding here! This course contains no outside links to coding sites. All the code you need to learn is in this course. The instructor uses this code with every WordPress theme and has built over 300 WordPress themes for clients and employers.

BONUS: FREE CODE TO FULLY FUNCTIONAL 2 WORDPRESS THEMES:

All students get two themes to customize with the code from this course:
1. plain vanilla WordPress theme
2. Twitter Bootstrap WordPress theme

This course delves more into these theme development concepts with all the code you need to download and make it your own:

  1. Creating your own template tags and calling them in your theme PHP files
  2. Shortcodes
  3. Page Templates
  4. Displaying custom field data in your templates
  5. Child themes
  6. Adding Theme Support including custom headers, backgrounds, post formats, HTML title tags and more
  7. Developing your own template tags
  8. Creating your own API hooks and calling them in any PHP file of your theme.
  9. Registering and calling dynamic sidebars
  10. Detailed menus and their menu locations
  11. The 2 WordPress Theme APIs: The "Customizer" (Theme Customization API) and the Theme Modification API

An entire section of lectures showing how to display posts and pages of various combinations.

This course offers an entire section teaching how to displaying posts and pages in any combination including, but not limited to:

  1. post status (published, private, revision, etc)
  2. by author
  3. password protected
  4. by custom post type
  5. by a specific modified or published date
  6. list of featured images from posts
  7. cutting off the list of posts and pages by a certain number
  8. Displaying posts and pages in a specific order by any field

Bonus Lectures With Examples

I offer code samples from popular post lists including:



  1. latest blog posts
  2. most recent pages
  3. today's posts
  4. random lists of posts
  5. posts and pages by all authors
  6. posts and pages by a specific post type


Materials in this Course:

This course includes videos with example code as well as additional code files to download the code so students can concentrate using the code in their WordPress theme files, but the videos will show how to modify the code to create the final Wordpress website.

Course Structure:

This course offers videos with the instructor explaining how to use and change the code as needed.

Who is the target audience?
  • This is not a HTML or CSS course, but does include some HTML and CSS as needed to create themes, but the student will already have a knowledge of these technologies.
  • This course is for any web developer who has a basic knowledge of PHP and HTML, but who would like to learn how to create powerful Wordpress themes.
  • For web designers who know Twitter Bootstrap and would like to take that knowledge and add WordPress themes to their skill set.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
94 Lectures
08:10:55
+
Jumping Right Into Developing Advanced Themes
4 Lectures 12:49

Wordpress is the most popular content management system and web development application. Themes are the feature of Wordpress that defines the look and layout. Developing themes in Wordpress is a valuable tool, but will define the difference between a Wordpress user and a Wordpress developer.

In this course, we teach how to develop everything a theme needs from the following:

  • The anatomy of a theme
  • Creating child themes
  • Defining menus and custom menu locations
  • Displaying custom fields
  • Custom page templates
  • Template tags
  • Displaying posts and pages by one or multiple authors
  • Registering sidebars for widgets
  • Creating shortcodes
  • Show links to password-protected web pages to create paid content for your members
  • and more
Preview 01:29


There are popular ways to develop Wordpress themes. You may be only familiar with one, but different situations and different skill sets may call for the method that you are not familiar with and it could make your theme development time easier.

In this video, I explain those two methods, so you can decide on the best one that is right for your skill set or particular development goals.

Preview 01:52

There are several ways to display post and page content on Wordpress themes, but WP_QUERY is the most powerful and versatile. Join me in this lecture as I introduce you to the most widely used Wordpress theme function with examples. Concurrent lectures in this course include more uses of this function.

Coding Lecture: How To Display Posts and Pages with WP_Query: The Basics
09:09
+
Developing, Styling Child Themes and Overriding Their Parent Themes
6 Lectures 16:35

In this video, I introduce the benefits on using Child Themes.

Introduction: The Benefits Of Child Themes
01:10

Child themes are important for anyone who downloads themes from a theme provider or the Wordpress theme repository. Child themes, however, are one of the most misunderstood features of Wordpress. This lecture will demystify child themes and explain why they are so important to create.

What Is A Child Theme?
09:35

Child themes require their own CSS, but the CSS is also used to tell Wordpress that your theme is a definitely child of another.

Expanding Your Child Theme With CSS
04:04

From the previous video, this is an update for 2016 and WordPress 4.5+. You can load your child theme's CSS with the code in this video. Please open the file included with the wp_enqueue_scripts action hook in the Resources section and watch this video to see exactly how to add the hook.

New Green Screen Video: UPDATE - Load Your Child Theme's CSS
01:34


Test your knowledge about child themes...

Child Theme Review Quiz
6 questions

+
Theme Development Topics That Will Make You a Powerful Developer!
13 Lectures 49:07

I have found that many theme developers use the same page template for all of their templates, but maybe you have a particular page that needs a different look and layout. A different page template is your answer.

In this template, I not only explain how to create new page templates, but also how to select them when editing pages.

Preview 00:52

Page templates make your Wordpress theme more versatile by extending any page layout with their own CSS, HTML and PHP code.

Preview 00:16

This lecture explains how to code page templates and where to store them in your theme.

Coding Lecture: How To Create a Custom Page Template For Any Wordpress Page
05:19

The functions.php file is the most powerful file in any Wordpress theme. Knowing what the functions.php file can do and realizing it as more than just another functions library, you can add all sorts of functionality to make super-size your theme.


In this video lecture, I show you how to add two things to your functions.php file:

  1. template tags
  2. Wordpress API hooks used by your theme
The basics of FUNCTIONS.PHP
09:19

The functions.php file is the most important file in any theme. Knowing the answers to this quiz will allow you to review the purpose of the function.php

Review Quiz for the functions.php file
4 questions

Shortcodes are Wordpress codes surrounded by square brackets. In this video, I explain how to create them and call them from your theme.

Creating Your Own Custom Shortcodes
05:50

Template tags are PHP functions that can be called anywhere in your theme. Wordpress provides over 50, but as a developer, your advanced theme will be even more powerful when you create your own.

In this video, I explain:

  1. how to create them
  2. where to store them
  3. how to call them from your theme
Creating and Calling Your Own Custom Template Tags
04:39

All Wordpress themes are capable of coming with sidebars, but some basic themes do not include theme. Adding sidebars will make your themes more powerful and allow admins to add widgets to their pages and posts.

Creating and Registering New Sidebars With Your Theme
03:05

Sidebars add an extra section to any web page. A theme needs code to call the widgets that were registered in the previous video and then you can code them any way you would like in your HTML and/or PHP.

Calling Your Dynamic Sidebars
03:50

Learn how to theme category pages in four simple slides.

Preview 4 pages

Most WordPress themes come with only 2 to 4 menu locations, but the number of menu locations are unlimited.The WordPress admin needs plenty of menu locations for their menu, so in this video, I show you how to your theme can register them.

Creating and Registering Menu Locations Anywhere In Your Theme
12:37

Calling Your Custom Menus
02:47



Based on the Power Development section, this quiz will reinforce the videos from the videos above.

Power Theme Developer Quiz: How Powerful are YOU? Results of this Quiz Will Tell
9 questions
+
Display Posts And Pages: Examples of Popular Wordpress Lists
7 Lectures 15:20
Limiting The Number of Posts That Display In A List With WP_QUERY
02:01

Did you ever wonder how to display one random post? Why would you want to do this? First of all, it varies the content which is good for SEO, but it also keeps your repeat site visitors seeing new content all the time just by refreshing their web browser.

This code response to the previous video "Limiting the number of posts...".

Add this code to the following places:

  • WordPress plugin
  • Your theme's functions.php
  • Your theme's sidebar.php
  • Any page template.
Code Sample: Display one post as a random post.
00:22

Sometimes, the Wordpress admin may want to show only password-protected web pages. This is good for member-only links or paid posts that are protected behind a member area. This video will show you how to display only those pages in your sodebar.

Showing Password-Protected Posts With WP_QUERY
04:42

This code sample corresponds to the previous video "Showing Password-Protected Posts with WP_QUERY".

You may ask "Hmmm, why would I want to display password-protected posts"? Maybe you have a paid member area or even if you have a free member area, you still want to encourage your website visitors to sign up for your website or to subscribe to your blog. Well, this code is surely one way to make people sign up for your website.

Note in the code: The magic here is the boolean value for has_password as in 'has_password' => true which is a line in your $args array.

Code Sample: Display Online Password-Protected Posts
00:14

Most Wordpress themes like TwentyFifteen and TwentyFourteen come with a default home page to display the latest blog posts, but your theme also needs to provide that, so this lecture will show you how to code for this.

Displaying the 5 Latest Blog Posts in your theme's Sidebar
03:34

If your Wordpress website is actually a blog or it has a blog, you may want to put those latest posts in a sidebar, template tag or even a shortcode. Here is the code to do just that.

This corresponds to the previous video titled "Displaying the 5 Latest Blog Posts in your theme's Sidebar".

Code Sample: Show The 5 Latest Blog Posts
00:11

Displaying Posts from One or Multiple Authors With WP_QUERY
04:15
+
Beginner's Theme: Create A Very Simple Plain Vanilla Basic Theme From Scratch
28 Lectures 02:04:43
Before you begin, please read this first...
00:34

A Preview of What Our Finished Theme Will Look Like At The End of This Section
01:00

Every WordPress theme starts with a style.css file. Besides providing CSS, the style.css file also declares the theme to the WordPress installation.

Preview 02:48


Important Note About File Resources For Our Simple Theme
00:12

This file will complete your theme and make it presentable in the WordPress theme selector. Although it will not display anything yet, it can still be selected. Once you have this file and your style.css, your theme is ready to go and be developed by you.

Adding your main theme file
01:03

Although this file is not necessary for a complete theme, it is advised to include one with your theme so it can easily be identified in the theme selector page.

Creating Your Theme's Screenshot So It Can be Selected By The WordPress Admin
01:48

The information in the style.css file shows in the theme details on the theme selector page. I will show you in this video how changing your style.css changes the theme details on the fly.

Viewing Your Theme Details in the Theme Selector
01:14

Putting Real HTML Into Your Theme
02:23

We have added the header file and can now add any HTML or PHP to it. It will all reflect the theme's output.

Adding Your Theme's Header
02:24

In this video, we follow the same steps as we did to add the header.

Adding the Sidebar and Footer.
02:57

We add the file location to the style.css using the bloginfo() template tag.

Connecting Your Theme's Style.CSS file using the Bloginfo() Template Tag
01:28

Add Post Content
06:04

In this video, I will show you how to create the web page that displays for any WordPress post.

Creating the Single Post Page For Your Theme
06:10

I talk to a lot of new WordPress theme developers who mention that their first theme does not display the admin black bar. Watch this video to find out how to fix this common issue.

Adding the Black Admin Bar To the Top of Your Theme
01:16

This video covers the files that we need to create and edit to handle and display WordPress pages. The video only covers setting up the default page template. In the next video, we create multiple page templates and show how to change them or each page.

Creating the Default Page Template For Our Theme To Handle WordPress Pages
02:01

In the last video, I covered setting up the default page template. In THIS next video, we create multiple page templates and show how to change them or each page.

Creating Multiple Page Templates For Your Theme
12:57

Adding Menu Support in Your Theme
01:39

Adding Multiple Theme Locations for Your Menus
04:57

Creating Menus and Calling Those Menus in Our Theme Locations
13:23

Adding a Category List To Your Sidebar or Anywhere in Your Theme
06:42

In the last video, we showed how to add a category list, but as a request from one of our students, I added a new video on breaking that category list into two columns. This video has the details and coding to accomplish this task.

Breaking Your Category List Into 2 Columns
17:07

Theming Your Category Page
07:07

Tag clouds allow admins to group posts in different ways other than categories. The tag cloud is a list of keywords that link to a page of all the posts that are assigned to those tags.

Adding A WordPress Tag Cloud To Your Theme
07:33

WordPress provides defaults out of the box for our tag cloud, but we may want to change its appearance and the links within them. In this video, I teach you just how to do that.

Changing the Defaults for Your Tag Cloud
10:03

Once we get up our tag cloud, we need a template to display the items when a site visitor clicks on their hyperlinks, so I teach you how to create the tag template in this video.

Theming Our Tag Page
07:37

From The Instructor: Conclusion To "Create Your Own Theme"
01:28

Download the Plain Vanilla Basic Theme Here
00:04

Now that we know how to create a theme from scratch, take this quiz to see how much you know.

Theme From Scratch Quiz
10 questions
+
Transforming a Static Twitter Bootstrap Website Into a Complete WordPress Theme
23 Lectures 03:09:07

Start here and download all of the Twitter Bootstrap files.

Download The Static Twitter Bootstrap Website Here
00:11

Welcome to this section on transforming a static Twitter Bootstrap website into a complete WordPress theme. In this section, I show you how to replace static HTML and text content with code from the WordPress API while reviewing some of my lessons from the previous section.

Preview 00:38

Copying Your Twitter Bootstrap Website Over To Your WordPress Theme Directory
01:34


Every theme should come with a screenshot to let the administrator know what your theme looks like. Your theme's screenshot is also a brand, so in this video, I show you:

  1. how to create one
  2. what to name it
  3. where to upload it so it shows in your theme selector
Preview 03:25

Activating Our Theme and Fixing Our CSS Files With WordPress' Bloginfo Function
02:38

We will try not to leave any stone unturned for any static HTML. We want our theme to just display content entered by our WordPress admin, so we enter our static About Us section as a WordPress page and call that page content in our theme. We then delete the static content.

Replacing Static HTML with PHP From The WordPress API To Create Dynamic Pages
13:53

In our previous video, we had a broken image next to our About Section. That is because once it is under WordPress, the URLs change. We need to be able display this image, so I enter it as a featured image and show you how to retrieve it on the home page.

Replacing the Static Thumbnail HTML With Your Page's Featured Image
11:43

We need to display the tabs in the social media tab section of our Twitter Bootstrap website. As there are many ways to accomplish this, I suggest entering these tabs (and their content) as WordPress posts all assigned to a single category.


We then use WP_Query to display those posts which will be the heading for each of our social media tabs.

Creating Our Tab Titles As WordPress Posts From a Single Category
14:07

In this video, we loop through the posts that will create our tabs and add some custom fields to order the tabs any way we want. This video covers wp_query, post meta data and extra PHP to make it all happen,

Programmatically Ordering Our Static HTML Tabs By WordPress Custom Fields
13:12

The Social Media tabs are a feature of Twitter Bootstrap and some hard-coded tab names.

In this video, I teach you to:

  1. Programmatically select posts from a specific category, in this case "Video Tutorial".
  2. Display tabs for every post assigned to that category.
  3. Display the tabs in random order.
Adding the Post Content To Our Tab Sections
13:17

Our Twitter Bootstrap theme has a section which includes three subsections or children. In this video, I teach you how to call the children pages from the parent with a trick using WP_Query.

Theming a Section Using Post Parents
13:35

The login form is a simple HTML form, but we do not want that hard-coded in our template, so I move the entire form into a template tag and call it from within the template.

Adding the Login Form Using Template Tags in functions.php
04:33

If you notice at the top of our theme, we can 3 lines which are the company name, company slogan, and the marketing line.

In this video, I explain how to draw those three lines from your Settings->General form as well as a textbox in the Customizer for the marketing line.

Making Company Name & Slogans Content Manageable w/the Customizer & Bloginfo()
16:53

We have a hard-coded section called Additional Services. We want to make it content-managed. This video shows you how to do that.

Making the Additional Services Section Content Manageable
11:58

So far, our theme is mostly index.php, so in this video, I break it up into other common theme files.

Breaking Our Twitter Bootstrap Theme Into Individual Theme Files
12:36

Our menus are still hard-coded, so in this video, I explain how to turn our hard-coded menus into dynamic ones that get pulled from the WordPress back end,.

Adding Our Dynamic Menu Into Our Twitter Bootstrap Theme
12:46

We hard-coded the section 2 as ID 128, but the WordPress admin or your own WordPress installation will have different page IDs, so we cannot hard code IDs like that.


In this video, I show you how to program the Customizer to display page IDs that the WordPress administrator can select to display in Section 2. Still, this is only part 1 since administrators do not know what pages will display with certain IDs, so in the NEXT video, I show you how to display page titles to the administrator so they can select any page from the menu.

Removing ID 128 From Section 2 & Coding The Customizer to Select a Page - Part 1
14:10

In the last video, Part 1, I showed you how to program the Customizer to display page IDs that the WordPress administrator can select to display in Section 2.


In this video, I show you how to display page titles to the administrator so they can select any page from the menu.

Removing ID 128 From Section 2 & Coding The Customizer to Select a Page - Part 2
07:55

Ok, you may have noticed the 3 background images. We could simply add a custom background control, but the problem is that we need three of them, so the custom background will not work.


Instead, we will add 3 upload controls to the customizer using the WordPress theme API and I show you how to do that in less than 15 minutes in this video.

Changing the 3 Background Images using the WordPress Theme Customization API.
14:35

Here's the theme after all of these videos. Download this theme in the resources and then read the text to find out how to further customize it for YOUR WordPress installation.

For any questions, you are never alone. Ask me any questions on the discussion board.

Download This Twitter Bootstrap WordPress Theme
01:12

This quiz contains questions from this section on converting a WordPress theme from a Twitter Bootstrap website.

Preview 00:30

Ttest your knowledge of the WordPress theme development for Twitter Bootstrap.

Twitter Bootstrap Theme Development Quiz
10 questions

+
Adding Theme Support in WordPress' Appearance Menu
6 Lectures 29:34

You may have selected themes that give the WordPress admin options to add post formats, custom headers, custom menus, backgrounds and more. Well, the videos in this section explain just how to accomplish this task and more.

Introduction To Theme Support
01:26

With newer versions of WordPress, version 4,1 and newer, the HTML title tag can now be supported to allow the theme developer to exercise more control over what WordPress generates for it.

Adding Theme Support For The HTML Title Tag
05:27

In the last video, I showed you how to add theme support for custom headers. Now, we need to add the PHP code to call them.

Calling and Displaying Our Custom Headers and Their Associated HTML Attributes
08:21

In this video, I explain how to add theme support for custom headers as well as adding guidelines for the admin user such as the suggested width and height of your header image.

Adding Theme Support for Custom Headers
05:54

In this mashup, I include my video on how to add theme support for post formats and upload a presentation explaining the 10 different post formats.

Adding Theme Support for Post Formats
02:11

Not all themes support the featured image, but yours can. Watch this video to see how to add theme support for this popular post feature.

Adding Theme Support For Post Thumbnails (The Featured Image)
06:15
+
The 2 powerful Theme WordPress APIs: The Customizer & the Modification API
6 Lectures 41:31

In addition to its 10+ APIs, WordPress has 2 theme APIs. I provide an introduction in this video.

Preview 02:24

This is a very simple API solution from WordPress to help us save and retrieve theme variables.

The Theme Modification API
09:11

I extended the last video to explain the PHP behind the foreach loop and how it displays all of your theme modification settings.

Extracting All Your Theme Modification Settings
03:14

The WordPress Theme Customization API is powerful, but complex, so this is the first part in a series of videos on this API.

Introduction to the WordPress Theme Customization API
04:20

Now, we get into the heart of the code for this API and create a new section with a color picker for your web page background.

Coding Theme Customization Part 2
15:41

Using the functions from the Theme Modification API, we can retrieve data from the Theme Customization API.

Theme Customization API Part 3: Retrieving and Displaying Your Variables Set Up
06:41
+
Conclusion
1 Lecture 00:00
Bonus Lecture: Coupons For My Other WP Courses & Websites For Web Developers
1 page
About the Instructor
Bruce Chamoff
3.9 Average rating
754 Reviews
20,311 Students
11 Courses
Web Developer of 20 Years and Songwriter of Over 40 Years

CEO of the Web Designer Mall, a one-stop shop for all web designers and web developers.

I have designed and developed over 1,000 websites in the past 20 years for companies of all sizes from small businesses to major Fortune 500 corporations. Being the owner of a prestigious online mall for web developers, I have programmed everything from WordPress to Drupal to Joomla to simple HTML5.

Involved in the WordPress Community. I am also a speaker at WordCamps in the United States. 

The Music, The Songwriting

I love writing, recording, and producing music, mainly my own originals. I play sax and piano and have over 150 songs. Yes, I should have gone for that record deal, but I still enjoy the process of making music!