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

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
Wordpress Themes - Why Themes are so popular with developers and site owners?2:52
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
Up and running with Bootstrap - Get the development environment ready and setup.4:30
Look and Feel - Beautiful color scheme!4:51
Bootstrap Header design - Adding our logo and creating a nice menu structure.7:00
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
Carousel - Adding a sweet slide show Bootstrap element to the design.4:25
Carousel - Adding real images and the Finished Boostrap 3 Prototype Walkthrough.3:49
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
Slicing up the design - From the Bootstrap 3 design into the slick new WP Theme!11:06
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
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
Connecting the WordPress menu system into the Bootstrap 3 design.3:18
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
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
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
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

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: