Bootstrap 3 -> Profitable WordPress Theme Development!

Develop stunning Bootstrap 3 WordPress site Themes! Amazing step-by-step secrets to a mobile first Bootstrap site!
4.7 (75 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.
5,529 students enrolled
58% off
Take This Course
  • Lectures 40
  • Length 3.5 hours
  • Skill Level All Levels
  • 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


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.

About This Course

Published 10/2014 English

Course 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



  • 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!


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!

What are the requirements?

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

What am I going to get from this course?

  • 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

Who is the target audience?

  • Web Developers
  • Web Designers
  • Online Marketers

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.


Section 1: Introduction to the course

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!
Wordpress Themes - Why Themes are so popular with developers and site owners?

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?
2 questions
Section 2: Bootstrap 3: Design the Prototype
Rough draft - Included elements to talk about the needs with the customer.
Up and running with Bootstrap - Get the development environment ready and setup.
Look and Feel - Beautiful color scheme!
Bootstrap Header design - Adding our logo and creating a nice menu structure.
Glyphicons in Bootstrap - Great for adding light-weight graphics to the design.
Footer Design - Embedding a Google Map and an address to the footer region.
Carousel - Adding a sweet slide show Bootstrap element to the design.
Carousel - Adding real images and the Finished Boostrap 3 Prototype Walkthrough.
Bootstrap 3 Prototypes
1 question

Bad example -

Simple example -

Newspaper -
-5 columns
-non responsive

Newsweek -
-bootstrap 3


-container - around all
-row - contains the columns
-col-md-xx - for the content


Use CDNs when they are available!


Let others worry about hosting these common files

Better performance

Better when moving the project into the "real world"

Go to - Getting started

bootstrap.min.css -> style.css

bootstrap.min.js - bootstrap.html

Bootstrap 3 Cheat Sheet!
1 page

The zip file with the code for the prototype

Section 3: PHP for Wordpress Theme Developers
PHP Quick Minicourse
Section 4: Wordpress Theme: Step-by-Step - Creating From Scratch
Begin from Scratch - Step-by-Step - Empty folder to a working WordPress Theme!
Slicing up the design - From the Bootstrap 3 design into the slick new WP Theme!

Here we go over the coding needed to get the WordPress loop to show us the posts.

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 want
Create a screenshot for the working WordPress Bootstrap 3 Theme
Section 5: WordPress Theme: The Important Parts
Adding real world data using Export-Import from the working WordPress site.
Connecting the WordPress menu system into the Bootstrap 3 design.
single.php - the simple way to display a single WordPress post in a nice way!
page.php - equally simple way to display a page in WordPress
category.php - 1 - now we are getting more advanced and adventurous in WP Theme!


-extra space

-xs should be one col

Cool feature:

thumbnail pop out effect





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


Cool img effect in CSS

.thumbnail img:hover {

transform: scale(1.1);

border-radius: 5px;


.thumbnail img {

transition: all 0.3s ease;

width: 100%;


Section 6: BONUS - WordPress Theme: Advanced integration
Integrating the marketing messages with the Bootstrap Glyphicons into WordPress!

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) { ?>


<?php } else { ?>


<?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 } ?>



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

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




<?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!

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:

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





function wpbootstrap_theme_customizer( $wp_customize ) {


'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',


'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!
Section 7: WordPress Theme: Wrap up

Here are the downloads:

Click here to download the file

WordPress Theme Development Cheat Sheet!
1 page
Section 8: Conclusion
Congratulations on finishing the Bootstrap 3 WordPress Theme course and a BONUS
New Bootstrap 3 and WordPress Theme course lectures coming soon!
BONUS - My other course with a HUGE discount!
Section 9: BONUS - Q&A and Case Studies
CASE STUDY: Spinal Cord Injury Ontario - Annual Report by Rodney Ronquillo
Q&A Blab 1: Bootstrap and WordPress - HTML and PHP integration and more!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Thrandur Arnthorsson, BsCS, Web Solution Provider and Entrepreneur

Thrandur has a BS degree in Computer Science from the University of Iceland and a Diploma in Entrepreneurship from Klak Business Accelerator.

He has great passion for spreading the joy of web design and web development using best practices and simple and easy to use tools - preferably free.

Through the years Thrandur has created a number of popular websites and rock solid software solutions - some for high paying customers. Recently he discovered how to use free tools like Inkscape and Bootstrap 3 to create beautiful web designs and how to use WordPress, Bootstrap 3, PHP and MySQL for profitable web development.

Discover how YOU too can create inspirational websites using mood boards and style tiles to mobile first design! Have your customer feast her eyes on the bright and rich style tiles you create with Inkscape and allow them to taste the sweet and colorful nuggets of Bootstrap 3 goodies!

Dive further into the world of WordPress and Bootstrap 3 web development. 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 these courses to inspire your boss and draw in new customers with your stunning skills.


o WordPress Development - custom themes and plugins using Bootstrap 3, PHP and MySQL

o Web Design - using Inkscape and Bootstrap 3

o Project Management - with Trello and Google Drive

o Video Creation - for Youtube and Udemy using Camtasia and Explaindio

o Online Marketing - best way for Google search, Facebook and Youtube

What are you waiting for ... ENLIST NOW!

Ready to start learning?
Take This Course