WordPress Development with Bootstrap: The Complete Course from Udemy

What's inside

Learning objectives

Learn how to install wordpress on your mac, pc or linux in less than 2 minutes using local by flywheel
Build a beautiful, modern and responsive wordpress theme using bootstrap, the most popular web design framework
Have the skills to start making money on the side, as a casual freelancer, or full time as a work-from-home freelancer
Easily create dynamic templates for pages, posts and other widely used wordpress templates
Learn how to integrate gutenberg and elementor in your theme, so you can drag & drop an unlimited number of layouts!
Learn how to code your own custom designed widgets in elementor
Build a wordpress theme that can be translated into multiple languages!
Code a beautiful blog layout that can be easily managed in the wordpress dashboard
Create a beautiful html & css website with bootstrap (that doesn't look like generic bootstrap websites!)
Build custom dynamic multi-level menus and navigation bars that work seamlessly on any screen size

Convert any static html & css website into a custom wordpress theme
Have a thorough understanding of utilizing php to create wordpress websites & themes
Feel comfortable with the process of turning static websites into dynamic wordpress websites
Fully understand how to use custom post types and advanced custom fields in wordpress
Allow your clients to update and manage their websites by themselves by creating user accounts with limited permissions
Build blazing fast, optimized wordpress themes that are secure and protected from hackers
Make more income as a freelancer by offering wordpress websites as a service!
Show more
Show less

Learn how to install wordpress on your mac, pc or linux in less than 2 minutes using local by flywheel
Build a beautiful, modern and responsive wordpress theme using bootstrap, the most popular web design framework
Have the skills to start making money on the side, as a casual freelancer, or full time as a work-from-home freelancer
Easily create dynamic templates for pages, posts and other widely used wordpress templates
Learn how to integrate gutenberg and elementor in your theme, so you can drag & drop an unlimited number of layouts!
Learn how to code your own custom designed widgets in elementor
Build a wordpress theme that can be translated into multiple languages!
Code a beautiful blog layout that can be easily managed in the wordpress dashboard
Create a beautiful html & css website with bootstrap (that doesn't look like generic bootstrap websites!)
Build custom dynamic multi-level menus and navigation bars that work seamlessly on any screen size
Convert any static html & css website into a custom wordpress theme
Have a thorough understanding of utilizing php to create wordpress websites & themes
Feel comfortable with the process of turning static websites into dynamic wordpress websites
Fully understand how to use custom post types and advanced custom fields in wordpress
Allow your clients to update and manage their websites by themselves by creating user accounts with limited permissions
Build blazing fast, optimized wordpress themes that are secure and protected from hackers
Make more income as a freelancer by offering wordpress websites as a service!
Show more
Show less

Syllabus

This entire course has been redesigned and revamped from the ground up! Enjoy :)

Welcome to the brand new Bootstrap to WordPress course, friends. You ready to rock & roll?

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will introduce you to the brand new WordPress theme we're going to build and code in Bootstrap, HTML, CSS, WordPress — featuring Elementor and Gutenberg! Let's code!

Course CHANGELOG - New Updates to the Course!

In this section, we'll build the static HTML, CSS & JS templates using Bootstrap, and modern front-end development practices.

Welcome to the Bootstrap section of the course!

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to set up your project, code editor and starter HTML & CSS Files!

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to code the HTML for the Navigation Menu.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to code the HTML for the Title Section of your web page.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to code the HTML for the list of Blog Articles.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to style the Navigation Menu and Hero Section with CSS.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to style a Tastefully Animated Dropdown and Sub Menu with CSS.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to style and program a Tastefully Animated Dropdown and Sub Menu with CSS and JavaScript (using the jQuery library).

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to style the Subscribe Bar.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to style the Footer Section of the website.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to code the markup for a single blog post template.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to code the markup for a Widget Heading.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to code and style the Text Card Widgets.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to code and style the Call to Action Widgets.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to code and style the Testimonial Widget.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to use Media Queries in CSS to ensure your website looks great on all screen sizes!

Bootstrap Pop Quiz

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to validate your code.

In this section, we'll set up our local WordPress server, convert our static HTML & CSS Bootstrap templates to a completely customized and sophisticated WordPress theme.

Welcome to the WordPress programming section of the course!

Download Final WordPress Theme Source Code

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to quickly and easily set up a fresh WordPress theme on your local machine (i.e. Computer) using Local by Flywheel.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to code a dynamic header and footer section within your WordPress theme.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to finalize the Header Template within your WordPress theme.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to code a dynamic title section within your WordPress theme.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to code a dynamic while loop that displays all of your blog post excerpts on one page. Plus, you'll learn how to set up a "content none" template for when there is no content to display!

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to code a dynamic blog excerpt, custom pagination, and how to truncate your excerpt with a nice little ellipsis.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to code a dynamic single blog post template.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to code a dynamic single page template.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to code a 404 Error Template. Plus, there may or may not be puppies involved.

In this section we will learn how to configure the WordPress Customizer with the Kirki Plugin.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to configure the WordPress Customizer with Version 4 of the Kirki plugin.

In this lesson of the Bootstrap to WordPress course, Brad Hussey will show you how to create a dynamic footer using the WordPress Customizer and Kirki V4.

In this lesson of the Bootstrap to WordPress course, Brad Hussey will show you how to finish your theme by creating a global "call to action" section in the footer using the WordPress Customizer and Kirki V3.

The following "Legacy" lessons are for my students who originally followed along and coded their theme using Version 3+ of the Kirki Plugin. Now that Kirki has upgraded to version 4, there are some "breaking" updates and we'll cover that in this lesson.

If you're a new student and have already coded your theme using Kirki version 4, just mark these lessons as complete and move on to the next section :)

This is a legacy lesson for those who want to configure the WordPress Customizer with Version 3 of the Kirki plugin.

In this lesson of the Bootstrap to WordPress course, Brad Hussey will show you how to create a dynamic footer using the WordPress Customizer and Kirki v3.

By the end of this section, you'll know how to install and create custom WordPress layouts, and also dabble in Object Oriented Programming to build custom widgets using Elementor

Welcome to the Elementor section of the course!

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to install the Elementor Plugin on your WordPress theme, and how to configure the Global Settings.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to start building the Hero Section of our Home Page using Elementor.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will introduce you to the world of building custom widgets right within Elementor!

Who knows — maybe you will become the next, custom Elementor widget building superstar!?

Probably not.

But you'll never know unless you embark on this journey with Brad.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will show you how to initialize a simple, custom plugin which we'll use as the backbone for creating our custom Elementor widgets.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will walk through each step of Creating an Extension for Elementor.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will walk through each step of Coding a Custom Button Widget in Elementor.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will walk through each step of creating an email opt-in bar on the home page using Elementor.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will walk through each step of programming a custom Title Widget in Elementor.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will walk through each step of programming a custom Link Widget in Elementor.

In this lesson of our brand new version of the Bootstrap to WordPress course, you and Brad Hussey will spend a little quality time cleaning up and reorganizing our home... page.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will walk through each step of programming a custom and colourful Text Card Widget in Elementor.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will teach you how to program a custom Call to Action Card Widget in Elementor.

In this lesson of our brand new version of the Bootstrap to WordPress course, you and Brad Hussey will ensure our theme looks splendid and outstanding on all your mobile doohickey devices.

In this lesson of our brand new version of the Bootstrap to WordPress course, we'll put the final touches on our theme — adding pages, content, adding our new home page layout as the static WordPress home page, and so on, etcetera, yada yada.

In this lesson of our brand new version of the Bootstrap to WordPress course, Brad Hussey will walk through each step of uploading our WordPress theme to a live server!

Thank you, friends. This has been a blast!

Allow me to send you off with a serenade.

The following lessons are from the original (a.k.a. Retro) version of the course. Even though the teaching style, video quality and software are a little outdated -- you can still learn a lot!

With millions of websites powered with it, WordPress is the most popular free CMS software on the web. WordPress powers websites for The New Yorker, Beyoncé, Smart Passive Income with Pat Flynn, John Mayer, and even my own blog! WordPress gives you the ability to create robust websites that allow your clients to update their website by themselves.

Learning it is easy if you have the right person showing you how — that's where I come in!

- - -

Please note:

At the end of this lecture I may mention what's coming up in the next lecture, and then you'll see that you are all of a sudden a few lectures ahead based on the Lecture # - don't worry, those lectures have been moved to the very end of the course. Why? They're not entirely important for learning how to code WordPress websites. This new arrangement just lets you get into the goods quicker!

Bootstrap is the most popular front-end framework on the web today. In this lecture, I talk about how learning to properly use Bootstrap can save yourself hundreds of hours, and increase your work output by up to 100%.

In this lecture, we're going to take a look at the final WordPress website we're going to have built by the end of the course. You'll see:

The beautiful, custom home page
Dynamic testimonials
How to edit the logo in the WordPress customizer
The custom blog page
How to add dynamic resources
Contact page
The WordPress admin panel

In this lecture, I talk about the difference between Static Websites and Dynamic Websites, which is more valuable, and how this course enables you to add immense value to your clients.

In this lecture we're going to download the Bootstrap framework. Please keep in mind that this course was built Bootstrap v3.3.1, so we'll be using that version. However, it's always a good idea to use the latest software version for any project, so once you've completed the course, update your Bootstrap version and challenge yourself to make sure everything is compatible!

In this lecture, we'll download the course files and I'll explain the contents of each of the folders.

In this lecture, I'll show you how to correctly set up your production environment.

The following lessons are from the Original Version of the Bootstrap to WordPress Course. Please note: the software used in these lessons are not up-to-date.

In this lecture, we will code the basic HTML skeleton of our web page.

In this lecture, we will be adding external Javascript libraries (jQuery, HTMLShiv and Respond.js) to our HTML document.

In this lecture, we learn how to download and install the free icon font library, FontAwesome, to our website.

In this lecture, we'll add two free font libraries to our webpage:

Google Fonts
Adobe TypeKit

In this lecture, we'll code the HTML for the Header and Navigation sections.

In this lecture, we'll code the HTML for the Hero section of our Bootstrap template.

This lecture is an extension (Part B) of the previous lecture, and we will style the Hero section with CSS.

In this lecture, we'll learn how to achieve the popular "Parallax Scrolling Effect" in less than 5-minutes!

In this lecture, we're going to learn how to code an "opt-in" section in a high-converting location on your web page. Opt-ins are important on your websites, as they allow you to collect email addresses from your visitors.

In this lecture, we'll learn how to code a Bootstrap Modal window and add an opt-in form.

In this lecture, we'll code the "How You Can Boost Your Income" section of our home page.

In this lecture, we'll code the HTML & CSS for our "Who Should Take This Course" section of our home page.

In this lecture, we're introduced to a new concept: CSS Sprites. We'll learn how to manipulate a background image using CSS in order to save loading time on our website.

In this lecture, we'll code the HTML & CSS for our "Final Project Features" section.

In this lecture, we will:

Code the "Featurette" section
Embed a YouTube video
Add a Parallax background

In this lecture, we will code the "Instructor" section, and learn how to add big fancy background images!

In this lecture, we'll learn how to create beautiful, scalable circles of any size using only CSS3!

In this lecture, we'll learn the simple trick to vertically align your content within any element — and we won't be using absolute positioning, or line height!

In this lecture, we'll code the Testimonials section, and learn how to mask our square HTML images as circles using CSS3.

In this lecture, we'll code a compelling "Sign Up" section at the bottom of our website. Plus, we'll add a parallax background.

In this lecture, we'll code the final section of our home page — the footer! While it's a simple section, there are some very important elements you can't miss! Footers are fundamental in every website.

In this lecture, we'll add the final touches to our home page with some additional CSS, and we'll make sure our home page is bulletproof on mobile devices with some CSS3 Media Queries.

In this new section, we'll be focusing on the Blog templates. In this lecture, we'll be creating our blog overview page and coding the basic markup & structure for our blog overview.

In this lecture, we'll code the blog excerpts.

In this lecture, we'll code the Sidebar and Widgets with HTML5, then we'll style them using CSS3.

In this lecture, we'll style the Blog Excerpts with CSS.

In this lecture, we'll code the "full" blog post template.

In this lecture, we'll code the comments section of our blog.

In this lecture, we'll learn about the importance of a resources page, why every one of your websites need one, and how your resources page is the most valuable page on your website!

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Suitable for beginners new to Bootstrap and WordPress looking to build custom websites and themes

Brad Hussey is a recognized instructor in the Bootstrap and WordPress space with over 10 years of professional experience

Strong focus on practical application, with students building a WordPress website from scratch

Covers the fundamentals of PHP, essential for understanding WordPress development

Teaches Elementor integration, allowing students to create unlimited website layouts without coding

May require some prior experience with HTML and CSS for full comprehension

Reviews summary

Highly recommended wordpress course

According to students, this course on WordPress is highly recommended. Students have shared that they have learnt a lot from the course and that everyone who wants to learn about using it should take this course. Reviews have largely positive sentiment.

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in WordPress Development with Bootstrap: The Complete Course with these activities:

Follow a WordPress Development Tutorial Series

Show steps

Following a tutorial series will help you learn new techniques and expand your knowledge of WordPress development.

Browse courses on Wordpress

Show steps

Find a reputable tutorial series
Follow the tutorials step-by-step
Practice the concepts you learn

Code Bootstrap Templates

Show steps

Coding templates will help you practice your skills and reinforce your understanding of the Bootstrap framework.

Browse courses on Bootstrap

Show steps

Create a new HTML file
Add Bootstrap CDN links
Code the basic HTML structure
Style the template with CSS

Build a Simple WordPress Website

Show steps

Creating a simple website will help you apply the concepts learned in the course and reinforce your understanding of WordPress.

Browse courses on Wordpress

Show steps

Choose a theme and plugins
Create pages and posts
Configure settings and menu
Test and publish your website

Two other activities

Expand to see all activities and additional details

Show all five activities

Create a Portfolio of WordPress Projects

Show steps

Creating a portfolio will help you showcase your skills and demonstrate your proficiency in WordPress development.

Browse courses on Wordpress

Show steps

Gather your best WordPress projects
Create a website or online platform
Describe your projects and explain your role
Add testimonials or client feedback

Write a Blog Post on WordPress Development

Show steps

Writing a blog post will help you solidify your understanding of WordPress development concepts and share your knowledge with others.

Browse courses on Wordpress

Show steps

Choose a topic
Research and gather information
Write the blog post
Edit and proofread
Publish the blog post

Career center

Learners who complete WordPress Development with Bootstrap: The Complete Course will develop knowledge and skills that may be useful to these careers:

WordPress Developer

WordPress developers are masters of the WordPress content management system, creating websites and customizing themes to meet specific needs. If you become a WordPress developer, you will be able to create engaging websites for clients, ensuring they are search engine optimized and secure. This course will provide you with the necessary skills to succeed as a WordPress developer. You will learn how to convert any static HTML & CSS website into a custom WordPress theme, as well as how to integrate Gutenberg and Elementor into your theme for unlimited design possibilities.

See salaries and explore the career path for WordPress Developer

Web Developer

A web developer is the brains behind every website, translating ideas from designers into functional realities. If you are a web developer, you might create responsive websites using HTML5 and CSS3, integrate multimedia content, and debug code to maintain high functionality. This course can be especially useful for you, as it focuses on combining static HTML and CSS websites into a dynamic WordPress theme with Bootstrap. WordPress has the ability to create robust, easily-maintained websites which allow clients to update their websites by themselves, which is an invaluable skill for modern web developers.

See salaries and explore the career path for Web Developer

Web Designer

Web designers are responsible for the visual aesthetics of a website, creating a seamless user experience. As a web designer, you would collaborate with web developers and other team members to ensure that a website is not only visually appealing, but also functional and accessible. Enrolling in this course will help you to build a foundation in web design, as you will learn how to build a beautiful, modern and responsive WordPress theme using Bootstrap, the most popular web design framework.

See salaries and explore the career path for Web Designer

Freelance Web Developer

Freelance web developers are self-employed web developers who work on a project-by-project basis for various clients. As a freelance web developer, you will be responsible for all aspects of website creation, including design, development, and maintenance. Taking this course may be a great option for you, as it will help you to develop the skills and knowledge you need to offer WordPress websites as a service.

See salaries and explore the career path for Freelance Web Developer

UI/UX Designer

UI/UX designers are responsible for the user interface and user experience of a website, ensuring that it is both visually appealing and easy to use. As a UI/UX designer, you would work closely with web developers to create websites that are both beautiful and functional. This course can be especially useful for UI/UX designers, as it will provide you with a foundation in web design principles and best practices.

See salaries and explore the career path for UI/UX Designer

Front-End Developer

Front-end developers transform designs and prototypes into functional, responsive websites. If you want to become a front-end developer, you will need to have a strong understanding of HTML, CSS, JavaScript, and web design principles. This course may be especially useful for front-end developers, as it provides a comprehensive overview of how to code your own custom designed widgets in Elementor, and how to use custom post types and advanced custom fields in WordPress.

See salaries and explore the career path for Front-End Developer

Content Creator

Content creators are responsible for creating engaging, informative, and persuasive content for a variety of platforms, including websites. If you become a content creator, you will be responsible for writing blog posts, articles, social media posts, and other types of content. This course will help you to build a strong foundation in web writing and content creation, as you will learn how to create a beautiful blog layout that can be easily managed in the WordPress dashboard.

See salaries and explore the career path for Content Creator

Digital Marketer

Digital marketers are responsible for promoting and marketing products or services online. As a digital marketer, you would use a variety of online channels, such as social media, email, and search engines, to reach your target audience. This course can help you to build a strong foundation in digital marketing, as you will learn how to use WordPress to create a website and how to optimize it for search engines.

See salaries and explore the career path for Digital Marketer

SEO Specialist

SEO specialists are responsible for optimizing websites for search engines, ensuring that they appear high in search results. As an SEO specialist, you would use a variety of techniques, such as keyword research and link building, to improve a website's ranking in search results. This course will help you to build a strong foundation in SEO, as you will learn how to optimize your WordPress website for search engines and how to use Google Analytics to track your website's traffic.

See salaries and explore the career path for SEO Specialist

E-commerce Manager

E-commerce managers are responsible for managing and operating an online store. As an e-commerce manager, you would be responsible for a variety of tasks, such as managing inventory, processing orders, and providing customer service. This course may be helpful for e-commerce managers, as it will provide you with a foundation in WordPress and e-commerce best practices.

See salaries and explore the career path for E-commerce Manager

Marketing Manager

Marketing managers are responsible for planning and executing marketing campaigns. As a marketing manager, you would be responsible for developing marketing strategies, managing marketing budgets, and measuring the success of marketing campaigns. This course may be helpful for marketing managers, as it will provide you with a foundation in digital marketing and website management.

See salaries and explore the career path for Marketing Manager

Product Manager

Product managers are responsible for managing the development and launch of new products. As a product manager, you would be responsible for a variety of tasks, such as conducting market research, defining product requirements, and working with engineers to develop new products. This course may be helpful for product managers, as it will provide you with a foundation in web development and project management.

See salaries and explore the career path for Product Manager

Business Analyst

Business analysts are responsible for analyzing business needs and developing solutions to improve business processes. As a business analyst, you would work with stakeholders to gather requirements, analyze data, and develop recommendations for improvement. This course may be helpful for business analysts, as it will provide you with a foundation in web development and project management.

See salaries and explore the career path for Business Analyst

Project Manager

Project managers are responsible for planning, executing, and closing projects. As a project manager, you would be responsible for a variety of tasks, such as developing project plans, managing project budgets, and tracking project progress. This course may be helpful for project managers, as it will provide you with a foundation in web development and project management.

See salaries and explore the career path for Project Manager

Software Engineer

Software engineers are responsible for designing, developing, and maintaining software applications. As a software engineer, you would work with a team of engineers to develop and maintain software applications that meet the needs of users. This course may be helpful for software engineers, as it will provide you with a foundation in web development and software engineering principles.

See salaries and explore the career path for Software Engineer