How To Create Responsive WordPress Theme From Scratch with Bootstrap – Twitter

How To Create Responsive WordPress Theme From Scratch with Bootstrap – Twitter
This tutorial will show you how to create a simple Responsive WordPress Theme From Scratch with Bootstrap – Twitter. When building your own website theme, you can use Free WordPress Responsive themes for reference.

 

Step 1: Preparing folders and files
Open your WordPress Folder and creat sub-folder called “responsive_theme” in the ‘wp-content/themes’ directory in your WordPress folder.
For example: http://www.joomres.com/wp-content/themes/responsive_theme/
With Filezilla and/or hosting controlpanel file manager you can easy to do it.
Creat folders and files list below:
responsive_theme/header.php – This file will contain the code for the header section of the theme;
responsive_theme/index.php – This is the main file for the theme. It will contain the code for the Main Area and will specify where the other files will be included;
responsive_theme/sidebar.php – This file will contain the information about the sidebar;
responsive_theme/footer.php – This file will handle your footer;
responsive_theme/style.css – This file will handle the styling of your new theme;
You can either create those files in your local with a simple text editor(like notepad for example) or Notepad Pluss and upload them to your theme folder.

Step 2: Download Responsive Bootstrap – Twitter files

What is bootstrap?

Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3.

Bootstrap Twitter Features

By nerds, for nerds: Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.
Made for everyone: Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.
Packed with features: A 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.

Download lastest Bootstrap and upload all folders (including: css, img, js) to your theme folder

Step 3: to Work with your files

 

recommend to use text editor Notepad Pluss to open/edite your php and css file.
a. The header.php file code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.css" rel="stylesheet">
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
<link href="="<?php echo get_template_directory_uri(); ?>/css/bootstrap-responsive.css" rel="stylesheet">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5shiv.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body>

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" 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>
</button>
<a class="brand" href="#"><?php bloginfo('name'); ?></a>
<div class="nav-collapse collapse">
<p class="navbar-text pull-right">
Logged in as <a href="#" class="navbar-link">Username</a>
</p>
<ul class="nav">
<?php wp_list_pages(array('title_li' => '', 'exclude' => 4)); ?>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>

b. The index.php file code


<?php get_header(); ?>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<?php get_sidebar(); ?>
</div><!--/span-->
<div class="span9">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>
<div class="row-fluid">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="span4">
<h2><?php the_title(); ?></h2>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>           
</div><!--/row-->      
</div><!--/span-->
</div><!--/row-->

<hr>
<?php get_footer(); ?>
</div><!--/.fluid-container-->

c. The sidebar.php file code


<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header"><?php _e('Categories'); ?></li>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
<li class="nav-header"><?php _e('Archives'); ?></li>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div><!--/.well -->

d. The footer.php file code


<footer>
<p>&copy; Company 2013. Developed by <a href="http://joomres.com" title="Responsive templates">Responsive templates</a> | <a href="http://joomquery.com" title="Responsive templates">JoomQuery</a></p>
</footer>

</div><!--/.fluid-container-->

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap-transition.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap-alert.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap-modal.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap-dropdown.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap-scrollspy.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap-tab.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap-tooltip.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap-popover.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap-button.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap-collapse.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap-carousel.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap-typeahead.js"></script>

Now you can upload to your theme folder and Login backent to setup your new theme is default.
Any bugs or questions please send to http://www.joomres.com

To download files  http://www.joomres.com/wp-content/themes/responsive_theme/responsive_wordpress_theme.zip

Readmore

How to create responsive Prestashop theme with Twitter Bootstrap from scratch

How to creat joomla template 3.0 step by step: Boostrap and responsive Joomla 3.0 template

 

Be Sociable, Share!

Leave a comment