Professional WordPress Theme Development For 2016

First, we learn the concepts behind Wordpress theming. Then, students will create a simple theme from scratch.
3.6 (80 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,089 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 94
  • Length 8 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
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 5/2015 English

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

What are the requirements?

  • Students who know HTML and CSS
  • Basic understanding of WordPress
  • Basic knowledge of PHP or a desire to learn basic PHP coding

What am I going to get from this course?

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

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

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: Jumping Right Into Developing Advanced Themes
01:29

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
About The Practice Exercises In This Course
Preview
Article
01:52

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.

09:09

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.

Section 2: Developing, Styling Child Themes and Overriding Their Parent Themes
01:10

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

09:35

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.

04:04

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

01:34

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.

Review Slides: Child Themes with CSS and Functions.PHP
Preview
4 pages
6 questions

Test your knowledge about child themes...

Exercise: Download any theme from the WP theme repository. Create a child theme.
Preview
Article
Section 3: Theme Development Topics That Will Make You a Powerful Developer!
00:52

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.

Article

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

05:19

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

09: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
4 questions

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

05:50

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

04:39

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

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.

03:50

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.

4 pages

Learn how to theme category pages in four simple slides.

12:37

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.

Calling Your Custom Menus
02:47
Exercise: Write Your Own Functions.php file
Preview
Article
Exercise: Write Two Shortcodes
Preview
Article
9 questions

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

Section 4: Display Posts And Pages: Examples of Popular Wordpress Lists
Limiting The Number of Posts That Display In A List With WP_QUERY
02:01
Article

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.
04:42

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.

Article

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.

03:34

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.

Article

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

Displaying Posts from One or Multiple Authors With WP_QUERY
04:15
Section 5: Beginner's Theme: Create A Very Simple Plain Vanilla Basic Theme From Scratch
Before you begin, please read this first...
Article
A Preview of What Our Finished Theme Will Look Like At The End of This Section
01:00
02:48

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

IMPORTANT NOTE: Please Read...This section is not about HTML or CSS.
Preview
Article
Important Note About File Resources For Our Simple Theme
Article
01:03

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.

01:48

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.

01:14

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.

Putting Real HTML Into Your Theme
02:23
02:24

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

02:57

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

01:28

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

Add Post Content
06:04
06:10

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

01:16

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.

02:01

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.

12:57

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.

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

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.

Theming Your Category Page
07:07
07:33

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.

10:03

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.

07:37

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.

From The Instructor: Conclusion To "Create Your Own Theme"
01:28
Download the Plain Vanilla Basic Theme Here
Article
10 questions

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

Section 6: Transforming a Static Twitter Bootstrap Website Into a Complete WordPress Theme
Article

Start here and download all of the Twitter Bootstrap files.

00:38

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.

Copying Your Twitter Bootstrap Website Over To Your WordPress Theme Directory
01:34
Preparing Your Twitter Bootstrap's Style.CSS file To Declare Your Theme To WP
Preview
02:53
03:25

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
Activating Our Theme and Fixing Our CSS Files With WordPress' Bloginfo Function
02:38
13:53

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.

11:43

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.

14:07

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.

13:12

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,

13:17

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.
13:35

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.

04:33

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.

16:53

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.

11:58

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

12:36

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

12:46

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

14:10

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.

07:55

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.

14:35

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.

Article

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.

Article

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

10 questions

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

Project: Create a functioning theme from any static Twitter Bootstrap website
Preview
Article
Section 7: Adding Theme Support in WordPress' Appearance Menu
01:26

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.

05:27

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.

08:21

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.

05:54

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.

02:11

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.

06:15

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.

Section 8: The 2 powerful Theme WordPress APIs: The Customizer & the Modification API

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Bruce Chamoff, 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!

Ready to start learning?
Take This Course