Create Custom Wordpress Themes From Scratch

Learn how to develop your own Wordpress themes from scratch or from an existing html site
4.4 (99 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,409 students enrolled
$20
Take This Course
  • Lectures 49
  • Length 6 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 10/2014 English

Course Description

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

What are the requirements?

  • HTML and CSS
  • Computer
  • Hosting

What am I going to get from this course?

  • 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

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

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: Introduction
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.

Section 2: Wordpress 101
05:30

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.

03:57

A brief description of the Wordpress Posts area.

02:41

A brief description of the Wordpress Pages area.

06:32

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

02:27

A quick look at Wordpress Widgets.

03:53

A quick overview of the Wordpress Editor tab.

03:51

A short overview at Wordpress plugins.

03:53

An overview of the Wordpress User tab.

05:27

An overview of Wordpress settings.

Section 3: Build Your First Wordpress Theme
15:48

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!

07:17

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.

03:48

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

04:13

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.

01:35

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.

04:08

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();?>

02:22

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();?>

09:30

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; ?>
04:34

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' );

07:20

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

03:21

Finishing up the theme - a final review.

Section 4: Build An Epic Wordpress Theme
02:54

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

04:25

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!

03:07

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();?>
19:40

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.

10:35

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.

02:31

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

08:37

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>

</div>

<?php else : ?>

<hgroup>

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

</hgroup>

<?php endif; ?>

03:39

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')); ?>
11:15

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' ); ?>

12:33

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

13:29

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.

14:48

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.

10:12

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

14:28

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

07:35

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!

04:41

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.

08:41

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.

12:14

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.

03:35

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();?>

to

<?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');

13:36

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.

05:21

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

10:12

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(); ?>

02:45

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 ) ) );
04:54

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

Section 5: Conclusion
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.

Section 6: Additional Resources
02:53

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

48 pages

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!

BONUS #2 - WORDPRESS TUTORIAL VIDEO SERIES
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Josiah Mann, 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 Toptal.com .

Ready to start learning?
Take This Course