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 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;">&copy; 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.