Bootstrap, CSS, CSS3, HTML, HTML5, JavaScript, jQuery, PHP

WordPress – Using Bootstrap in Custom Theme

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

For index.php, include the following:



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

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



For footer.php, include the following:


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

		<?php wp_footer(); ?>

For functions.php, include the following:


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 *

18 − 4 =