Find online courses made by experts from around the world.
Take your courses with you and learn anywhere, anytime.
Learn and practice real-world skills and achieve your goals.
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:
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!
Not for you? No problem.
30 day money back guarantee.
Learn on the go.
Desktop, iOS and Android.
Certificate of completion.
|Section 1: Welcome|
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.
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|
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!
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.
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.
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.
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.
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.
This video adds the CSS for the offers section of the Bootstrap template. We add colours and styling along with looking at positioning techniques.
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.
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.
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|
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.
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.
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.
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.
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|
We do this by installing a package called MAMP which allows us to use PHP, MySQL databases and an Apache web server.
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.
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.
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.
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.
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.
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.
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.
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.
|Section 5: WordPress Conversion|
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.
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.
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
WordPress menu using navwalker
Image file paths
Create the front-page.php
WordPress loop and page.php
|Section 6: WordPress blog section|
Blog index page part 1
Blog index page part 2
Dynamic feature text
Single blog post template
Adding comments to the blog
|Section 7: Footer menu, Widgets & Final page templates|
Making our sidebar dynamic
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
|Section 8: Theme Finishing Touches|
Advanced custom fields part 1
Advanced custom fields part 2
Custom header images
Adding the post classPreview
Making our contact form functionalPreview
Adding WordPress core CSS
|Section 9: Translating Our Theme|
Preparing our theme text strings for translation
Preparing our function text for translation
Creating translation files using Poedit
|Section 10: Thank you|
Thank You (includes finished theme downloads)
Keep on learning
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.