Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Custom Theme Creation for WordPress using HTML5 and CSS3 to your Wishlist.

Add to Wishlist

Custom Theme Creation for WordPress using HTML5 and CSS3

Create a WordPress theme completely from scratch using very little PHP and your own hand-rolled HTML template.
4.5 (17 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.
290 students enrolled
Created by Paul Cheney
Last updated 12/2015
$10 $35 71% off
17 hours left at this price!
30-Day Money-Back Guarantee
  • 1.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
Create a mobile first, responsive WordPress site from scratch using HTML5, CSS3 and a CSS Preprocessor (no child themes).
Create a WordPress theme using very little PHP. You will be surprised how easy it really is.
Change WordPress from a blog tool into a Content Management System.
Instantiate a custom menu in your theme.
Remove extraneous tags from WordPress pages.
Learn to use FlexBox to layout unique designs.
Learn to use shape outside to wrap text around a circle.
Learn to use the new column-count, column-gap, and column rule in your WordPress Pages.
Learn to add a responsive google map to a WordPress page.
View Curriculum
  • Students should have access to web hosting so they can follow along as we learn about theme creation
  • Students need to be familiar with HTML5 and CSS3. We will be covering some new exciting CSS that you can implement in your next WordPress site.
  • Students should be familiar with a CSS preprocessor.

WordPress is the most popular blogging platform on the internet today, however, it can also be used as a powerful Content Management System. In this course we will use it as a CMS to build a client website.

In this course you will learn to convert an HTML page into a WordPress theme. Actually it’s a lot simpler than you may think. I will provide you with a link to a free HTML5 template page and together we will walk through the steps to convert it into a theme.

First we will spend a couple of minutes reviewing the essential features of a mobile first, responsive, HTML web template page that uses a CSS Preprocessor. hopefully this is a review of what you already know but you may also learn something new.

Next you will learn to build a WordPress theme from scratch. In each video we cover the essential code necessary for the 5 basic php files we will create. I call this the ugly theme as it is fully functional but lacking any design.

Then together you and I will walk through the steps of creating a beautiful WordPress theme by combining the ugly theme we just built and the HTML template I provided you.

But wait, were not finished yet. Now that you have created your own theme, you will get to create several pages in WordPress using cutting edge CSS tricks. During this process, you will learn to wrap text around a circle, align elements at the bottom using flexbox, and implement newspaper style column with lines between them.

When your done, you will have a lightning fast WordPress theme devoid of any extraneous code or unused CSS rules. Actually it's pretty cool and very easy.

Who is the target audience?
  • This course is for a web developer who needs to create a custom WordPress theme for a client.
  • This course will help you use WordPress as a content management system for a client. It does not cover blogging.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 24 Lectures Collapse All 24 Lectures 01:17:08
+ –
2 Lectures 06:14

In this video we define what WordPress is, discuss the advantages of a custom theme, describe my typical client, and what you should know before starting this course.

Preview 03:50

In this video, we review the features of the Aspen Dental HTML page that we will be converting to a WordPress theme.

Preview 02:24
+ –
15 Lectures 38:57

Overview of theming

Preview 03:21

In this video we open the backend and demonstrate how to convert WordPress from a blog into a CMS.

Preview 02:19

IN this video we show how to setup an FTP connection to the WordPress themes folder using Dreamweaver.

FTP connetion

In this video we show how to create a basic (UGLY) header, footer, index, and styles pages for our WordPress site.

Build the basic ugly theme part1

In this video we finish the basic (ugly) theme by building the page.php.

Build the basic ugly theme part2

In this video we create a placeholder thumbnail for our theme.
Build the basic ugly theme part3

In this video, we test our new theme and then register a menu in the functions php file.

Build the basic ugly theme part 4

In this video we add a dynamic title to the head of our basic theme using a WordPress php call.

Add a title to the head of our basic theme.

In this video we add a filter to our theme that removes the extraneous HTML tags thrown in by Word Press.

Add a filter to our basic theme

In this video we finish the basic theme

Wrap-up of the basic theme

In this video we add the HTML from out beautiful theme to the basic theme.

Build the beautiful theme header and footer

In this video we make the paths to the style sheets and theme images relative to the theme folder.

Fix the paths for the stylesheets and images

In this video we fix the mobile phone navigation for our beautiful theme.

Fix the mobile phone navigation

In this video we activate the current menu item by connecting it the the correct css class.

Activating the current menu item in our new theme

In this video we update the theme thumbnail and test our work on mobile devices.

Update the thumbnail and test on mobile device
+ –
Building out the site pages using cool new CSS tricks
7 Lectures 31:57

In this video we review the row and column approach to responsive web design as used in most CSS frameworks.

Overview of content rows and columns

In this video we create the home page with the HTML for a mobile touch friendly slider.

Creating a page with a slider

In this video we create another page with text wrapping around a circle

Creating a page with text wrapping around a circle

In this video we build a page that uses newspaper style columns for laying out content.

Creating columns with borders.

In this video we build a page with columns aligned at the bottom using flex layout.

Building a page using flex layout

In this video we create a page with a map in an iframe that is responsive and changes height for small, medium and large screens.

Creating a page with a flexible map

In this video we test our site on many Macintosh and Windows browsers as well as mobile devices.

Testing our WordPress site
About the Instructor
4.4 Average rating
311 Reviews
3,481 Students
7 Courses
Web Designer and Developer

Paul received his master's degree from Utah State University in Instructional Technology and worked as a civilian for the United States Air Force doing interactive computer-based firefighter training. He and his family then moved to Provo, Utah where he worked at Brigham Young University for five years in the Instructional Technology Center. While there, he was involved in authoring multimedia, digitizing video, training faculty in instructional technology. He then moved with his family to Buena Vista, VA where he joined the faculty at Southern Virginia University. While there he taught digital media courses. Ten years later he returned to Utah where he is now an Assistant Professor at Utah Valley University teaching courses in their Digital Media department in the Internet and Web Technologies degree.

Report Abuse