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.
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>© <?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’, ”, ”, false );
wp_register_script( ‘respond_js’, ‘https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js’, ”, ”, 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!
Sandy | Full stack Web developer 