How to: Add jScrollPane Scrollbars to WordPress Twenty Eleven Child Theme

Overview: Add iFrame-like scrolling to content, but only on specific pages

Solution: Create Page template and add jScrollPane jQuery

Live example: jScrollPane jQuery scrollbars on Body Conceptions

1. Download jScrollPane – Cross-browser styleable scrollbars with jQuery and CSS

2. Place Script and Style folders in child theme folder

3. Copy header.php file from Twenty Eleven, and add:

<!-- Start jScrollPane styling http://jscrollpane.kelvinluck.com/ -->
<!-- styles needed by jScrollPane -->
<link type="text/css" href="<?php bloginfo( 'stylesheet_directory' ); ?>/style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/script/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/script/jquery.jscrollpane.min.js"></script>
<!-- jScrollPane function -->
<script type="text/javascript" id="sourcecode">
$(function()
{
$('.scroll-pane').jScrollPane(
{
autoReinitialise: true, /* Fix for scrollbars on Safari/Chrome WebKit. About page content wasn't scrolling all the way to the bottom. */
showArrows: true,
verticalDragMinHeight: 10,
verticalDragMaxHeight: 10,
verticalGutter: 15,
}
);
});
</script>
<!-- End jScrollPane styling http://jscrollpane.kelvinluck.com/ -->

4. Copy page.php file from Twenty Eleven, rename to iframe-page.php and make it a template file.

Add the following to the top of the file:

* Template Name: iFrame Template
* Description: A Page Template that adds an iFrame to pages

Then, wrap get_template_part with the scroll-pane and box classes, like this:

<div class="scroll-pane box">
<?php get_template_part( 'content', 'page' ); ?>
</div>

5. style.css file (this is NOT to style the scrollbars):

.box {
float: right;
height: 330px;
overflow: auto;
width: 490px;
}

6. All scrollbar styling is done via jScrollPane’s stylesheet, located at: child theme > style > jquery.jscrollpane.css