Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Bootstrap 3 -> Profitable WordPress Theme Development!

Name: Bootstrap 3 -> Profitable WordPress Theme Development!
Rating: 4.0 (82 reviews)

Develop stunning Bootstrap 3 WordPress site Themes! Amazing step-by-step secrets to a mobile first Bootstrap site!

Created byThrandur Arnthorsson

Last updated 12/2015

English

English [Auto],

What you'll learn

Create your own WordPress Theme from scratch.
Use Twitter Bootstrap to create stunning designs.
Make money selling web design services to paying customers.
Make back the investment by the first site you build instead of buy

Course content

9 sections • 40 lectures • 3h 34m total length

Why responsive web design is all the rage and why use WordPress and Bootstrap 3?2:44
I’ll go over the big question of WHY responsive web design is all the rage and then link that into Bootstrap and Wordpress development.
Get to know Bootstrap 3 - Mobile trends and responsive web development!6:12
Explore how bootstrap enables responsive WordPress themes by leveraging the 12-column grid, device viewport classes, and mobile trends to deliver consistent layouts across devices.
Wordpress Themes - Why Themes are so popular with developers and site owners?2:52
Discover why WordPress themes captivate developers and site owners, as responsive Bootstrap 3 themes and plugins enable quick, scalable look and feel changes across diverse sites.
Course overview and the Udemy environment4:14
Introducing all the sections and what they cover

How to start a Discussion

How to create a course Review

Go into a course

How courses are marked watched

Important to take all lectures

How to play the videos
Why work with WordPress and Bootstrap 3?

Rough draft - Included elements to talk about the needs with the customer.1:46
Draft a Bootstrap 3 based WordPress theme by outlining the logo, dropdown navigation, a slideshow carousel, a jumbotron, graphics with a message, and a footer with address and map.
Up and running with Bootstrap - Get the development environment ready and setup.4:30
Set up the Bootstrap 3 development environment by downloading, extracting files, and launching a local project with a jumbotron example to prototype a responsive WordPress theme.
Look and Feel - Beautiful color scheme!4:51
Apply a vibrant color scheme to the bootstrap theme by using lavish bootstrap dot com to generate color codes from an image, then create and import a custom style.css.
Bootstrap Header design - Adding our logo and creating a nice menu structure.7:00
Learn to design a Bootstrap 3 header with a logo, a right-aligned navigation bar, dropdown items, and responsive collapse for mobile displays.
Glyphicons in Bootstrap - Great for adding light-weight graphics to the design.4:34
Footer Design - Embedding a Google Map and an address to the footer region.6:57
Embed a Google Maps map and address and phone number in the footer region using an iframe, panel layout, and responsive sizing to display contact details clearly.
Carousel - Adding a sweet slide show Bootstrap element to the design.4:25
Learn to add a carousel slideshow to a Bootstrap-based design that delivers a marketing message with images, by copying working code and adjusting CSS for height and navigation margins.
Carousel - Adding real images and the Finished Boostrap 3 Prototype Walkthrough.3:49
Learn how to add real images to a Bootstrap 3 carousel, adjust image heights with CSS for responsive viewing, and complete a finished prototype before transitioning to WordPress theme development.
Bootstrap 3 Prototypes
BONUS: Bootstrap 3 Grid System!7:33
Bad example - www.sphere.bc.ca/test/sruniverse.html

Simple example - google.com

Newspaper - www.nytimes.com
-5 columns
-non responsive

Newsweek - www.newsweek.com
-responsive
-bootstrap 3

Facebook

Class
-container - around all
-row - contains the columns
-col-md-xx - for the content
Bootstrap CDN: A better way.2:57
Use CDNs when they are available!

Why?

Let others worry about hosting these common files

Better performance

Better when moving the project into the "real world"

Go to GetBootstrap.com - Getting started

bootstrap.min.css -> style.css

bootstrap.min.js - bootstrap.html
Bootstrap 3 Cheat Sheet!1:00
Pysical Deliverable - Bootstrap 3 Prototype Download0:08
The zip file with the code for the prototype

Begin from Scratch - Step-by-Step - Empty folder to a working WordPress Theme!5:18
Begin from an empty folder to build a responsive WordPress theme with Bootstrap 3, turning a prototype into a working theme by installing WordPress and adding the WP Bootstrap theme.
Slicing up the design - From the Bootstrap 3 design into the slick new WP Theme!11:06
Slice a bootstrap 3 design into a responsive WordPress theme by creating header, index, and footer templates and linking the stylesheet. Activate the theme and resolve branding issues.
The Loop - Get in touch with the workings of the WordPress core4:37
Here we go over the coding needed to get the WordPress loop to show us the posts.

NOTE
There is a small error in the coding is this video. There is a missing equal sign after the href in the a tag - before the URL. The download has the correct code.
Hooking into the navigation - Making sure the WP navigation works the way I want8:05
Hook WordPress navigation into a Bootstrap-based theme using the WP Bootstrap Walker, register the menu in functions.php, move it to the right, and explore dividers and icons.
Create a screenshot for the working WordPress Bootstrap 3 Theme1:49

Adding real world data using Export-Import from the working WordPress site.4:02
Export live site content and import it into your local WordPress development environment, then verify posts in the dashboard and clean up test data.
Connecting the WordPress menu system into the Bootstrap 3 design.3:18
Connect the WordPress menu system to a Bootstrap 3 theme, mark the primary menu, debug menu integration, and ensure Bootstrap JavaScript loads correctly for a fully connected, working navigation.
single.php - the simple way to display a single WordPress post in a nice way!2:16
page.php - equally simple way to display a page in WordPress1:01
Learn how to display a WordPress page with page.php in a responsive bootstrap-based theme, treating a page like a single post and uploading the result to see how it looks.
category.php - 1 - now we are getting more advanced and adventurous in WP Theme!7:09
category.php - 2 - fixing small problems and adding a cool effect in WordPress!5:17
Problems:

-extra space

-xs should be one col

Cool feature:

thumbnail pop out effect

Better:

col-sm-6

Delete

<div>

Add to php front - $i=0

Add clearfix

<?php if ($i % 4 == 0) { echo '<div></div>'; } ?>

<?php if ($i % 2 == 0) { echo '<div></div>'; } ?>

Add to php back - $i+=1;

Add class

<div>

Cool img effect in CSS

.thumbnail img:hover {

transform: scale(1.1);

border-radius: 5px;

}

.thumbnail img {

transition: all 0.3s ease;

width: 100%;

}

Integrating the marketing messages with the Bootstrap Glyphicons into WordPress!7:55
Integrate marketing messages into a WordPress dashboard by using custom fields and Bootstrap glyphicons on a static welcome page, allowing customers to edit text and links effortlessly.
Integrating the Bootstrap Carousel into the WordPress theme!7:42
Bootstrap Carousel Integration WordPress

----------------------------------------

copy Carousel from bootstrap.html

Before the carousel:

<?php if(is_front_page()) {?>

<?php query_posts('showposts=3&post_type=post'); ?>

After the carousel:

<?php } wp_reset_query(); ?>

The WordPress loop:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $i++; ?>

<?php if ($i==1) { ?>

<div>

<?php } else { ?>

<div>

<?php } ?>

<?php if ( has_post_thumbnail() ) {

$url = wp_get_attachment_url( get_post_thumbnail_id() );

?>

<img src="<?php echo $url; ?>" alt="<?php the_title(); ?>">

<?php } ?>

<div>

<div>

<h1><?php the_title(); ?></h1>

<p><a href="<?php the_permalink(); ?>" role="button">Read more...</a></p>

</div>

</div>

</div>

<?php endwhile; endif; ?>

STAGE 2 - style.css

-------

.carousel .item {

background-color: #000;

}

.carousel-inner > .item > img {

margin: 0 auto;

width: auto;

height: 500px;

}
Sidebar - Widgetizing our WordPress theme!8:52
Learn how to widgetize a Bootstrap 3 WordPress theme by registering a sidebar, creating a dynamic sidebar, and displaying it on single posts with widgets.
Customize Admin Panel - Allow user to change branding logo!5:13
Check out the current website and why we would like to allow

the user to make changes to the branding.

Check the Appearance Customize menu

Check the WordPress codex Theme Customization page:

https://codex.wordpress.org/Theme_Customization_API

...and some examples of controls you can use:

https://codex.wordpress.org/Plugin_API/Action_Reference/cust

omize_register

Functions.php

=============

Add:

function wpbootstrap_theme_customizer( $wp_customize ) {

$wp_customize->add_section(

'wpbootstrap_logo_section' , array(

'title' => __( 'Logo', 'wpbootstrap'

),

'priority' => 30,

'description' => 'Upload a branding logo to

the header',

) );

$wp_customize->add_setting( 'branding_logo' );

$wp_customize->add_control( new

WP_Customize_Image_Control( $wp_customize, 'branding_logo',

array(

'label' => __( 'Upload a logo',

'wpbootstrap' ),

'section' => 'wpbootstrap_logo_section',

'settings' => 'branding_logo',

) ) );

}

add_action( 'customize_register',

'wpbootstrap_theme_customizer' );
Customize Admin Panel - Connect the theme with the new branding and logo!7:44
Upload the branding logo, place it in the theme header, and use a PHP if statement to show the logo or site name, adjusting the logo class for alignment.

CASE STUDY: Spinal Cord Injury Ontario - Annual Report by Rodney Ronquillo5:21
Rodney Ronquillo demonstrates applying bootstrap techniques from this course to build Spinal Cord Injury Ontario's annual report as a dynamic, parallax animated web project with a print-to-web transition.
Q&A Blab 1: Bootstrap and WordPress - HTML and PHP integration and more!37:00
Demystify bootstrap and WordPress integration through a practical question-and-answer session, explaining HTML and PHP workflows, plugin usage like sliders, and cross-browser debugging for reliable, customizable WordPress themes.

Requirements

Some basic web concepts like HTML and CSS is preferred
Javascript and PHP knowledge is helpful

Description

UPDATE: Added for Winter 2015-2016:

PHP Quick Minicourse!
Q&A Blab - Bootstrap and WordPress HTML and PHP integration and more!

Get the Bootstrap 3 WordPress Theme course NOW while the price is still low ... just CHECK OUT THE REVIEWS below!

Join more than 5000 students who have started the Bootstrap 3 WordPress Theme course ... a HUGE thank you to each and everyone. Do not miss out - TAKE THIS COURSE NOW!

======================================================

WordPress and Bootstrap 3 is like a box of chocolates!

Sink your teeth into some amazing and tasty Bootstrap 3 treats. Enjoy the sweet aroma when you crack open the colorful pieces of smooth CSS and HTML goodies.

Delight your guests with an attractive and custom baked website that you magically piece together into a wonderful WordPress theme.

ENLIST NOW in the Develop a Bootstrap 3 WordPress Theme course to inspire your boss and draw in new customers with your stunning skills.

======================================================

An Excellent Course for Bootstrap Combined with WordPress. The instructor provides a clear and concise description of his work every step of the way. He demonstrates his knowledgeable coding skills using Notepad++ . The voice and quality of the production were excellent. I thoroughly enjoyed this course and I would recommend this to any developers or designers, beginner and advanced, interested in learning new concepts to further enhance their skills into the inner workings of Bootstrap and WordPress theming.

+Susan Cork

======================================================

Bootstrap 3 is a fantastic framework for creating websites that LOOK GREAT on all internet browsers – from mobile and tablets to desktops.

WordPress is simply the most popular website creation platform and content management system on the face of the Earth!

Bootstrap 3 and WordPress are sizzling HOT and TRENDING right NOW and FREE to use :)

Master developing for the Bootstrap 3 and WordPress Theme platforms and you'll become the obvious expert of choice!

In this course, I take you by the hand and walk you step-by-step through the slick Bootstrap HTML and CSS framework and help you build your own stunning WordPress Theme from scratch!

Learn how to create a WP Theme using Bootstrap 3 ... Enroll Now!

======================================================

Expert Guidance on Responsive Web Design with WordPress and Bootstrap 3 This course is great in explaining about responsive web design with WordPress and Bootstrap 3. The structure of the course has been well planned - each lesson is presented with great clarity in a concise, right to the point manner and the course progresses in a smooth, logical flow. From designing the prototype to creating the WordPress theme, this course is about as comprehensive as it should be without overwhelming me with too much information. Thrandur (the instructor) covers each topic with amazing attention to detail in an engaging tone. Also, working files and external resources are generously provided whenever applicable. What impresses me most are the insights he shares based on his own experience ... the practical tips that would save me a lot of time from having to figure it out myself. In a nutshell, if you're looking to learn about responsive web design with WordPress and Bootstrap 3, this course will help you get there effectively. +Michael Lim

======================================================

DISCOVER HOW TO BUILD

A Wordpress Theme from scratch
Use Twitter Bootstrap 3 to create stunning designs

Develop a Responsive WordPress Theme with Bootstrap 3 takes you stepbystep from getting set up and idea creation to a working theme that you can use or sell to high-paying customers!

If you want to make money creating websites that are easy to make and look amazing on all devices this course is for you.

Get up and running in the best-practice Bootstrap 3 framework and WordPress platform.

Full, free lifetime access
All future extra lectures and upgrades are always included for free
Unconditional Udemy 30 day money-back guarantee ... that's my personal promise of your success!

... and much, much more!

ONE FINAL POINT

Now you can have your own WordPress Bootstrap 3 Theme up and running today, right after going through this course ... and be earning big soon after that!

Click the "take this course" button, top right, now ... every hour you delay is costing you money...

Learn first hand how I create a WordPress Theme using Bootstrap 3. Scroll up and Enlist Now!

Who this course is for:

Web Developers
Web Designers
Online Marketers

Bootstrap 3 -> Profitable WordPress Theme Development!

What you'll learn

Explore related topics

Course content

Introduction to the course4 lectures • 16min

Bootstrap 3: Design the Prototype12 lectures • 50min

PHP for Wordpress Theme Developers1 lecture • 14min

Wordpress Theme: Step-by-Step - Creating From Scratch5 lectures • 31min

WordPress Theme: The Important Parts6 lectures • 23min

BONUS - WordPress Theme: Advanced integration5 lectures • 37min

WordPress Theme: Wrap up2 lectures • 1min

Conclusion3 lectures • 2min

BONUS - Q&A and Case Studies2 lectures • 42min

Requirements

Description

Who this course is for: