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:

[php]<!– Start jScrollPane styling –>
<!– 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="">
<!– 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">
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,
<!– End jScrollPane styling –>[/php]

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:

[php]* Template Name: iFrame Template
* Description: A Page Template that adds an iFrame to pages[/php]

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

[php]<div class="scroll-pane box">
<?php get_template_part( ‘content’, ‘page’ ); ?>

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

[css].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

2 thoughts on “How to: Add jScrollPane Scrollbars to WordPress Twenty Eleven Child Theme”

  1. Pingback: PSD to WordPress Child Theme – Body Conceptions | WordPress customization • Website design • Loyalty cards • Promotional materials

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top