WordPress – Using Bootstrap in Custom Theme

By | March 6, 2013

Create a folder name custom_theme containing index.php,header.php,footer.php,functions.php and style.css.

Download Bootstrap and extract it into custom_theme folder.

Now the structure should be as following:

Custom Theme for WordPress

Custom Theme for WordPress

Custom theme should be save in $WORDPRESS_DIRECTORY/wp-content/themes/$THEME_NAME.

For header.php, include the following:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
	</head>
	<body>
		<?php wp_enqueue_script("jquery"); ?>
		<?php wp_head(); ?>
	<div id="wrap">
		<div class="container">

For index.php, include the following:

<?php

get_header();

// ======= Start: Content Here =======			

// ======= End: Content Here =========	

get_footer(); 

?>

For footer.php, include the following:

			</div>
		</div>
		
		<hr>

		<footer>
			<p style="text-align: center;">© Your Website Name <?php echo date('Y'); ?></p>
		</footer>

		<?php wp_footer(); ?>
	</body>
</html>

For functions.php, include the following:

<?php

function wpbootstrap_scripts_with_jquery()
{
	// Register the script like this for a theme:
	wp_register_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.js' , array('jquery') );
	// For either a plugin or a theme, you can then enqueue the script:
	wp_enqueue_script( 'bootstrap-script' );
}

add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

?>

For style.css, include the following:

@import url('css/bootstrap.css'); 
@import url('css/bootstrap-responsive.css');

Reference: How to Build a Responsive WordPress Theme with Bootstrap

More reading about custom theme & functions can be use, please visit WordPress Functions.

Leave a Reply

Your email address will not be published. Required fields are marked *

three × two =