New Topic

Reply To: Sidebar

Home › Forum › Customization › Sidebar › Reply To: Sidebar

#293

StartupWP
Keymaster

This will be a multi-step customization.

You’ll need a good text/code editor:
http://www.barebones.com/products/textwrangler/ (Mac)
http://notepad-plus-plus.org/ (Win)

And you’ll also need to know how to FTP (check with your host support/documentation if you need help with this).

1. Unless you intend on not upgrading to new versions and just managing the theme yourself you’ll need to setup a child theme:

https://startupwp.com/topic/child-theming/

2. Copy over functions.php to the child theme folder and find the widget code inside, the last registered widget area should look like:

register_sidebar( array (
'name' => __('Content Widget Area', 'startup' ),
'id' => 'content-widget-area',
'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => "</li>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

Just copy that and add your new one below with whatever details you’d like to use, suggested:

register_sidebar( array (
'name' => __('Far Right Sidebar Widget Area', 'startup' ),
'id' => 'frsidebar-widget-area',
'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => "</li>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

3. Copy over the template-sidebar-right-right.php file from the /templates/ folder, but just place it in the root of the child theme folder (so no templates folder) and rename to template-sidebar-three-right.php or whatever you like.

4. Open it up, and find this line:

<?php get_footer(); ?>

Just above that paste in:

<div id="frsidebar-sidebar">
<?php if ( is_active_sidebar("frsidebar-widget-area") ) : ?>
<div id="frsidebar" class="widget-area">
<ul class="sid">
<?php dynamic_sidebar("frsidebar-widget-area"); ?>
</ul>
<div class="clear"></div>
</div>
<?php endif; ?>
</div>

5. Add the following CSS to the child theme stylesheet:

.page-template-template-sidebar-three-right-php #content{width:48%;padding:0;margin:0 0 0 2%}
#frsidebar-sidebar{width:14%;margin:0 2%;float:left}

6. Upload and activate the child theme like any other theme (though manually – or you could just zip it and do it the automatic way too).

7. Edit a page and switch the template to the new one you just created and save, add widgets to the new sidebar under Appearance > Widgets.

Please Note: This has not been tested. However should work just fine. The only thing that could likely need adjustment is the CSS.