Forum Replies Created
-
AuthorPosts
-
November 22, 2012 at 6:16 am #1007SanthoshParticipant
Hi Scott Voth,
Thank you very much for moving the question to right place and giving the helpful screenshot.
In my Question i was trying ask How to add a New Sidebar to Right Side of the Content Section.
I found an example from the Themes Doc and successfully added an Alternate Side Bar.
=======>
Advanced Example: Adding a Alternate Sidebar to your Theme.
In this example we’ll add a widgetized sidebar to your Child Theme using the grid.js file we created in the previous example and some code in functions.php of your Child Theme.
Step 1:
First we’ll register the new sidebar by adding the following code to functions.php
/** * Register sidebars */ function infinity_base_alt_sidebar() { register_sidebar(array( 'name' => 'Alternative Sidebar', 'id' => 'alt-sidebar', 'description' => "The Alternative widget area", 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4>', 'after_title' => '</h4>' )); } add_action( 'init', 'infinity_base_alt_sidebar' );
Now that we’ve added the sidebar we can use hooks to insert the actual HTML before the content.
Step 2:
We’ll use theopen_main_wrap
hook to add the html and php code the templates. This hooks allows you to insert content just before the content div, just at the right place to insert a 2nd sidebar.Add this code to functions.php of your Child Theme:
// Alt Sidebar function example_alt_sidebar() { { ?> <!-- html --> <div id="sidebar-alt"> <?php if ( is_active_sidebar( 'alt-sidebar' ) ) { dynamic_sidebar( 'alt-sidebar'); } else { ?> <div class="widget"><h4>Blog Sidebar.</h4> <a href="<?php echo home_url( '/' ); ?>wp-admin/widgets.php" title="Add Widgets">Add Widgets</a></div><?php } ?> </div> <!-- end --> <?php }} // Hook into action add_action('open_main_wrap','example_alt_sidebar');
Step 3:
Now that we have everything in place, all we need to do is add the proper CSS grid classes with our Grid.js file to get the layout we want.Add the following code to your Grid.js file
/** * Copyright © 2011 Bowe Frankema */ (function($){ $(document).ready(function() { // remove the default Grid classes jQuery('#content').removeClass('grid_16'); jQuery('#sidebar').removeClass('grid_8'); //add a new grid class jQuery('#content').addClass('grid_14'); jQuery('#sidebar').addClass('grid_5'); jQuery('#sidebar-alt').addClass('grid_5 alpha'); }); })(jQuery);
We’ve now created and added a new sidebar to Infinity with only a few lines of code and no templates modifications. Because we use jQuery to add the CSS grid classes to the templates this layout can me modified quick and easy and is fully compatible with BuddyPress and other plugins.=========>
I have added the default sidebar to Left of Theme. Now i am trying to position the Second Sidebar to Right Side of the Theme Content Section ( as a 3Column Theme, Sidebar Left | Content Section | Sidebar Right)without modifying the core files.
Any help will be GREATLY appreciated.
-
AuthorPosts