sidebars

Homepage Customization in Hale or Prudence

Layout and Other Theme Options

Go to Appearance > Themes and select the Customize link. From here, you have the following options:

Site Title & Tagline

Here, you can change the name of your site as it appears in the top bar. The tagline is not currently used in the system.

Template Options

Here, you can choose what kind of homepage layout you’d like, and choose to include a School, or College in your top bar.

Navigation

Here, you can choose which Menu will appear as the main navigation for the site. You can probably leave it as is. To edit your navigation, see the Navigation guide.

Static Front Page

If you’d like to switch from a traditional site layout to a blog, select “Your latest posts”.
After you’ve finished customizing, hit save in to top right corner of the side panel, and those changes will appear on the site.

Homepage Content

Go to Appearance > Widgets. From here, you have the following:

Available Widgets

This is the library, the repository of possible widgets you can use in your site. To add widgets to the Sidebar, or a Home section, drag it in. The change happens immediately. Some widgets will need to to have some settings configured before they work fully.

Widgets Page
Widgets Screen

Inactive Widgets

Located below Active Widgets, you can use this to “save” a widget and it’s settings. If you switch themes, some of your widgets may end up here.

Sidebar

Widgets placed in the Sidebar will appear on the “News” page, the search results page, the archives page, and pages that use the ‘Default w/Sidebar’ page template.

Home1-Home5

These sections correspond to the different areas of a homepage layout. They will always start form the top left, and then wrap down to a second line.

Changing Themes

On WordPress, it’s easy to change themes for a website. Simply go to Appearance > Themes, and you can preview how your site might look in another theme.

Before you decide to switch to a different theme, there are some things you should keep in mind.

The Good News

Switching themes does not destroy any pages or content that you’ve created for your site. Moreover, switching themes is reversible; if you change it and don’t like it, you can switch back.

The Tricky Parts

Top Navigation

When you switch themes, it’s possible for your top navigation menu to break. This can be fixed by going to Appearance > Menus, finding your Top Nav menu, and checking the ‘Primary Menu‘ checkbox.

Homepage

Many themes have a custom homepage page template that may not exist in a new theme. For example, switching from Hale to Sherman may wipe out the homepage. However, the widgets that created those homepages aren’t gone. If you go to Appearance > Widgets and scroll down, you’ll see them in an area for ‘unassigned widgets‘. Drag them back up to the correct sidebars and your homepage will reform itself.

In the newer themes (Hale 2015 and Sherman), you can use Page Builder to build the homepage and sub pages.  See Homepage Customization tools.

Sidebars

Some themes have sidebars that are specific to them and changing themes will move any widgets within those sidebars to the ‘unassigned widgets‘ section in Appearance > Widgets. You may need to find a new place to keep that content.

Bootstrap Layouts & Special Elements

The older Hale and Prudence themes were built on the Bootstrap 2 framework. The newer Sherman and Hale 2015 themes are built with the Bootstrap 3 framework. If your site makes use of Bootstrap columns, buttons, or accordion menus, they may not work if you switch from a Bootstrap 2 theme to a Bootstrap 3 theme.  They will fall back to being simple single column layouts, links, or text sections until you change the code to comply with the version of Bootstrap that your new theme uses.

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