How do I add a Sidebar to the jQuery Homepage Templates?

Posted in: , ,
Please note: we highly recommend backing up the original jQuery page templates before attempting the modifications below. This will enable you to easily revert back to proper page template should something go wrong during the modifications.

Overview

This article describes how to modify the jQuery slider page templates in order to enable a sidebar area.

General Instructions:

Here’s a general overview of the steps required for this modification:

  1. First decide which page template you’d like to modify (jQuery 2 or jQuery 1). Next decide whether you would like to add left sidebar or right sidebar.
  2. Log into your website via FTP and access the main Karma theme folder:
    (/wp-content/themes/Karma)
  3. Use the provided code below to modify your page template(s)

Instructions for jQuery 2 Page Template:

File name: template-homepage-jquery-2.php

Scroll to the end of the file and locate the following code:

<div id="main">
<div class="main-area home-main-area">
<div class="main-holder home-holder">
<div class="content_full_width">
<?php if(have_posts()) : while(have_posts()) : the_post(); the_content(); truethemes_link_pages(); endwhile; endif;
comments_template('/page-comments.php', true);
get_template_part('theme-template-part-inline-editing','childtheme'); ?>
</div><!-- end content -->
</div><!-- end main-holder -->
</div><!-- main-area -->

<?php get_footer(); ?>

And change to the following:

(for a Left Sidebar use this code)

<div id="main">
<div class="main-area home-main-area">
<div class="main-holder home-holder">
<div id="content" class="content_left_sidebar">
<?php if(have_posts()) : while(have_posts()) : the_post(); the_content(); truethemes_link_pages(); endwhile; endif;
comments_template('/page-comments.php', true);
get_template_part('theme-template-part-inline-editing','childtheme'); ?>
</div><!-- end content -->

<div id="sidebar" class="left_sidebar">
<?php generated_dynamic_sidebar(); ?>
</div><!-- end sidebar -->

</div><!-- end main-holder -->
</div><!-- main-area -->

<?php get_footer(); ?>

(for a Right Sidebar use this code)

<div id="main">
<div class="main-area home-main-area">
<div class="main-holder home-holder">
<div id="content">
<?php if(have_posts()) : while(have_posts()) : the_post(); the_content(); truethemes_link_pages(); endwhile; endif;
comments_template('/page-comments.php', true);
get_template_part('theme-template-part-inline-editing','childtheme'); ?>
</div><!-- end content -->

<div id="sidebar" class="right_sidebar">
<?php generated_dynamic_sidebar(); ?>
</div><!-- end sidebar -->

</div><!-- end main-holder -->
</div><!-- main-area -->

<?php get_footer(); ?>

Finishing Steps:

  • Upload this newly updated page template and you’ll be all good to go.
  • To display the sidebar simply edit your page’s content from within the WordPress Dashboard and select the Sidebar you wish to display from the built-in “Sidebar” dropdown on the Page Editing Screen.

Please note that doing this customization will affect the contents of the Home Page such as Columns and other shortcodes so use accordingly.


Instructions for jQuery 1 Page Template:

File name: template-homepage-jquery-2.php

Scroll to the end of the file and locate the following code:

<div class="home-jquery-content">
<?php if(have_posts()) : while(have_posts()) : the_post(); the_content(); truethemes_link_pages(); endwhile; endif;
comments_template('/page-comments.php', true);
get_template_part('theme-template-part-inline-editing','childtheme');
?>
</div><!-- end home-jquery-content -->
</div><!-- end content -->
</div><!-- end main-holder -->
</div><!-- main-area -->

<?php get_footer(); ?>

And change to the following:

(for a Left Sidebar use this code)

<div class="home-jquery-content">

<div id="content" class="content_left_sidebar">
<?php if(have_posts()) : while(have_posts()) : the_post(); the_content(); truethemes_link_pages(); endwhile; endif;
comments_template('/page-comments.php', true);
get_template_part('theme-template-part-inline-editing','childtheme');
?>
</div><!-- end content -->

<div id="sidebar" class="left_sidebar">
<?php generated_dynamic_sidebar(); ?>
</div><!-- end sidebar -->

</div><!-- end home-jquery-content -->

</div><!-- end content -->
</div><!-- end main-holder -->
</div><!-- main-area -->

<?php get_footer(); ?>

Then add the following code to the Custom CSS area in Site Options > Styling Options:

.home .left_sidebar {margin-left:0px !important;}

(for a Right Sidebar use this code)

<div class="home-jquery-content">

<div id="content">
<?php if(have_posts()) : while(have_posts()) : the_post(); the_content(); truethemes_link_pages(); endwhile; endif;
comments_template('/page-comments.php', true);
get_template_part('theme-template-part-inline-editing','childtheme');
?>
</div><!-- end content -->

<div id="sidebar" class="right_sidebar">
<?php generated_dynamic_sidebar(); ?>
</div><!-- end sidebar -->

</div><!-- end home-jquery-content -->
</div><!-- end content -->
</div><!-- end main-holder -->
</div><!-- main-area -->

<?php get_footer(); ?>

Then add the following code to the Custom CSS area in Site Options > Styling Options:

.home #content {margin-left:0px !important;}

Finishing Steps:

  • Upload this newly updated page template and you’ll be all good to go.
  • To display the sidebar simply edit your page’s content from within the WordPress Dashboard and select the Sidebar you wish to display from the built-in “Sidebar” dropdown on the Page Editing Screen.

Please note: If you have existing content on your homepage you will likely need to update the content after creating this custom page template. (ie. instead of using “four_col_large” image frames you will need to use “four_col_small” image frames.)