Last updated on May 24th, 2014 at 05:08 pm
In this post we will learn how to create a wordpress full responsive blog theme with bootstrap. Bootstrap is one of the most popular front-end framework. You can also learn some basic of Bootstrap design from my last post of bootstrap at here.
Using bootstrap for wordpress theme development make your work more easy and help to work fast with designing.
What is a Responsive Theme?
There are no of devices with different screen sizes and different resolution and operating systems in market and we need to create a website which suits or adjust to these screen so we can use responsive design to get this thing done.
“WordPress + Bootstrap = New Powerful, attractive and responsive website.”
Back in 2013 Google has also published their guideline on “Building Smartphone-Optimized Websites“ that contains details in entirety about how Google treats responsive websites. And Google’s Webspam team head Matt Cutts, also release a video in which he explain that responsive design does not affect your website seo click here to read.
WordPress + Bootstrap
WordPress is one of the most popular CMS which is used to create a blog and websites in world. 20% websites over internet are created on wordpress. With the rise of the responsive web, most renowned theme developers adapted to responsive designs and introduced easy-to-understand frameworks, like Redux Framework, Carrington Core, Bootstrap etc., that can be used to create a full responsive WordPress theme from scratch.
Now! Start building your first Responsive blog theme.
Download latest version of wordpress from wordpress official website. And you also download bootstrap file from there official website getbootstrap.com. Hope you know how to install a wordpress. You can also learn some basic tuts of creating theme in wordpress from my last post at here.
You can also download my demo theme from above download link to try your self. In this wordpress theme i am using bootstrap to create a simple but full responsive theme in which i write less css and use most of design from bootstrap framework.
Codes:
header.php
<?php
/**
* The Header template for theme
*/
?>
<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.2, user-scalable=yes" />
<title><?php is_home() ? bloginfo('name') : wp_title(''); ?></title>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
<link rel="shortcut icon" href="http://trinityblog.in/favicon.ico" />
<link rel="author" href="https://plus.google.com/+AnehThakur" />
<!--[if IE 8]>
<script src="<?php echo get_template_directory_uri(); ?>/scripts/html5.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/scripts/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
<? if(is_home()){?>
<meta name="description" content="Trinity blog is one of the best programming and tutorial blog focused on google, website, php, ajax, android, jquery, css - trinity tuts canyon">
<? }else{?>
<meta name="description" content=" <?php the_title();?> - Trinity blog is one of the best programming and tutorial blog for beginners focused on php, ajax, android, jquery, css - trinity tuts canyon">
<? }?>
<?php wp_head(); ?>
</head>
<body>
<!-- Bootstrap header -->
<header>
<div class="navbar navbar-inverse navbar-static-top header-background">
<div class="container">
<div class="navbar-header">
<!-- Button for responsive menu //-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="<?=bloginfo('url')?>" class="navbar-brand logo-adj">TrinityTuts</a>
</div>
<nav>
<?php
wp_nav_menu( array(
'menu' => '',
'theme_location' => 'header-menu',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav navbar-right',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</nav>
</div>
</div>
</header>
In header.php i am using bootstrap CDN to get bootstrap css in bootstrap we have some predefined set of classes which help us to achieve best design.
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
But in menu there is a small change you need to install some extra class to get your bootstrap menu adjust in your wordpress theme.
<?php wp_nav_menu( array( 'menu' => '', 'theme_location' => 'header-menu', 'depth' => 2, 'container' => 'div', 'container_class' => 'collapse navbar-collapse', 'container_id' => 'bs-example-navbar-collapse-1', 'menu_class' => 'nav navbar-nav navbar-right', 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker()) ); ?>
You can download nav walker class from Github and include that file into your wordpress theme functions.php file. To register your wordpress menu add below given code to your functions.php file and to call navigation menu to your theme you can use above given code to your theme .
function register_my_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
'extra-menu' => __( 'Extra Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );
Now we are going to create this theme for blog so we work on 2 main page in first one is index.php in our theme where we load list of blogs we posted and in 2nd page we can load specific blog which user want to read in single.php.
index.php
index.php contain all list of our posted blog and show pagination to load old post
<?php
/**
* The main template file
*/
get_header(); ?>
<!-- Main content -->
<main>
<div class="container main-content">
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="row stairs-row">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
the_post_thumbnail('full');
?>
<div class="article span8">
<article class="article-post">
<a href="<?php the_permalink();?>"><h2><?php the_title();?></h2></a>
<p><?php the_excerpt(); ?></p>
<span class="post-date"><?php echo get_the_date(); ?></span>
</article>
</div>
<?php endwhile; endif;
wp_reset_query();
?>
<div class="right right-align">
<!-- Pagination -->
<?php manu_numeric_posts_nav(); ?>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<?php get_sidebar();?>
</div>
</div>
</div>
</main>
<?php
get_footer();
To display pagination in your theme i use this function
<?php manu_numeric_posts_nav(); ?>
and code to get the pagination for any wordpress blog is:
/********************Pagination Function Starts Here***************************/
function manu_numeric_posts_nav() {
if( is_singular() )
return;
global $wp_query;
/** Stop execution if there's only 1 page */
if( $wp_query->max_num_pages <= 1 )
return;
$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
$max = intval( $wp_query->max_num_pages );
/** Add current page to the array */
if ( $paged >= 1 )
$links[] = $paged;
/** Add the pages around the current page to the array */
if ( $paged >= 3 ) {
$links[] = $paged - 1;
$links[] = $paged - 2;
}
if ( ( $paged + 2 ) <= $max ) {
$links[] = $paged + 2;
$links[] = $paged + 1;
}
echo '<ul class="pagination">' . "\n";
/** Previous Post Link */
if ( get_previous_posts_link() )
printf( '<li>%s</li>' . "\n", get_previous_posts_link() );
/** Link to first page, plus ellipses if necessary */
if ( ! in_array( 1, $links ) ) {
$class = 1 == $paged ? ' class="active"' : '';
printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
if ( ! in_array( 2, $links ) )
echo '<li>…</li>';
}
/** Link to current page, plus 2 pages in either direction if necessary */
sort( $links );
foreach ( (array) $links as $link ) {
$class = $paged == $link ? ' class="active"' : '';
printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
}
/** Link to last page, plus ellipses if necessary */
if ( ! in_array( $max, $links ) ) {
if ( ! in_array( $max - 1, $links ) )
echo '<li>…</li>' . "\n";
$class = $paged == $max ? ' class="active"' : '';
printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
}
/** Next Post Link */
if ( get_next_posts_link() )
printf( '<li>%s</li>' . "\n", get_next_posts_link() );
echo '</ul>' . "\n";
}
/********************Pagination Function Ends Here***************************/
add this function to your functions.php and call this function in index.php page where you want to display pagination.
Now we can create a sidebar for theme before we create sidebar we need to create a function where we can write code for sidebar in functions.php as shown below.
function quickchic_widgets_init() {
register_sidebar(array(
'name' => __( 'Socail Badges' ),
'id' => 'sidebar-1',
'before_widget' => '<div class="socail-widget">',
'after_widget' => '</div>',
'before_title' => '',
'after_title' => '',
));
register_sidebar(array(
'name' => __( 'Advertise'),
'id' => 'sidebar-2',
'before_widget' => '<div class="socail-widget">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
}
add_action( 'init', 'quickchic_widgets_init' );
Now we can call our sidebar function in sidebar.php to display side bar information as shown below
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?> <?php dynamic_sidebar( 'sidebar-1' ); ?> <?php dynamic_sidebar( 'sidebar-2' ); ?> <?php endif; ?>
To know more about wordpress and bootstrap download this theme and explore it.
Happy coding!.