Infinite Scroll Automatically append the next page of posts to your page when a user scrolls to the bottom. The concept of loading the next content continuously as the users scrolling down the page. So long as there is still content available scrolling will keep showing the next line of content. You can find this kind of experience implemented in Facebook, LinkedIn , twitter.

WordPress Plugin Installation
Download the plugin. http://wordpress.org/plugins/infinite-scroll/
1- Install it to your /wp-content/plugins/ directory
2- Activate the plugin in your WordPress Admin UI.
3- Visit the Settings / Infinite Scroll page to set up the css selectors.

infinite-scroll screenshot 1

IT is  very easy to create a responsive navigation menu that will automatically turn into dropdown list for small  screens by  bootstrap.

 

 

 

 

Responsive navigation menu using twitter bootstrap

 


1. Download bootstrap files
2. Create an html file and place the ‘bootstrap’ folder from the download in the same location as this html file. will  need ‘bootstrap.css’,’bootstrap.responsive.css’ and ‘bootstrap.js’  from the download.
3. Put  below code in the html file you created.

 

<!DOCTYPE html>
<html>
<head>
 <title>Responsive Menu </title>
<!-- Mobile viewport optimized -->
  <meta name="viewport" content="width=device-width">
<!-- CSS -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />   
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />

 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>

</head>
<body>
<div class="container-fluid">
<header>
<h2>Responsive Navigation  Bootstrap</h2>
<br/>
<div class="row-fluid">
<div class="navbar navbar-inverse">
  <div class="navbar-inner">
    <div class="container-fluid">
  <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>
  <div class="nav-collapse collapse">
  <ul class="nav">
   <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
   <li><a href="#">Features</a></li>
   <li><a href="">Pricing</a></li>
   <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="#">Latest Products</a></li>
    <li><a href="#">Popular Products</a></li>
    </ul>
   </li>          
   <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Membership<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Personal Membership</a></li>
      <li><a href="#">Premium Membership</a></li>
    </ul>
   </li>
   <li><a href="#">Offers</a></li>
   <li><a href="#">Gallery</a></li>
   <li><a href="#">About Us</a></li>
   <li><a href="#">Contact</a></li>
   <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    </ul>
   </li>
        </ul>
    </div>
    </div>
  </div>
</div>

</div>
</header>
<div>
</body>
</html>

 

wordpressBootstrap

In this tutorial, we will learn how to make our own responsive WordPress theme using Bootstrap.  Bootstrap is a responsive framework for building web sites and applications, and it’s a great starting point for building a responsive WordPress theme.

You don’t have to have built a theme from scratch before to successfully follow along.  However, we do assume that you are comfortable doing things like adding and editing posts in the admin area or installing plugins.

The theme we will build is based on the Basic marketing site example you can find over on the Bootstrap examples page. For this demo we will build out templates for the following pages and functionality:

  • Custom homepage design
  • About page
  • Contact page
  • News section with comments
  • A widgetized sidebar

Getting Started

Before we get started there are a few things you will need to do:

  • Install WordPress
  • Download and Unzip Bootstrap
  • Install the Theme Test Drive plugin*

* You only need this plugin if you will be building the theme using a live site and don’t want people to see the new theme while you are developing it.

Read more: http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial