Unit Theme Tutorial
Pages inside the Unit Theme have the department’s name displayed in a banner along the top of the page; on the left is a sidebar navigation menu. The content area is 818px wide and the left sidebar content width is 233px.
The left navigation menu is managed in the WP Admin–> Appearance–> Menus screen. WordPress has a simple drag and drop feature for editing menus. Indent a menu item to have it open under its parent in a drop down menu.
You can add additional content under the left sidebar menu by going to the WP–> Appearance–> Widgets screen and dragging the desired widget to the Sidebar Navigation Menu. The widget titled jQuery Vertical Accordion Menu is your navigation menu and is added to the sidebar by default when your site is created by the web team.
Home Page – Optional Layout
In the WP Pages menu, you’ll find a new page titled “Sample Layout – Optional Home Page” or similar. This layout option includes several widget-ready areas and one large area for a banner image (recommended) or slideshow. There is also a horizontal menu for quick access to key areas of your site.
The use of this layout for your site’s home page is optional. If you don’t have enough content or graphics for the optional layout, you can just use the default page template for your site’s home page.
Horizontal Menu Bar:
The horizontal menu bar on the home page is managed in the WP Admin–> Appearance–> Menus screen. To appear on the home page, the menu must be set as the “Primary” navigation in the WP Menus admin screen. This is set by default when the web team creates your site.
You can edit the menu items that appear on the home page menu bar in WP Admin–> Appearance–> Menus. Choose “Home Page Menu.” It is recommended that you include no more than 4-6 menu items.
The home page menu does not display second-level drop down items. Its purpose is to link to primary pages within your site – About Us, Services/Programs, Contact Us, News, etc. Additional pages can be included on the left sidebar menu that appears on all inside pages. You can also choose to include additional links in one of the home page widget areas.
Home Banner Photo:
The area for the large banner photo is 1140px wide. The height is not set, but 325px is recommended.
Edit the photo displayed on your home page in WP Admin–> Appearance–> Widgets–> Banner Photo. Expand Banner Photo and you’ll see the default image added using a Content Block. The image was added using a Content Block so that we can insert a class – img-responsive – to make the photo resize on smaller screens.
Alternatively, you can add a single photo by using the Image Widget in the Banner Photo area, however, the photo will not resize on smaller screens. You can also create a slideshow in WP Admin–>DisplayBuddy–>Slideshow, then drag the iThemes Slideshow Widget to the Banner Photo widget area. Choose the responsive option when creating the slideshow so it will scale for mobile devices.
The home page has 6 widget-ready areas laid out in two rows of three widgets. Each widget area is 350px wide. The height is not set, but widgets within the same row should be about the same height.
Manage the home page widgets in WP Admin–>Appearance–>Widgets. You’ll see the following new widget areas:
New Home Block One
New Home Block Two
New Home Block Three
New Home Block Four
New Home Block Five
New Home Block Six
Each “block” corresponds with a widget area on the home page and are ordered clockwise from left to right – New Home Block One is the first widget area on the first row of widgets, etc.
For the first row of widgets, we recommend using photos or graphics that are about 260px high with a title above the graphic in text using a heading tag (h2, h3, h4).
The widget areas are flexible – you can add single images, slideshows, videos, RSS feeds, Localist Calendar widgets, content blocks with text or links, etc. Here are examples of which widgets to use:
Video – create a Content Block and paste in the YouTube video URL (or embed code). Add the Content Block to the widget area of your choice.
Event Calendar Widget – paste the Localist calendar widget embed code into a Text widget and drag to the widget area of your choice.
Last updated: 4/4/2017