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.6 (11 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.
270 students enrolled
$19
$35
46% off
Take This Course
  • Lectures 24
  • Length 1.5 hours
  • Skill Level Beginner Level
  • 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 12/2015 English

Course Description

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.

What are the requirements?

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

What am I going to get from this course?

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

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

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: Overview
03:50

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.

02:24

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

Section 2: Theming
03:21

Overview of theming

02:19

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

02:32

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

03:16

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

02:48

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

01:30
In this video we create a placeholder thumbnail for our theme.
02:54

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

01:32

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

02:34

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

00:50

In this video we finish the basic theme

03:47

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

03:49

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

01:51

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

03:39

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

02:15

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

Section 3: Building out the site pages using cool new CSS tricks
01:00

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

07:36

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

08:03

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

03:34

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

03:52

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

04:39

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.

03:13

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

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

Ready to start learning?
Take This Course