New Topic

Sidebar

Home › Forum › Customization › Sidebar

This topic contains 1 reply, has 2 voices, and was last updated by  StartupWP 6 years, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #292

    chaz
    Participant

    I am looking to duplicate the right sidebar so I would add a “Sidebar Three Right” how should I go about added another sidebar?

    Thanks!

    #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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.