A perfectly designed theme has the caliber of adding a unique tint of elegance and professionalism even into the very plain, boring WordPress website/blog. Among the huge crowd of frond-end frameworks which have been effectively utilized for creating WordPress themes from scratch, Bootstrap has emerged as one of the most effective one. While the basic idea of building a WordPress theme from scratch might seem to be quite scary for a majority of WordPress developers, in reality, it isn’t. All you’re supposed to do is simply play with a few html files along with basic WP php code and certain styles. In this post, I’ll be walking you through a simple technique of creating a fantastic WordPress theme using the Bootstrap framework. Trust me, there’s nothing overly complicated and hence you need not worry.
Step 1- Download Bootstrap from official GitHub page
Apart from the usual style.css and index.php files, you’ll need some more Bootstrap files for creating a WordPress theme using Bootstrap. For this, I recommend downloading Bootstrap from GitHub. While during the development stage, we’ll be using all the js and css coding, while finishing the theme, it will be essential to remove/slim down any unused code. This will be done for speeding up the resultant WordPress theme.
Step 2- Prepare the Theme Folder
After having downloaded Bootstrap, you should open the Bootstrap zip where you’ll find individual folders for js, css and img. Copy all these folders into a theme folder i.e. any empty folder, preferable with a name that includes a specific number.
Step 3- Create the three files that are vital for accurate functioning of the WordPress theme
After having copied all the folders, it’s time to create three more files that would mark the appropriate functioning of the WordPress theme. These files include: index.php, functions.php and style.css. Add these three files into theme folder(the one created in step 2) along with other Bootstrap files/folders.
Step 4- Set up your WordPress theme
As the very first step here, you need to add the comment block to top of the style.css file.
Below is the code which informs WordPress that the files in the folder create a theme called My Bootstrap Theme with version 0.1. Plus, it also tells that the author has imported bootstrap.min.css file which includes responsive stylesheet.
/*
Theme Name: Bootstrap Theme
*/
@import url(“css/bootstrap.min.css”);
Tweaking WordPress Index.php file
With a very basic markup, the index.php file will display the title of your WordPress website. Now, you just need to paste the below code into the index.php file:
<!DOCTYPE html>
<!–[if IE 7]>
<html class=”ie ie7″ <?php language_attributes(); ?>>
<![endif]–>
<!–[if IE 8]>
<html class=”ie ie8″ <?php language_attributes(); ?>>
<![endif]–>
<!–[if !(IE 7) | !(IE 8) ]><!–>
<html <?php language_attributes(); ?>>
<!–<![endif]–>
<html>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″>
<title><?php wp_title(”); ?></title>
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<div>
<h1 id=”site-title”><?php echo get_bloginfo(‘name’) ?></h1>
</div>
</header>
<section id=”content”>
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
</section>
<?php wp_footer(); ?>
</body>
</html>
Adding specific PHP functions to our Basic Functions File
As per this step, we’ll add some php functions so as to include the style and script. You’ll need two functions- one for adding the stylesheet and other one for adding the Javascript.
Below is the code, when when added to the functions.php file will create a function which will queue up jQuery library and the Bootstrap JavaScript file:
function my_scripts() {
wp_enqueue_script( ‘jquery’, ‘//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js’, ‘1.9.1’, true); // Bootstrap relies on we need the jquery library
wp_enqueue_script( ‘bootstrap-js’, get_template_directory_uri() . ‘/js/bootstrap.min.js’, array(‘jquery’), true); // all the Bootstrap javascript goodness
}
add_action(‘wp_enqueue_scripts’, ‘my_scripts’);
Next, here’s the code that allows you to include JavaScript:
function my_styles() {
wp_enqueue_style( ‘bootstrap-style’, get_template_directory_uri() . ‘/css/bootstrap.min.css’);
wp_enqueue_style( ‘my-bootstrap-style’, get_template_directory_uri() . ‘/style.css’); } add_action(‘wp_enqueue_scripts’, ‘my_styles’);
Here’s a look at the complete functions.php file which wraps the above two functions in php tags:
<?php
function my_scripts() {
wp_enqueue_script( ‘jquery’, ‘//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js’, array(‘jquery’), ‘1.9.1’, true); // we need the jquery library for the Bootstrap plugins
wp_enqueue_script( ‘bootstrap-js’, ‘js/bootstrap.min.js’, array(‘jquery’), true); // all the Bootstrap javascript plugin goodness
}
add_action(‘wp_enqueue_scripts’, ‘my_scripts’);
function my_styles() {
wp_enqueue_style( ‘bootstrap-style’, get_template_directory_uri() . ‘/css/bootstrap.min.css’);
wp_enqueue_style( ‘my-bootstrap-style’, get_template_directory_uri() . ‘/style.css’);
}
add_action(‘wp_enqueue_scripts’, ‘my_styles’);
?>
With that you’re done with creating a Bootstrap powered WordPress theme. You can opt for adding some Bootstrap markup to make the WordPress theme look like a proper web page.
Conclusion
Here’s hoping the above post would have allowed you to dip deep into the concept of building a remarkable WordPress theme using Bootstrap. So, the next time you’re planning to create a new WP theme, don’t refrain from choosing the simple-to-use Bootstrap framework.
Author Biography:
Samuel Dawson has vital skills to develop instant results in developing any web development application. He is a comprehensive player in converting PSD to WordPress in very less time. Samuel is quality expert of various web design & development projects.
You must be logged in to post a comment.