sidebars

Colorful Sidebar Menus

If you add a sidebar with a menu widget, you may notice that the menu is displayed in a very simple manner. Below is code that you can add to your custom CSS to add some style to your sidebar menu. This code will work with websites using the Hale 2015 and Sherman themes.

Code

#page-sidebar .widget.widget_nav_menu {
padding-left:0;
padding-right:0
}

#page-sidebar .widget ul {
margin:0
}

#page-sidebar .widget ul li {
padding:1em;
margin:0
}

#page-sidebar .widget ul li.current-menu-item,#page-sidebar .widget ul li.current-menu-item:hover,#page-sidebar .widget ul li.current-menu-item:active {
background:#0f4786
}

#page-sidebar .widget ul li:hover,#page-sidebar .widget ul li:active {
background:#dbe3ed
}

#page-sidebar .widget ul li.current-menu-item a,#page-sidebar .widget ul li.current-menu-item:hover a,#page-sidebar .widget ul li.current-menu-item:active a {
color:#fff
}
Note: The colors are marked in red — feel free to change them to whatever HEX codes you want!

Result

To see how this CSS code looks on an actual sidebar menu, visit the Development page.

Hide the Default Sidebar

The default sidebar shows up on all of your website's postsarchive pages, search results pages, and pages with the Blog template.  If you want to hide the sidebar from any or all of these types of pages, insert the following code into your Custom CSS:

Posts

.single-post #page-sidebar {
display:none
}

.single-post #page-single>.row>.col-md-9 {
width:100%
}

Search Results

#page-search #page-sidebar {
display:none
}

#page-search>.row>.col-md-9 {
width:100%
}

Archives

#page-archive #page-sidebar {
display:none
}

#page-archive>.row>.col-sm-9 {
width:100%
}

Blog Pages

#page-blog #page-sidebar {
display:none
}

#page-blog>.row>.col-sm-9 {
width:100%
}

All Relevant Pages

.single-post #page-sidebar, #page-archive #page-sidebar, #page-search #page-sidebar, #page-blog #page-sidebar {
display:none
}

.single-post #page-single>.row>.col-md-9, #page-archive>.row>.col-sm-9, #page-search>.row>.col-md-9, #page-blog>.row>.col-sm-9 {
width:100%
}

Widgets & Sidebars

WordPress widgets add content and features to your sidebars. Examples are the default widgets that come with WordPress for post categories, tag clouds, navigation, search, etc. Plugins will often add their own widgets.

Sidebars

You can create a sidebar by going to Appearance > Manage Sidebars. Under Add New Sidebar, type a name for your sidebar and click 'Add'.

Once a sidebar has been created, add widgets to it by going to Appearance > Widgets. You will see available widgets on the left side of the page and sidebars on the right. Simply drag and drop a widget onto the sidebar in which you want it to appear. Note that the Default sidebar automatically appears with Archives, Search Results, and when viewing single posts.

To get a sidebar you've created to appear on a specific page, go to edit the page. On the right side there will be a box titled 'Page Settings', under which you can choose to display one of your sidebars. There is also a checkbox to apply this same sidebar to all child pages. If you want to apply the same sidebar to an entire section of a site, this option will be useful.

Template Support

Most pages support this feature.

Theme May Assign Sidebar Uses Default Sidebar
Sherman, Hale 2015 Default Page,
A-Z Index,
Blank,
Blog,
Homepage,
User Profile
Archives,
Search Results,
Posts
Hale & Prudence Default Page,
A-Z Index,
User List,
User Profile,
User Table
Archives,
Default w/Sidebar,
Posts,
Search Results