WordPress Theme Academy with Bootstrap

Create a stunning custom Wordpress theme from scratch using the responsive Bootstrap framework. Also covers PHP basics
4.7 (72 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.
977 students enrolled Bestselling in Bootstrap WordPress
$19
$20
5% off
Take This Course
  • Lectures 64
  • Length 7.5 hours
  • Skill Level Intermediate 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 9/2015 English

Course Description

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

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!

What are the requirements?

  • 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

What am I going to get from this course?

  • 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

What 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

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: Welcome
02:51

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.

02:36

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.

Section 2: Bootstrap template- Home page
Article

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!

08:32

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.

13:15

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.

18:19

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.

13:09

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.

07:27

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.

09:03

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

07:35

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.

07:28

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.

06:28

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.

Section 3: Bootstrap template- Additional pages
10:17

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.

05:17

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.

05:17

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.

11:10

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. 

04:41

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.  

Section 4: Optional Section: PHP Basics / Refresher
Section requirements
Article
07:50

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.

07:00

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. 

10:14

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.

05:56

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.

06:59

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.

04:39

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.

12:25

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.

04:31

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.

11:12

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. 

02:38

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.

Section 5: WordPress Conversion
12:26

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.

10:38

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. 

11:20

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.

Header & footer
13:47
WordPress menu using navwalker
05:28
Image file paths
04:47
Create the front-page.php
04:49
WordPress loop and page.php
03:34
Section 6: WordPress blog section
Blog index page part 1
16:59
Blog index page part 2
07:06
Dynamic feature text
04:19
Single blog post template
09:48
Adding comments to the blog
11:50
Section 7: Footer menu, Widgets & Final page templates
Making our sidebar dynamic
04:09
Archives template
07:31
Latest news page
05:30
Adding feature images to our posts
06:04
WordPress footer menu
05:29
Adding the sidebar Widgets
10:54
About us page
04:16
Contact us page
04:07
Custom 404 page
07:44
Organise our code using get template part
04:20
Custom search template
06:05
Section 8: Theme Finishing Touches
Advanced custom fields part 1
06:20
Advanced custom fields part 2
13:30
Custom header images
03:39
Adding the post class
Preview
04:00
Making our contact form functional
Preview
08:09
Adding WordPress core CSS
01:50
Section 9: Translating Our Theme
Preparing our theme text strings for translation
14:48
Preparing our function text for translation
03:01
Creating translation files using Poedit
06:42
Section 10: Thank you
Starter themes
03:59
Thank You (includes finished theme downloads)
01:45
Keep on learning
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Chris Dixon, Web Developer and teacher at Core Web Training

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.

Chris

Ready to start learning?
Take This Course