Bootstrap To Wordpress

Introduction Preview 00:30

Welcome to the Bootstrap section of the course!

Project Set Up Preview 15:21

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!

HTML - Code The Navbar Preview 19:03

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.

HTML - Code the Title Section Preview 08:04

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.

HTML - Code the List of Blog Articles Preview 11:54

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.

CSS - Style The Navigation Menu & Hero Section Preview 18:25

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.

CSS - Style a Tastefully Animated Dropdown and Sub Menu Preview 33:35

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.

CSS & JS - Style and Program a Tastefully Animated Dropdown and Sub Menu Preview 34:36

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

CSS - Style the Subscribe Bar Preview 14:29

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.

CSS - Style the Footer Section Preview 12:11

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.

HTML - Code the Markup for a Single Blog Post Preview 03:36

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.

HTML - Code the Markup for our "Widget Headings" Preview 07:35

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.

HTML & CSS - Code and Style the Text Card Widgets Preview 10:10

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.

HTML & CSS - Code and Style the Call To Action Widget Preview 09:30

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.

HTML & CSS - Code and Style a Testimonial Widget Preview 04:14

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.

HTML & CSS - Make Sure it Looks Good on Mobile Devices! Preview 09:38

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

HTML, CSS & JS - Validate Your Code! Preview 05:16

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

Introduction Preview 00:38

Welcome to the WordPress programming section of the course!

Download Final WordPress Theme Source Code Preview 00:03

Create a Fresh WordPress Install with Local by Flywheel Preview 30:16

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.

Create a Dynamic Header, Footer and Index Template Preview 04:14

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.

Finalize the Header Template Preview 16:50

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.

Create a Dynamic Title Section Preview 20:54

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.

Create Content Excerpt and Content None Templates Preview 14:37

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!

Dynamic Blog Post Excerpts, Custom Ellipsis and Pagination! Preview 20:27

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.

Create a Dynamic Blog Post Template with a Responsive Feature Image Preview 15:23

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.

Create a Dynamic Page Template Preview 08:00

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.

Create a Super Cute 404 Error Page Preview 06:34

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.

Configure the WordPress Theme Customizer the Easy(ish) Way using Kirki Preview 29:59

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 the Kirki plugin.

Create a Global Footer with Customizer using Kirki Preview 13:04

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

Create a Global "Call to Action" Footer Section using Customizer & Kirki Preview 28:13

In this lesson of our brand new version 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.

Introduction Preview 01:32

Welcome to the Elementor section of the course!

Install Elementor & Setup Global Settings Preview 10:13

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.

Build a "Hero Layout" with Elementor Preview 13:04

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.

Building Custom Widgets in Elementor Preview 02:05

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.

Initialize a Simple Plugin to Create Custom Elementor Widgets Preview 06:12

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.

Creating an Extension for Elementor Preview 23:01

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.

Code a Custom Button Widget with Elementor Preview 35:52

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.

Create the Subscribe Bar with Elementor Preview 05:12

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.

Program a Heading Widget in Elementor Preview 18:08

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.

Program a Link Widget in Elementor Preview 14:10

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.

Clean Up the Home Page Layout Preview 14:50

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.

Program a Colourful Text Card Widget in Elementor Preview 15:18

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.

Program a Custom Call To Action Card Widget in Elementor Preview 22:13

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.

Theme Testing, Bug Fixes & Responsive Styles in Elementor Preview 20:20

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.

Adding Pages & Finishing the Theme Preview 05:27

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.

Uploading Our WordPress Theme on a Live Server Preview 05:59

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!

Wrap Up & What's Next? Preview 01:51

Thank you, friends. This has been a blast!

The End. Preview 01:25

Allow me to send you off with a serenade.

What is WordPress? And Why You Should Care So Much About It Preview 04:14

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!

What is Bootstrap? And Why Mastering It Will Save You Hundreds of Hours Preview 05:19

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

The (Beautiful) Final WordPress Website You Are Going To Build In This Course Preview 08:07

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:

1. The beautiful, custom home page
2. Dynamic testimonials
3. How to edit the logo in the WordPress customizer
4. The custom blog page
5. How to add dynamic resources
6. Contact page
7. The WordPress admin panel

Static vs. Dynamic Websites, Which Is Better? (Hint: One Is Way More Valuable) Preview 02:55

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.

Free Download: The Bootstrap 3 Framework Preview 04:13

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!

Free Download: The Final Course Files + WordPress Theme! Preview 05:04

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

Setting Up Your Project Environment Preview 04:36

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

Code The Basic Webpage Layout Preview 10:57

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

Adding External Scripts to Your HTML Document Preview 05:42

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

Install Free Icon Fonts with FontAwesome Preview 05:52

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

Install Free Web Fonts with TypeKit & Google Fonts Preview 06:28

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

1. Google Fonts
2. Adobe TypeKit

Code the Header and Navigation Sections Preview 12:04

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

Code the Hero Section Preview 09:37

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

Style the Hero Section with CSS Preview 13:23

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

Learn How To Create The Parallax Scrolling Effect in Less Than 5-Minutes Preview 06:32

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

Learn to Code a High-Converting "Opt-In" Section Preview 07:17

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.

Learn How to Create a Modal Popup using Bootstrap Preview 08:24

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

Code the "Boost Your Income" Section Preview 05:30

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

Code the "Who Should Take This Course" Section Preview 05:25

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

Code the "Course Features" Section Using CSS Sprites Preview 12:22

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.

Code the "Final Project" Section Preview 07:07

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

Code the Featurette Section and Embed a YouTube Video Preview 07:11

In this lecture, we will:

1. Code the "Featurette" section
2. Embed a YouTube video
3. Add a Parallax background

Code the Instructor Section (Plus BONUS Elvis Impressions!) Preview 12:37

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

Code Beautiful CSS3 Circles Preview 10:14

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

The Simple Trick to Vertically Align Your Content Within an Element Preview 05:18

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!

Code the Testimonials and Learn to Turn Square Images into Circles using CSS3 Preview 11:25

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

Code the Sign Up Section Preview 09:51

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

Code the Footer Preview 08:56

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.

Responsive Media Queries & General CSS Cleanup Preview 09:15

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.

Code the Basic Markup Structure Preview 05:53

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.

Code the Blog Excerpts with HTML Preview 10:55

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

Code and Style the Sidebar & Widgets Preview 12:27

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

Style the Blog Excerpts with CSS Preview 15:33

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

Code the Blog Post Preview 06:20

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

Code the Comments Section Preview 16:15

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

The Importance of a Resources Page Preview 05:09

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!

Code the 3-Column Layout Resources Page Preview 14:58

In this lecture, we'll code the responsive, 3-column layout for our resources template.

Code the Contact Form Preview 10:50

In this lecture, we'll code the contact template and contact form.

Download Version 4 of WordPress Preview 01:41

In this lecture, we're going to download WordPress. At the time of the recording of this course, the latest version of WordPress was 4.0. It is recommended that you also use Version 4.0 while you're following along with the lectures (to avoid running into bugs that haven't yet been addressed in future versions).

However, once you've completed the course, update your WordPress version to the latest stable release (if available)! It is strongly advised that you keep your software up-to-date—including WordPress and all it's plugins—to avoid flaws in the code, and to keep you and your website visitors safe from malware, and hackers.

A zip file containing WordPress 4.0 is available for download in this lecture.

Create Your "Underscores" Starter Theme Preview 03:53

In this lecture, we'll create our very first "Underscores" Starter Theme.

Install WordPress on Your Local Machine in Under 5-Minutes Preview 07:18

In this lecture, we'll install WordPress in less than 5 minutes!

Installing Your Underscores Theme Preview 03:23

In this lecture, we'll learn the two ways to install a WordPress Theme, and then we'll install the Underscores Starter Theme in our WordPress website.

Convert Your Static Header to a Dynamic Header Preview 08:33

In this lecture, we'll take the code from our static website and turn it into a dynamic, WordPress header.

Cover Your Assets (Adding Your Styles, Scripts, Fonts & Images) Preview 10:31

In this lecture, we'll add our assets folder from our static website into our WordPress website, and make sure our new WordPress website references the correct paths.

Clean Up Your Stylesheet & Modify Your CSS for WordPress Preview 13:20

In this lecture, we'll clean up and customize the stylesheet that is provided with the Underscores Starter theme in order to work better with our custom theme going forward.

Convert Your Static Footer to a Dynamic Footer Preview 03:28

In this lecture, we'll turn our static footer into a dynamic WordPress footer.

Create a Home Page WordPress Template Preview 13:18

In this lecture, we're going to dive right into WordPress and create our first custom template!

Code the Hero & Use "Custom Fields" for Extra Info Preview 17:00

In this section, we're going to learn more about Custom Fields, how they work, and how you can use them to further customize your templates.

Amazing Plugin: Advanced Custom Fields Preview 04:30

In this lecture, you'll be introduced to one of the most amazing WordPress plugins out there: Advanced Custom Fields.

Code the "Boost Your Income" Section with Advanced Custom Fields Preview 24:55

In this lecture, we'll code the Boost Your Income section with Advanced Custom Fields.

Code the "Who Should Take This Course" Section with Advanced Custom Fields Preview 08:41

In this lecture, we'll use Advanced Custom Fields to code our "Who Should Take This Course" section.

Amazing Plugin: Custom Post Types UI Preview 03:50

In this lecture, you'll be introduced to another amazing WordPress plugin: Custom Post Types UI. When this plugin is coupled with Advanced Custom Fields, there's no stopping what you can come up with in WordPress. Seriously.

Add "Course Features" Using CPT & Advanced Custom Fields Preview 22:13

In this lecture, we'll add the course features using Custom Post Types UI and Advanced Custom Fields.

Add the "Project Features" with Custom Post Types UI Preview 12:27

In this lecture, we're going to add each individual project feature using Custom Post Types UI.

Code the Instructor Section with Advanced Custom Fields Preview 15:43

In this lecture, we're going to code the Instructor section with all it's fun little details using Advanced Custom Fields.

Code the Testimonials with Custom Post Types Preview 08:41

In this lecture we're going to code the testimonials section with Custom Post Types UI.

Clean Your Template Using get_template_part() Preview 17:57

In this lecture we're going to learn how the get_template_part() function can help clean up your templates and make future development more efficient.

Create a Custom Resources Template Preview 04:00

In this lecture we're going to code a custom template for our resources section.

Add a Feature Image, and a Fallback Image Preview 06:47

In this lecture we're going to learn how to add a feature image in a template, and have a fallback image just in case there's no feature image present.

How to Add a Resource and Display It In Your Custom Theme Preview 16:48

In this lecture we're going to add some resources using Custom Post Types UI, then code our resources template to dynamically display each individual resource.

Easily Set Up Your Custom Blog Index Page Preview 05:21

In this lecture, we'll learn to easily set up the custom blog index page.

Code Your Individual Blog Excerpts Preview 17:15

In this lecture we're going to code the individual blog excerpts in WordPress.

Code the Full Blog Post Preview 05:31

In this lecture we're going to code the full blog post template.

Style and Customize the Comments Section Preview 05:12

In this lecture we're going to style and customize the comments section of our custom WordPress blog.

Customize the Archive Template Preview 06:58

In this lecture we're going to customize the archive template.

Customize the Search Results Template Preview 05:47

In this lecture we're going to customize the search results template.

Create & Customize a Full Width Template Preview 07:40

In this lecture we're going to create & customize a full-width WordPress template.

Install Contact Form 7 Plugin and Add Your Custom Form Preview 12:31

In this lecture we're going to install the plugin Contact Form 7 and create a fully functional, custom form.

Adding & Customizing Your Sidebar Widgets Preview 09:56

In this lecture we're going to add and customize the sidebar widgets.

Register and Organize Your Custom WordPress Menus Preview 10:24

In this lecture we're going to learn how to "register" custom WordPress menus, and we'll organize them using the Dashboard.

Create a Useful & Engaging 404 Page Preview 13:53

The 404 page is very important — in this lecture we'll learn how to properly utilize your 404 page to keep your traffic flowing, and NOT lose visitors.

First, You're Going To Need a Reliable & Affordable Web Host Preview 07:40

In this lecture we're going to learn about hosting your WordPress website.

Install WordPress Like a Pro Preview 03:44

In this lecture we're going to learn how to install WordPress on a live server like the pros!

Track Your Visitors With Google Analytics Preview 03:24

In this lecture we're going to learn why Google Analytics is so important — and we'll install it in minutes!

Install and Configure Your Custom WordPress Theme on a Live Server Preview 11:23

You've installed WordPress, but now you need to install your theme with all of your work you've put into it! We cover all that and more in this lecture.

You've Created Your Own Custom WordPress Theme! Now What? Preview 05:25

You did it! You've created, coded, and installed a 100% custom WordPress theme with Bootstrap. You've equipped yourself with a skill that is seriously valuable — what will you do now?

Bonus Lesson Preview 00:23

This lesson includes some bonus resources to further your web design & development journey with Brad Hussey