WordPress.org

Forums

[resolved] Custom Sidebars: 2 Sidebars, 2 different ID Tags? (3 posts)

  1. samanthaclaire
    Member
    Posted 1 year ago #

    Hi there!
    I need to know how to have 2 different ID tags for my sidebars. I have 2 Sidebars set up, but they both have the same #sidebar id.

    I need two different tags because I need to format the menus differently for each menu.

    How do I assign the sidebars different ids, so one can be just #sidebar and the other one #rightsidebar ? How do I link the ids to where they need to go?

    This is the 1st sidebar (the left) sidebar-custom.php:

    <div id="sidebar">
    
    <ul>
          <?php
          if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('custom-sidebar') ) :
          endif; ?>
          <div style="width: 2px; height:200px; background-color: #D6D6D6"></div>
       </ul>
    </div>

    This is the right sidebar sidebar-right.php:

    <div id="sidebar">
    
    <ul>
          <?php
          if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('right-sidebar') ) :
          endif; ?>
       </ul>
    </div>

    Here is the functions:

    if ( function_exists('register_sidebar') ) {
    register_sidebar(array(
    'name' => 'Right Sidebar',
    'id' => 'right-sidebar',
    'description' => 'Appears as the sidebar on the custom homepage',
    'before_widget' => '<div style="height: 20px"></div><li id="%1$s" class="widget %2$s">',
    'after_widget' => '',
    'before_title' => '<h3 class="widgettitle">',
    'after_title' => '</h3>',
    ));
    }
    
    if ( function_exists('register_sidebar') ) {
    register_sidebar(array(
    'name' => 'Custom Sidebar',
    'id' => 'custom-sidebar',
    'description' => 'Appears as the custom sidebar on the left of the page',
    'before_widget' => '<div style="height: 20px"></div><li id="%1$s" class="widget %2$s">',
    'after_widget' => '',
    'before_title' => '<h2 class="widgettitle">',
    'after_title' => '</h2>',
    ));
    }

    If you could explain to me how the <div id="sidebar"> works- what does it do? Or just in general explain this code, line by line.. It works but I want to know why.

  2. radgh
    Member
    Posted 1 year ago #

    edit both files,

    sidebar-custom.php:
    change id="sidebar" to id="sidebar-left"

    sidebar-right.php:
    change id="sidebar" to id="sidebar-right"

    The div tag is just a block-level container that doesn't do anything. It's not even part of wordpress.

    Note that changing the ID will probably require you to modify your stylesheet, any reference to #sidebar needs to be updated for each sidebar.

  3. samanthaclaire
    Member
    Posted 1 year ago #

    Thank you very much :)

Topic Closed

This topic has been closed to new replies.

About this Topic