WordPress Theme Developer Academy with Bootstrap
4.7 (115 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.
1,190 students enrolled
Wishlisted Wishlist

Please confirm that you want to add WordPress Theme Developer Academy with Bootstrap to your Wishlist.

Add to Wishlist

WordPress Theme Developer Academy with Bootstrap

Create a stunning custom Wordpress theme from scratch using the responsive Bootstrap framework. Also covers PHP basics
4.7 (115 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.
1,190 students enrolled
Created by Chris Dixon
Last updated 8/2016
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 7.5 hours on-demand video
  • 3 Articles
  • 5 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create websites confidently using the Bootstrap framework
  • Convert new or existing websites to WordPress
  • Improve career prospects by learning an in demand skill
  • Make a living as a WordPress theme developer or building custom responsive websites
  • Apply WordPress PHP to make websites more dynamic and add great features
  • Understand how WordPress theme templates are used
  • Override Bootstrap core styling to make your website fully custom
  • Make a full or part time career creating WordPress themes
  • Move on from creating static websites to build great looking responsive WordPress websites
  • Confidently understand how themes are created using WordPress
  • Understand WordPress files and folder structure
  • Have 2 in demand skills to add to their resume/cv: Bootstrap & WordPress
View Curriculum
  • A basic knowledge of HTML, CSS and general computer skills are essential.
  • Everything for this course is either provided or is available to download for free!
  • A computer with internet connection.
  • No WordPress knowledge is required
  • No Bootstrap knowledge is required

Master the art of building custom WordPress themes from scratch using Bootstrap!

Here are some recent real course reviews:

  • "Excellent course. Chris explains everything extremely well so learning the skills is easy."
  • "This course is so freakin AWESOME!!! The instructor was very good, and explained all of the things very good in details. I am definitly going to make more custom wordpress themes in the future, now when I have this foundation of how to do so from this course! Thanks a lot for all of what I have learned in this course!!! PS...Can highly recommend this course to others!"
  • "To date it's the best html/boostrap to Wordpress theme development course I've found."
  • "This one is really a great one :-)"

WordPress is the most popular CMS on the web and powers a large percentage of websites today. In this course i will guide you step by step, to building your own custom responsive theme using the popular Boostrap framework.

No more looking around for pre built themes and making them fit your website. Or even paying for themes on sites such as Themeforest.

This course will give you the knowledge to either build your own custom site and convert to WordPress, or convert your existing static HTML website to WordPress!

You can even use what you learn to publish and sell your own themes on Themeforest!

From the beginning you will get to work on our Spa theme template with Boostrap. Don't worry if you have not used Bootstrap before, if you have a little HTML & CSS experience I will guide you through.

After the bootstrap section I will then guide you through every step of the way to convert our Bootstrap template to a fully functional WordPress theme.

I will not just be showing you the basic conversion, we will go further with many other topics such as:

  • Making our themes for translation ready for international users.
  • Custom header images
  • Adding custom fields to make our website customisable for non technical users
  • Using PHP to pull into our website dynamic data
  • Fully functional contact forms and search boxes
  • Organising our code into templates
  • Finer blog styling control using post class
  • Widgets
  • Filtering blog posts
  • Fully functional blog comments
  • And much more

Included is all the images etc you will need, there is also need no extra software, subscriptions or purchases etc to complete or take this course.

So are you ready to take your web design or WordPress skills to the next level?

Join me now and I look forward to having you on board!

Who is the target audience?
  • This course is for anybody looking to take their existing HTML/CSS skills to the next level by building custom responsive WordPress themes from scratch.
  • No WordPress, Bootstrap or PHP experience is required but basic HTML & CSS is essential.
  • Anybody looking to build a part or full time business creating customWordPress themes or websites.
  • Hobby WordPress developers
  • WordPress enthusiasts
  • Anybody looking for a side income building WordPress themes
  • Students looking to learn a valuable skill for fun or employment
  • People looking to learn how to apply Bootstrap to websites
Compare to Other Bootstrap Courses
Curriculum For This Course
64 Lectures
2 Lectures 05:27

Welcome this course on creating a custom responsive Wordpress theme with Bootstrap. This introduction video takes a look at the project we will be building and talks about some areas covered in the course.

Preview 02:51

This short video is aimed at students new to Udemy courses. A quick overview of the course layout showing how to navigate around. And very importantly the HD button location and discussions section location.

Udemy guide
Bootstrap template- Home page
10 Lectures 01:31:37

When following along with this course we will be downloading Bootstrap (lecture 4), a Bootstrap blog template (lecture 13) and WordPress (lecture 18).

From time to time the contents of the downloads can change and you may notice a slight difference between versions. If you are having trouble with a later version or would prefer to use the same versions as I am in the videos, i have included all 3 as a download with this video.

If not follow along with the course as usual!

Optional download

This video is the start of the Bootstrap template. We get to work by downloading Bootstrap, adding the index page and organising our files.

We will also import Google Fonts into our project and link Fontawesome.

Bootstrap set up

We begin Bootstrap the index page by creating the header section in HTML. We add a Bootstrap collapsible navigation bar and take a look at Bootstrap classes such as navbar, rows and container-fluid.

This video also shows you how to take a look at the styles the Bootstrap CSS includes by default and how to override.

We also add the 'feature section' which includes the header background image and text. This section will be later used in the WordPress website as a header template to reuse.

Header section- HTML

In this video we add the CSS for the header section. You will also be introduced to the Bootstrap grid system and offsetting columns. We also add a media query for mobile CSS.

Header section- CSS

Next we move onto the welcome section of the home page. We make use of the Bootstrap grid system for layout and complete both the HTML and the CSS for this section.

Home page- welcome section

We continue with the Bootstrap website and move onto the latest offers section of the home page. This section will be static HTML text but later in the course we will allow our WordPress administrator to log an and change the text fields etc to keep the offers up to date.

Home page- offers section- HTML

This video adds the CSS for the offers section of the Bootstrap template. We add colours and styling along with looking at positioning techniques.

Home page- offers section- CSS

We will now move down onto the shop online section of the Bootstrap template. This video covers both the HTML and CSS for the section. We will add a familiar heading to the section, add a button link and then add a background image using CSS.

Home page- shop online section

The final home page HTML of our Bootstrap website! This video is all about creating the footer section which includes a navigation menu to other pages and also a social media section. The footer is on of the areas which we will template in WordPress to avoid typing the same code over and over again on every page.

Footer section- HTML

This is the last video for the home page of our Bootstrap template. We finish off the footer section from the last video by adding the CSS. We add colour and alignment to the footer and fix some small mobile CSS issues on the mobile view.

Footer section- CSS
Bootstrap template- Additional pages
5 Lectures 36:42

This video focuses on adding additional pages to our Bootstrap website. We create the blog page, this page will be an important part when we later convert the website to a responsive WordPress theme.

Blog page- HTML

Let's now add some styling to the Bootstrap blog. This CSS section will style the individual blog posts and also add a fancy image below the blog titles. We will also keep the CSS consistent by styling the sidebar.

Blog page- CSS

This is quite a simple additional Bootstrap web page. The about us page re uses the header and footer areas from other pages, then we add some custom about us text to the website.

About us page

The final HTML of the Bootstrap website. We create a contact us page with useful contact information, a embedded Google map and a contact us form. This form will be made fully functional in the WordPress section later in the course. 

Contact us page- HTML

Congratulations on reaching the final video for the Bootstrap template. In this video we add the final styles for the contact us page. All of these styles will be carried over to the WordPress theme to keep it consistent with the Bootstrap website.  

Contact us page- CSS
Optional Section: PHP Basics / Refresher
11 Lectures 01:13:52
Section requirements

Unlike Javascript, PHP does not work 'inside' the browser. PHP is executed on the server, therefore to use PHP on our computer, we need to simulate a web server.

We do this by installing a package called MAMP which allows us to use PHP, MySQL databases and an Apache web server.

Localhost installation & setup

This video takes a look at the classic 'hello world' program in PHP. Displaying the text of Hello World is traditionally the most basic example of how to use a particular programming language.

We also cover basic PHP syntax (how it is typed out), commenting out code and combining PHP with HTML code. 

Hello World

We now move onto 3 PHP fundamentals: strings, variables and constants.

A string is a single or sequence of characters such as a letter, word or sentence.

PHP variables are used as containers for storing information, which we can change at a later date.

PHP constants are also used as containers for information, however, unlike variables, their value can not be changed.

Strings, variables & constants

This video covers PHP operators such as arithmetic, assignment, comparison & logical, increment & decrement operators.

We also look at different PHP data types which are available such as arrays, strings, integers & booleans.

Data types & operators

PHP arrays are similar to variables, however they can store multiple values.

This video covers 2 ways of creating PHP arrays, we then cover some useful array functions such as how to count the number of items inside an array.

PHP Arrays

Functions can be looked at as a section of code, which we can give a name to and call it in our program when required. Functions are useful to prevent repetition in a program. We also take a look at how to pass arguments into a function.

PHP Functions

Conditional statements are used when we want to check if a certain condition is true. If so, we then tell the program what to do next. For example we can check if a user is logged in, if they are then we can show the users information such as username etc.

We also combine the conditional statements with logical operators.

Conditional statements & more operators

In the last video we looked at if else statements and how we can use them to tell the program what to do, based on if a certain condition is met. 

In this video we are going to look at PHP switch statements, which are a great alternative to if else statements if we need to check against many conditions.

Switch statements

In programming languages including PHP, loops can make repetitive tasks quicker and easier. This video takes a look at PHP while, do while, for and for each loops. 


This video is an introduction to the WordPress codex. This is the WordPress online documentation which we will use often in the coming sections to find code examples and how to use certain WordPress PHP functions.

The Codex
WordPress Conversion
8 Lectures 01:06:49

To run a server side language on your own computer, we need to first set up a localhost. We begin by installing a program called MAMP, this allows us to run PHP (the language WordPress is wrote in) and also create MySQL databases for WordPress. 

Once we have a localhost and database setup, we then download and install WordPress.

Localhost setup & WordPress installation

Now we have WordPress setup and installed on our computer, this video now moves onto creating our custom WordPress theme folder.

We copy over the required files from our Bootstrap template, modifying as required. We also add all the required theme information to our CSS file. Lastly we add to our WordPress theme some PHP files to prepare to move over some of the Bootstrap sections in future videos. 

WordPress theme folder

Now we have our WordPress theme installed we move on to working with the index page. We begin by taking the header and footer areas from the index page and placing them into their own PHP files. WordPress uses these files as a templating system.

Once in their own PHP files, we use WordPress functions to add them back into the home page as required.

We also begin adding some setup functions to the WordPress functions.php file. Lastly we enable WordPress debugging error messages to help you if you have a error in the code.

Index page

Header & footer

WordPress menu using navwalker

Image file paths

Create the front-page.php

WordPress loop and page.php
WordPress blog section
5 Lectures 50:02
Blog index page part 1

Blog index page part 2

Dynamic feature text

Single blog post template

Adding comments to the blog
Footer menu, Widgets & Final page templates
11 Lectures 01:06:09
Making our sidebar dynamic

Archives template

Latest news page

Adding feature images to our posts

WordPress footer menu

Adding the sidebar Widgets

About us page

Contact us page

Custom 404 page

Organise our code using get template part

Custom search template
Theme Finishing Touches
6 Lectures 37:28
Advanced custom fields part 1

Advanced custom fields part 2

Custom header images

Adding WordPress core CSS
Translating Our Theme
3 Lectures 24:31
Preparing our theme text strings for translation

Preparing our function text for translation

Creating translation files using Poedit
Thank you
3 Lectures 05:59
Starter themes

Thank You (includes finished theme downloads)

Keep on learning
About the Instructor
Chris Dixon
4.5 Average rating
1,181 Reviews
14,888 Students
8 Courses
Web Developer and teacher at CodeSmart Academy

Hello, My name is Chris and I am a web developer and online teacher. I am passionate about what I do and about teaching others. I have started various online and offline businesses.

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and i have watched the web evolve into what it is today.

I try to make my courses enjoyable and try to remember what it was like when I was learning. I also believe the best way to learn is by doing and try to include as many practical examples as possible in my courses.

Thanks for taking an interest and I look forward to you joining me.