Twitter Bootstrap Free Tutorial

Creating Wordpress Theme using Bootstrap

In this tutorial, We are going to explain about creating Wordpress themes with Bootstrap Framework. This is what we are going to create, a plain Wordpress theme.

To create a simple Wordpress theme, just 4 files are enough namely,

style.css - Handles styles of your new theme.
header.php - Comprises code for header section.
index.php - Contain the main content(posts) and code for including other files.
footer.php - comprises footer section of your theme.

Step 1: Add bootstrap js and css file.

Create a folder and named as bootstrap_theme. Copy the boostrap js and css files and paste it inside the bootstrap_theme folder.

Step 2: Create header.php

Create a header.php file and paste below code in your header.php file.

<!DOCTYPE html>
<html lang="en">
  <head>
  <title><?php wp_title(''); ?></title>
  <!-- Add stylesheet 
  bloginfo('stylesheet_url') - gets stylesheet url. -->
  <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">  
  <?php wp_enqueue_script("jquery"); ?>
  <?php wp_head(); ?>
  <head>
  <body>
   <div class="row">
   <div class="col-md-12">
    <h1><a href="<?php echo home_url(); ?>" rel="nofollow"><?php bloginfo('name'); ?></a>
    <small><?php  bloginfo('description'); ?></small></h1>

<div class="navbar navbar-default navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a> <div class="nav-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="http://ieatcss.com/test">Home</a></li> <li><a href="http://ieatcss.com/test/freebies">Freebies</a></li> <li><a href="http://ieatcss.com/test/category/web-design/">Web Design</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="container">

Step 3: Create index.php

Create a index.php file and paste below code in your index.php file.

<?php get_header(); ?>

<div class="row">
  <div class="col-md-9">

	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
		<p>Posted on <?php the_time('F j, Y') ?> by <?php the_author_posts_link(); ?>  - <?php the_category(', ') ?></p>
        <hr>

	<section class="entry-content clearfix" itemprop="articleBody">
		<?php the_post_thumbnail('full'); ?>
		<?php the_content(); ?>
	</section> <!-- end article section -->
						
	<?php endwhile; else: ?>
		<p><?php _e('Sorry, this page does not exist.'); ?></p>
	<?php endif; ?>

  </div>
  <div class="col-md-3">
	<?php get_sidebar(); ?>	
  </div>
</div>
<?php get_footer(); ?>

Step 4: Create footer.php

Create a index.php file and paste below code in your index.php file.

<hr />	
  <footer>
   <div class="col-md-12 columns">		
    <p class="source-org copyright">&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>.</p>
   </div>		
  </footer>
  </div> 
  <!-- /container -->
 <?php wp_footer(); ?>
 </body>
</html>

Step 5: Create sidebar.php

Create a sidebar.php file and paste below code in your sidebar.php file.

<div id="sidebar" role="complementary">
	<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
		<?php dynamic_sidebar( 'sidebar' ); ?>
	<?php else : ?>
	<!-- This content shows up if there are no widgets defined in the backend. -->
	<div class="alert help">
		<p><?php _e("Please activate some Widgets.", "ieatcsstheme");  ?></p>
	</div>
	<?php endif; ?>
</div>

Step 6: Create style.css

Create a style.css file and paste below code in your style.css file.

/*Theme Name: Bootstrap Wordpress Theme
Theme URI: http://www.ieatcss.com
Description:
Author Name: Nazurudeen
Author URI: http://www.ieatcss.com
Version: 1.0
Tags: responsive, bootstrap
*/
@import url('bootstrap/css/bootstrap.css'); 
@import url('bootstrap/css/bootstrap-responsive.css'); 
body { 
     padding-top: 60px; 
     padding-bottom: 40px; 
}
 
.entry-content {
  /*
  image alignment on a screen this size may be
  a bit difficult. It's set to start aligning
  and floating images at the next breakpoint,
  but it's up to you. Feel free to change it up.
  */ }
  .entry-content dd {
    margin-left: 0;
    font-size: 0.9em;
    color: #787878;
    margin-bottom: 1.5em; }
  .entry-content img {
    max-width: 100%;
    height: auto; }
  .entry-content video, .entry-content object {
    max-width: 100%;
    height: auto; }
  .entry-content pre {
    background: #eee;
    border: 1px solid #cecece;
    padding: 10px; }

/* end .entry-content */
.wp-caption {
  max-width: 100%;
  background: #eee;
  padding: 5px;
  /* images inside wp-caption */ }
  .wp-caption img {
    max-width: 100%;
    margin-bottom: 0;
    width: 100%; }
  .wp-caption p.wp-caption-text {
    font-size: 0.85em;
    margin: 4px 0 7px;
    text-align: center; }

Step 7: Create functions.php

Create a functaions.php file and paste below functions code in your functions.php file.

<?php 
function ieatcss_jquery()
{
	// Register the script like this for a theme:
	wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
	// For either a plugin or a theme, you can then enqueue the script:
	wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'ieatcss_jquery' );
if ( function_exists('register_sidebar') )
   register_sidebar(array(
   		'id' => 'sidebar',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3>',
    	'after_title' => '</h3>',
	));
?>