Bootrap Jumbotron into WordPress Theme

In this post I will use a bootstrap Jumbotron template,here is the link http://getbootstrap.com/examples/jumbotron/  I will  customize it into wordpress theme

You need download bootstrap into” yourtheme “folder, whatever theme name you like to call it.

bootstrap_to_wordpress2

 

Those fold should inside your theme folder, don’t worry what are inside it except everything from bootstrap, the other file is empty now.

1) for wordpress could read you theme you need put those on top of your style.css:

/*
Theme Name: Bootstrap to WordPress
Theme URI: http://sandywebdesigner.com
Author: Sandy Zhang
Author URI: http://sandywebdesigner.com
Description: Example theme for  how to convert static Bootstrap site into dynamic WordPress theme
Version: 1.0
License:
License URI:
Text Domain: bootstrap-to-wp

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you’ve learned with others.
*/

/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
padding-bottom: 20px;
}
.admin-bar .navbar-fixed-top {
margin-top: 30px;
}
/* Below is the style for navigation in functions.php add a class to sub-menu to the navigation so I just write a simple style to it,you could customize it by yourself */
@media (min-width:768px) {
.sub-menu {
display: none;
position: absolute;
background: #222;
padding: 10px 15px;
width: 150px;
}

li:hover .sub-menu {
display: block;
}

}

.sub-menu li {
margin-bottom: 10px;
list-style: none;
}

.sub-menu li:last-child {
margin-bottom: 0;
}

.sub-menu a  {
color: #999;
text-decoration: none;
}

.sub-menu a:hover  {
color: #fff;
}

.current-menu-item > a, .current-menu-parent > a {
background: #000;
}
.current-menu-parent li a {
background: inherit;
}
.current-menu-parent .current-menu-item a {
color: #fff;
font-weight: bold;
}

.sidebar{
margin-top:40px;
color:#444;
}
.sidebar h3{
color:#888;
}
.widget{
margin:10px 0 30px;
}
article .post{
margin:20px 0;
}

.featured-image img,
.portfolio-piece img,
.portfolio-image img {
max-width:100%;
}

.prev-next{
font-size:24px;
margin-top:30px;
text-align:right;
}

@media (max-width:540px) {
.portfolio-piece h4{
font-size:.8em;
}
.prev-next{
font-size:15px;
margin-top:15px;
text-align:right;
}

}

2)header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”shortcut icon” href=”<?php bloginfo(‘template_directory’);?>/images/favicon.ico”>

<title>
<?php wp_title(‘|’,true,’right’);?>
<?php bloginfo(‘name’)?>

</title>

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<div class=”navbar navbar-inverse navbar-fixed-top” role=”navigation”>
<div class=”container”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”.navbar-collapse”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a>
</div>
<div class=”navbar-collapse collapse”>
<?php
$args = array(
‘menu’ => ‘mainmenu’,
‘menu_class’ => ‘nav navbar-nav’,
‘container’ => ‘false’
);
wp_nav_menu($args);
?>
</div><!–/.navbar-collapse –>
</div>
</div>

3)footer.php

<hr>

<footer>
<p>&copy; <?php bloginfo(‘name’);?> <?php echo date(‘Y’); ?></p>
</footer>
</div> <!– /container –>
<?php wp_footer(); ?>
</body>
</html>

3)index.php

<?php get_header(); ?>

<div class=”container”>

<div class=”row”>
<div class=”col-md-9″>
<?php if(have_posts()):while(have_posts()):the_post();?>
<div class=”Page-header”>
<h1><?php the_title(); ?></h1>
</div>
<?php the_content();?>
<?php endwhile; else:?>

<div class=”Page-header”>
<h1>Oh no!</h1>
</div>
<p>No content is appearing for this page!</p>
<?php the_content();?>

<?php endif;?>

</div>
<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

4)functions.php

<?php
function theme_styles(){
wp_enqueue_style( ‘bootstrap_css’, get_template_directory_uri() . ‘/css/bootstrap.min.css’ );
wp_enqueue_style( ‘main_css’, get_template_directory_uri() . ‘/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘theme_styles’ );

function theme_js(){
global $wp_scripts;
wp_register_script( ‘html5_shiv’, ‘https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js&#8217;, ”, ”, false );

wp_register_script( ‘respond_js’, ‘https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js&#8217;, ”, ”, false );

$wp_scripts->add_data( ‘html5_shiv’, ‘conditional’, ‘lt IE 9’ );
$wp_scripts->add_data( ‘respond_js’, ‘conditional’, ‘lt IE 9’ );
wp_enqueue_script( ‘bootstrap_js’, get_template_directory_uri() . ‘/js/bootstrap.min.js’, array(‘jquery’), ”, true );
wp_enqueue_script( ‘theme_js’, get_template_directory_uri() . ‘/js/theme.js’, array(‘jquery’,’bootstrap_js’), ”, true );

}

add_action( ‘wp_enqueue_scripts’, ‘theme_js’ );

add_theme_support(‘menus’);
add_theme_support(‘post-thumbnails’);

function register_theme_menus() {
register_nav_menus(
array(
‘header-menu’    => __( ‘mainmenu’ )
)
);
}
add_action( ‘init’, ‘register_theme_menus’ );

function create_widget( $name, $id, $description ) {

register_sidebar(array(
‘name’ => __( $name ),
‘id’ => $id,
‘description’ => __( $description ),
‘before_widget’ => ‘<div class=”widget”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’
));
}

create_widget( ‘Front Page Left’, ‘front-left’, ‘Displays on the left of the homepage’ );
create_widget( ‘Front Page Center’, ‘front-center’, ‘Displays in the center of the homepage’ );
create_widget( ‘Front Page Right’, ‘front-right’, ‘Displays on the right of the homepage’ );
?>

See how simple it is, index.php you completed, then use this index.php to create other template like page.php. single.php, etc. Have fun!

 

 

 

 

 

 

3 thoughts on “Bootrap Jumbotron into WordPress Theme”

  1. I have seen this in Treehouse but it cause a fatal error that the function get_template_directory_uri() is not defined.

      1. Thank you for your reply I will try to tell you what did I do and the error messages I have got. You can answer when you have a free time 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s