Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Create Custom Wordpress Themes From Scratch to your Wishlist.

Add to Wishlist

Create Custom Wordpress Themes From Scratch

Learn how to develop your own Wordpress themes from scratch or from an existing html site
3.7 (103 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.
6,411 students enrolled
Created by Josiah Mann
Last updated 10/2014
30-Day Money-Back Guarantee
  • 5.5 hours on-demand video
  • 1 Article
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
Create their own fully functional custom Wordpress themes from scratch.
Create Custom Page Templates
Add Dynamic Navigation Menus
Create and Customize a Blog
Add Dynamic Widget Areas
Add Logo Upload Functionality To Theme
Use Custom Fields to Build User Friendly Themes
View Curriculum
  • HTML and CSS
  • Computer
  • Hosting

This course will teach anyone with a knowledge of HTML/CSS and a basic knowledge of Wordpress to develop your own custom Wordpress themes from scratch. This will also allow you to take existing sites and move them to Wordpress with ease!

You'll learn by immersion with two projects - one very basic theme and one more advanced theme.

By the end of the course you'll know how to

  • Create Custom Page Templates
  • Use Custom Fields To Make A User-Friendly Front End
  • Create Custom Post Types
  • Add Dynamic Wordpress Navigation Menus
  • Add a Logo
  • Add Dynamic Page Content
  • Add Widget Areas

Also included at the end of the course are 2 FREE Bonuses to help extend your training.

Bonus #1 is a basic PHP Course so you can really master all of the Wordpress Functions

Bonus #2 is an in-depth Wordpress Tutorial video course that teaches you nearly every possible function and trick in the Wordpress front-end.

So what are you waiting for? Get Started Now and make sure to shoot Jon and I (Josiah) any question you have along the way:)

Who is the target audience?
  • This course is meant for those who know HTML and CSS and preferably some working knowledge of Wordpress.
  • This course isn't meant for those without basic HTML/CSS skill.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 49 Lectures Collapse All 49 Lectures 06:10:02
1 Lecture 03:08

This lecture is a basic introduction to our course. We go over all the take-aways we want for you by the end of this course.

Preview 03:08
Wordpress 101
9 Lectures 38:11

This lecture is a basic description of how to install Wordpress using a typical cPanel interface. If your hosting plan doesn't offer cPanel, look up something like "How to install Wordpress on [your host]" in google and you will find the answer:)

If you haven't purchased a hosting plan yet, as a web professional you will inevitably have to and it makes sense to start with a shared hosting plan that alllows you to have add-on domains (this allows you to host as many domains as you want on one site).

I recommend the SiteGround's "Grow Big" plan for $7.95 a month or HostGator's basic shared hosting.

Installing Wordpress

A brief description of the Wordpress Posts area.


A brief description of the Wordpress Pages area.


A quick look at the Wordpress Themes, Customize, and Widget tabs

Themes, Customizer, and Widgets

A quick look at Wordpress Widgets.


A quick overview of the Wordpress Editor tab.


A short overview at Wordpress plugins.


An overview of the Wordpress User tab.


An overview of Wordpress settings.

Build Your First Wordpress Theme
11 Lectures 01:03:56

In this first part of the theme we create a theme folder and the three basic theme files that Wordpress requires for all valid themes:

  • index.php
  • functions.php
  • style.css

Make sure to download the HTML Template included in the download tab on the right!

Creating The Required Wordpress Theme Files

A very basic introduction into PHP so that we can identify PHP tags while working in Wordpress as well as understand how the PHP language works.

PHP Introduction

We're going to take the basic HTML bootstrap template and upload the files and folders to our wordpress theme.

Load Project Folder

We need to link our stylesheets. Later, we'll learn how to do this in a more semantic way that Wordpress likes a lot better, but instead of diving into the PHP, let's keep it simple for now.

The Wrong Way To Link Stylesheets

We're going to link these the simple way just to get a theme going. We'll use the permanent urls just to bootstrap our theme and get it off the ground.

The Wrong Way To Link Images

We're going to start with our first PHP code by establishing a separate template where we'll put all of our head and navigation content.

In case you miss it, this is what the code looks like to add the file called header.php to the top of our template page.

<?php get_header();?>

Creating a Header.php

We're going to start with our first PHP code by establishing a separate template where we'll put all of our footer content and our closing body and html tags.

In case you miss it, this is what the code looks like to add the file called footer.php to the bottom of our template page.

<?php get_footer();?>

Creating a Footer.php

When a person puts content into the Wordpress page creator, we need to be able to pull that content dynamically. To make this possible, we need to utilize the Wordpress Loop. This is the beginning of the Wordpress Loop.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

The Loop ends here

<?php endwhile; else : ?> <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p> <?php endif; ?>
Preview 09:30

In order to get our menus to be dynamically editable via the Wordpress dashboard, we need to add menu support to our theme in our functions.php file. Here's the code we'll add.

function register_my_menu() {

register_nav_menu('header-menu',__( 'Header Menu' ));


add_action( 'init', 'register_my_menu' );

Adding Navigation Support

Now that we've registered the navigation menu, we need to add it to our header.php so it will display in our theme.

Displaying (Calling) The Navigation Menu

Finishing up the theme - a final review.

Finishing Up
Build An Epic Wordpress Theme
24 Lectures 03:25:47

This is a simple project overview of the second project theme.

Project Overview

We're going to add our Wordpress required files - index.php, functions.php, and a style.css, to a new theme folder.

Make sure to download the Token HTML template we'll be using by clicking the tab on the right!

Creating The Basic Wordpress Theme Files

Let's separate our header out into a new file called header.php.

To call it into our page templates, we'll use

<?php get_header();?>
Creating a Header.php

Now will add our stylesheets the right way using our functions.php.

The example code for this can be found in the Wordpress codex here.

Linking Stylesheets

The function to load javascript files is almost identical to the function for loading stylesheets. The only difference is the additional parameters the function can accept and the usage of wp_enqueue_script rather than wp_enqueue_style. You can also view a code example here, but to look more in depth description go here.

Loading Javascript

Our stylesheets aren't loading properly, so we are going to show you some troubleshooting:)

Troubleshooting Stylesheets

The logo upload functionality has two parts - one for adding the functionality to the theme functions.php and one to call that function in the header.php. Both of these are included below.

* Proper way to add Logo Upload Capability

function themeslug_theme_customizer( $wp_customize ) {

$wp_customize->add_section( 'themeslug_logo_section' , array(
'title' => __( 'Logo', 'themeslug' ),
'priority' => 30,
'description' => 'Upload a logo to replace the default site name and description in the header',
) );

$wp_customize->add_setting( 'themeslug_logo' );

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'themeslug_logo', array(
'label' => __( 'Logo', 'themeslug' ),
'section' => 'themeslug_logo_section',
'settings' => 'themeslug_logo',
) ) );


add_action('customize_register', 'themeslug_theme_customizer');


Here is the code that will go in the header:)

<?php if ( get_theme_mod( 'themeslug_logo' ) ) : ?>

<div class='site-logo'>

<a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><img src='<?php echo esc_url( get_theme_mod( 'themeslug_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'></a>


<?php else : ?>


<h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><?php bloginfo( 'name' ); ?></a></h1>

<h2 class='site-description'><?php bloginfo( 'description' ); ?></h2>


<?php endif; ?>

Adding Logo Upload Functionality

We need to do two things to add a dynamic menu to our theme.

1. Add Menu Support to our Wordpress theme by inserting the following code into our functions.php


* Add Menu support to Wordpress

function register_my_menu() {
register_nav_menu('header-menu',__( 'Header Menu' ));
add_action( 'init', 'register_my_menu' );

2. Call the menu from our header.php with the following code.

<?php wp_nav_menu(); ?>

This above code will work to insert the menu, but the CSS classes are automatically generated by Wordpress. We want to name the menu the same way as our HTML theme. We can do that by passing the following argument into the function.

<?php wp_nav_menu( array('menu_class' => 'nav navbar-nav navbar-right')); ?>
Adding Navigation Menu

Adding widgets to the footer area will allow our user to change out content to the footer area dynamically via the Wordpress widget tab. Again, we'll need to register new widgets in our functions.php to make them available for use, then call that widget in our sidebar.

1. The code to register a single widget is below. The portion from "register_sidebar" to the closing tags )); can be repeated within the function (which is enclosed with curly brackets) as many times as widget areas are needed, provided each are given different names and ids.

function token_widgets_init() {
register_sidebar( array(
'name' => 'Footer 1',
'id' => 'footer_1'
) );
add_action( 'widgets_init', 'token_widgets_init' );

2. The code can then be called from within our theme (footer.php) using the following code.

<?php dynamic_sidebar( 'footer_1' ); ?>

Adding Widgets To The Footer

In this section we create a separate page template for all new pages created within Wordpress by creating a Page.php file.

Page.php - Setting up the about page

In this video we create a separate page template to properly display our homepage. We also start to look at template hierarchy just a little bit.

Custom A Custom Home Page Template

In order to make our user experience as simple and intuitive as possible, we're going to be learning to use a wonderful plugin called Advanced Custom Fields.

Advanced Custom Fields Part 1

We're going to go into more depth about Advanced Custom Fields.

Advanced Custom Fields Part 2

We continue to use Advanced Custom Fields to build our custom page.

Advanced Custom Fields Part 3

As far as our other page templates go, the single blog template is completely unique so we need yet another page template. Wordpress is going to automatically look for Single.php page template and, if it is in our theme, will use it to display on our single blog listing page. Don't forget to use the loop to pull dynamic page content!

Creating a Single Blog Listing Page

Now we're going to add a dynamic sidebar area to the blog. This is identical to adding widget areas in the footer, so we'll just copy the code from our functions.php which registers the footer widgets and renaming it.

Then we need to make sure to call that function from within our sidebar.

Adding A Dynamic Sidebar To The Blog

We've been working with the template hierarchy a bit, but now it's time to understand it a little better. Go here to follow along.

Understanding The Wordpress Template Heirarchy

Now it's time to create a blog listing page with Index.php.

REMEMBER THIS! On the blog listing page, anything we list inside the loop will repeat as many times as we have blog posts.

Creating a Blog Page with Index.php

Instead of listing out each entire blog post on the main blog listing page, we're going to truncate the content and add a link to allow the readers to "Read More."

To do this, 1. change the code in your index.php from

<?php the_content();?>


<?php the_excerpt();?>

and 2. add the following code to your functions.php file

// Replaces the excerpt "more" text by a link

function new_excerpt_more($more) {
global $post;
return '<a href="'. get_permalink($post->ID) . '"> Read More...</a>';
add_filter('excerpt_more', 'new_excerpt_more');

Adding a Read More Link

We're going to add a new plugin called Custom Post Type UI. This will allow us to add a custom tab to our Wordpress theme for our Portfolio items.

Much like how Wordpress looks for Single.php to display our single blog posts, it also looks for a specific page template when we create a single Portfolio page - single-portfolio.php.

Custom Post Type - Create A Portfolio Post Type

In this video, we go through and add all of the content for our portfolio items.

Adding Portfolio Items

To display our custom portfolio post types, we need to use a modified Wordpress Loop query. To do this, we'll use the class WP_Query. The syntax for using WP_Query can be found in the Wordpress Codex here and the code snipped we use is below.

<?php $query = new WP_Query( 'post_type=portfolio' ); ?>

<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>

Using A Custom Wordpress Loop Query For Our Portfolio Page

To add arguments to our WP_Query class, we can use the syntax above or the following below.

$query = new WP_Query( array( 'author__not_in' => array( 2, 6 ) ) );
Alternate WP_Query Syntax

Now it's time to make the content on our Portfolio listing page dynamic and make sure it's displaying like the html template.

Portfolio Listing Page Template
1 Lecture 07:40

Finally! A completely dynamic and user-friendly Wordpress theme. We take a look at what we've accomplished and what other things we could do.

Additional Resources
3 Lectures 03:10

In this video we talk about how to find resources and some common resources that we use.

Some of the links mentioned.

1. The Wordpress Codex

2. Themeshaper Wordpress Tutorial

3. CodeMentor

Additional Resources

We thought this was an ideal bonus because when we started developing Wordpress themes, we hated PHP! The book is pretty basic, but it will more than cover what you need to know and could make your Wordpress journey much easier!

48 pages

About the Instructor
3.7 Average rating
102 Reviews
6,411 Students
1 Course
Senior Frontend Developer at Toptal

For two years, I ran a small Wordpress Development studio with my brother, Jonathan, designing and developing Wordpress themes. We've worked with all sorts of premium Wordpress themes and developed all types of custom themes over the last few years. I am currently working as a senior frontend developer for .

Report Abuse