Use Twitter Bootstrap in your WordPress Theme in Three Easy Steps
WordPress is great, Bootstrap is cool, I want to use them together!
For Twitter Bootstrap to work you need to include at least three files in any of your web pages:
- bootstrap.css (included with the Bootstrap download)
- bootstrap.js (included with the Bootstrap download)
- jquery.js
Download WordPress and install it. Create a new theme. Download Bootstrap and unzip it to your theme’s folder. OK.
Step one
Include bootstrap.css in your theme style.css:
@import url("bootstrap/css/bootstrap.min.css");/*
Theme Name: My New WordPress Theme
Theme URI: http://localhost
Description: WordPress Test Theme
Author: My Name Here
Author URI: http://localhost
Template:
*/
/*
* 1. Import the Bootstrap css
*/
@import url("bootstrap/css/bootstrap.min.css");
/*
* Some fancy styling for Bootstrap spans
*/
.span4, .span8
{
background-color: #ade;
}
Step two
Bootstrap needs JQuery to work so link to it in your theme index.php:<!-- 2. Bootstrap needs JQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Include bootstrap.js in index.php:
<!-- 3. Import Bootstrap.js -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<! DOCTYPE html>
<html>
<head>
<title>My New WordPress Theme</title>
<!-- The theme's style.css file -->
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<!-- 2. Bootstrap needs JQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- 3 .Import Bootstrap.js -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<?php wp_head(); ?>
</head>
<body>
<!-- Bootstrap in action -->
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<p>Just to</p>
</div>
<div class="span8">
<p>see if it works</p>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">create</a></li>
<li><a href="#">a few</a></li>
<li><a href="#">stacked</a></li>
<li class="active"><a href="#">Bootstrap</a></li>
<li><a href="#">pills</a></li>
</ul>
</div>
<div class="span8">
<p>Random content here.</p>
</div>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>
0 comments:
Post a Comment