How To Make A Twitter Bootstrap Theme Pt: 1

How To Make A Custom Wordpress Theme with Twitter Bootstrap

Updated with Bootstrap 3

Fork from GitHub

 

About This Tutorial:

  • Difficulty: Beginner
  • Completion Time: 1 Hour

Prerequisites

Although this tutorial is for beginners, I am assuming you have WordPress installed and ready to go, are comfortable with FTP and modifying template files.

If you are not comfortable with these things I suggest heading over to Lynda.com or
Team Tree House and brushing up.

Please share and leave comments with any feedback or questions.

You can also contact me directly at mchavez@space-rocket.com

    1. Go to _s http://underscores.me/ and DL theme.
Go to _s http://underscores.me/ and DL theme.
    1. Go to https://github.com/twitter/bootstrap and DL Bootstrap.
Go to  https://github.com/twitter/bootstrap and DL Bootstrap.
    1. Put “my-awesome-bootstrap-theme” in your themes folder.
Put “my-awesome-bootstrap-theme” in your themes folder.
    1. Unzip the Twitter Bootstrap folder. Copy assets from Bootstrap.
Copy assets from BS
    1. Paste the assets folder into your twitter bootstrap theme folder.
Paste the assets folder into your theme folder.
    1. Open up your twitter bootstrap theme functions.php file. Find where the CSS and JavaScript are en queued
Open up your functions.php file. Find where the CSS and JavaScript are en queued
    1. en queue the bootstrap CSS and JS files scripts


/**
* Enqueue scripts and styles.
*/
function my_awesome_bootstrap_theme_scripts() {
wp_enqueue_script( 'My Awesome Bootstrap Theme-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.css', array( ), false, 'all' );
wp_enqueue_style( 'responsive', get_template_directory_uri() . '/assets/css/responsive.css', array( ), false, 'all' );
wp_enqueue_script( 'affix', get_template_directory_uri() . '/assets/js/affix.js', array('jquery'), false, true );
wp_enqueue_script( 'alert', get_template_directory_uri() . '/assets/js/alert.js', array('jquery'), false, true );
wp_enqueue_script( 'button', get_template_directory_uri() . '/assets/js/button.js', array('jquery'), false, true );
wp_enqueue_script( 'carousel', get_template_directory_uri() . '/assets/js/carousel.js', array('jquery'), false, true );
wp_enqueue_script( 'collapse', get_template_directory_uri() . '/assets/js/collapse.js', array('jquery'), false, true );
wp_enqueue_script( 'customizer', get_template_directory_uri() . '/assets/js/customizer.js', array('jquery'), false, true );
wp_enqueue_script( 'dropdown', get_template_directory_uri() . '/assets/js/dropdown.js', array('jquery'), false, true );
wp_enqueue_script( 'modal', get_template_directory_uri() . '/assets/js/modal.js', array('jquery'), false, true );
wp_enqueue_script( 'navigation', get_template_directory_uri() . '/assets/js/navigation.js', array('jquery'), false, true );
wp_enqueue_script( 'popover', get_template_directory_uri() . '/assets/js/popover.js', array('jquery'), false, true );
wp_enqueue_script( 'scrollspy', get_template_directory_uri() . '/assets/js/scrollspy.js', array('jquery'), false, true );
wp_enqueue_script( 'skip-link-focus-fix', get_template_directory_uri() . '/assets/js/skip-link-focus-fix.js', array('jquery'), false, true );
wp_enqueue_script( 'tab', get_template_directory_uri() . '/assets/js/tab.js', array('jquery'), false, true );
wp_enqueue_script( 'tooltip', get_template_directory_uri() . '/assets/js/tooltip.js', array('jquery'), false, true );
wp_enqueue_script( 'transition', get_template_directory_uri() . '/assets/js/transition.js', array('jquery'), false, true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );}
if ( is_singular() && wp_attachment_is_image() ) {
wp_enqueue_script( 'My Awesome Bootstrap Theme-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20120202' );
}
}
add_action( 'wp_enqueue_scripts', 'my_awesome_bootstrap_theme_scripts' );

    1. Go to https://github.com/twittem/wp-bootstrap-navwalker and DL
    2. Optional: enque holder.js. Holder js allows you to have placeholder img by using an example like this: <img data-src=”holder.js/200×200″ alt=”A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera”>
Go to https://github.com/twittem/wp-bootstrap-navwalker and DL
    1. Put twitter_bootstrap_nav_walker.php in your inc folder
put walker nav in your inc folder
    1. en queue wp walker nav inside functions.php inside the my_awesome_bootstrap_theme_setup() function
my_awesome_bootstrap_theme_setup
    1. Open up header.php and cut div class site-branding and nav id site navigation and paste it into a separate file, name it nav.php and save in your inc folder inside twitter bootstrap theme.
cut div class site-branding and nav id site navigation
    1. Open up index.html in bootstrap master folder and copy the Navbar markup. Paste into nav.php.
copy the Navbar markup
    1. Paste the code from https://github.com/twittem/wp-bootstrap-navwalker where the ul of the bootstrap navigation is in nav.php
Paste the code from https://github.com/twittem/wp-bootstrap-navwalker where the ul of the bootstrap navigation is in nav.php


wp_nav_menu( array(
'menu' => 'top_menu',
'depth' => 2,
'container' => false,
'menu_class' => 'nav',
'fallback_cb' => 'wp_page_menu',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);
?>

    1. Copy and paste the div with the class “screen-reader-text skip-link” and put into before the ul
Copy and paste the div with the class "screen-reader-text skip-link" and put into before the ul
    1. Optional: You can pick and choose which dynamic content from the div class branding and nav id site navigation you’d like to add to your bootstrap navigation menu.
    2. Delete the remaining parts of div class branding and nav id site navigation. You should now just have the markup from div class Navbar that we took from bootstrap.
Delete the remaining parts of div class branding and nav id site navigation. You should now just have the markup from div class Navbar that we took from bootstrap.
    1. Go back to header.php and put this code to include your My Awesome Bootstrap Theme navigation menu with the following include statement:


include (TEMPLATEPATH . '/inc/nav.php' );

Go back to header.php and put this code to include your My Awesome Bootstrap Theme navigation menu with the following include statement
    1. create some sample pages, create your custom menu and add your desired pages to the menu
create some sample pages, create your custom menu and add your desired pages to the menu
    1. lets take a look at the progress…
lets take a look at the progress… Desktop lets take a look at the progress… Mobile

There you go. Please share and leave comments. If you have any questions, I am glad to help.

You can also contact me directly at mchavez@space-rocket.com

Stayed tuned for part II, where we will style the theme with LESS and make it awesome.

Shoutouts