Creating Wordpress Theme using Bootstrap
In this tutorial, We are going to explain about creating Wordpress themes with Bootstrap Framework. This is what we are going to create, a plain Wordpress theme.
To create a simple Wordpress theme, just 4 files are enough namely,
- style.css - Handles styles of your new theme.
- header.php - Comprises code for header section.
- index.php - Contain the main content(posts) and code for including other files.
- footer.php - comprises footer section of your theme.
Step 1: Add bootstrap js and css file.
Create a folder and named as bootstrap_theme. Copy the boostrap js and css files and paste it inside the bootstrap_theme folder.
Step 2: Create header.php
Create a header.php file and paste below code in your header.php file.
<!DOCTYPE html> <html lang="en"> <head> <title><?php wp_title(''); ?></title> <!-- Add stylesheet bloginfo('stylesheet_url') - gets stylesheet url. --> <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet"> <?php wp_enqueue_script("jquery"); ?> <?php wp_head(); ?> <head> <body> <div class="row"> <div class="col-md-12"> <h1><a href="<?php echo home_url(); ?>" rel="nofollow"><?php bloginfo('name'); ?></a> <small><?php bloginfo('description'); ?></small></h1><div class="navbar navbar-default navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a> <div class="nav-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="http://ieatcss.com/test">Home</a></li> <li><a href="http://ieatcss.com/test/freebies">Freebies</a></li> <li><a href="http://ieatcss.com/test/category/web-design/">Web Design</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> </div> </div> <div class="container">
Step 3: Create index.php
Create a index.php file and paste below code in your index.php file.
<?php get_header(); ?> <div class="row"> <div class="col-md-9"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p>Posted on <?php the_time('F j, Y') ?> by <?php the_author_posts_link(); ?> - <?php the_category(', ') ?></p> <hr> <section class="entry-content clearfix" itemprop="articleBody"> <?php the_post_thumbnail('full'); ?> <?php the_content(); ?> </section> <!-- end article section --> <?php endwhile; else: ?> <p><?php _e('Sorry, this page does not exist.'); ?></p> <?php endif; ?> </div> <div class="col-md-3"> <?php get_sidebar(); ?> </div> </div> <?php get_footer(); ?>
Step 4: Create footer.php
Create a index.php file and paste below code in your index.php file.
<hr /> <footer> <div class="col-md-12 columns"> <p class="source-org copyright">© <?php echo date('Y'); ?> <?php bloginfo('name'); ?>.</p> </div> </footer> </div> <!-- /container --> <?php wp_footer(); ?> </body> </html>
Step 5: Create sidebar.php
Create a sidebar.php file and paste below code in your sidebar.php file.
<div id="sidebar" role="complementary"> <?php if ( is_active_sidebar( 'sidebar' ) ) : ?> <?php dynamic_sidebar( 'sidebar' ); ?> <?php else : ?> <!-- This content shows up if there are no widgets defined in the backend. --> <div class="alert help"> <p><?php _e("Please activate some Widgets.", "ieatcsstheme"); ?></p> </div> <?php endif; ?> </div>
Step 6: Create style.css
Create a style.css file and paste below code in your style.css file.
/*Theme Name: Bootstrap Wordpress Theme Theme URI: http://www.ieatcss.com Description: Author Name: Nazurudeen Author URI: http://www.ieatcss.com Version: 1.0 Tags: responsive, bootstrap */ @import url('bootstrap/css/bootstrap.css'); @import url('bootstrap/css/bootstrap-responsive.css'); body { padding-top: 60px; padding-bottom: 40px; } .entry-content { /* image alignment on a screen this size may be a bit difficult. It's set to start aligning and floating images at the next breakpoint, but it's up to you. Feel free to change it up. */ } .entry-content dd { margin-left: 0; font-size: 0.9em; color: #787878; margin-bottom: 1.5em; } .entry-content img { max-width: 100%; height: auto; } .entry-content video, .entry-content object { max-width: 100%; height: auto; } .entry-content pre { background: #eee; border: 1px solid #cecece; padding: 10px; } /* end .entry-content */ .wp-caption { max-width: 100%; background: #eee; padding: 5px; /* images inside wp-caption */ } .wp-caption img { max-width: 100%; margin-bottom: 0; width: 100%; } .wp-caption p.wp-caption-text { font-size: 0.85em; margin: 4px 0 7px; text-align: center; }
Step 7: Create functions.php
Create a functaions.php file and paste below functions code in your functions.php file.
<?php function ieatcss_jquery() { // Register the script like this for a theme: wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) ); // For either a plugin or a theme, you can then enqueue the script: wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'ieatcss_jquery' ); if ( function_exists('register_sidebar') ) register_sidebar(array( 'id' => 'sidebar', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>', )); ?>