Hillsborough
Hillsborough is a multipurpose, NC State-branded WordPress theme. It is freely available to any campus unit through one of our managed WordPress environments or through GitHub for use on your cPanel or AFS-hosted website. Hillsborough is the base theme that OIT Design uses for many of its projects, and is designed to be flexible and extendable for any campus project.
You can view a demo site with sample content at hillsborough.wordpress.ncsu.edu.
This page provides a brief summary of Hillsborough for campus web developers. For a more detailed explanation of Hillsborough’s features, including step-by-step installation and customization instructions, visit our Theme Overview page.
Contents
Getting Started
The Hillsborough theme is available to activate in our hosted WordPress and free blog environments. Hillsborough was specifically designed to meet university brand and accessibility guidelines and can be easily installed from the dashboard of your WordPress site. OIT Design staff regularly update the theme, so you will not need to do any theme maintenance.
If you’re interested in using the theme but your site is not in OIT’s managed environment, then please see our documentation outlining how to install themes and plugins with GitHub Updater.
Plugins
Out of the box, Hillsborough does not require any WordPress plugins for core functionality. Theme options that make Hillsborough customizable are available in the dashboard but are not necessary for a simple, branded NC State website. In OIT’s managed WordPress environment, there is a curated list of plugins available.
Accessibility
OIT Design takes accessibility seriously. Hillsborough has been evaluated using WAVE, aXe, and Tenon, and has been reviewed by NC State’s IT Accessibility Coordinator. To keep your content accessible, consider using a WordPress accessibility plugin like wA11y to perform regular checks as part of your routine.
But accessibility isn’t something that can be fully automated, and we’re always eager to get feedback on how we can improve. If you or your users encounter something in Hillsborough that doesn’t behave the way you expect it to, please feel free to post an issue in the GitHub repository.
NC State Branding
Good branding is about building trust and intuition. Your users should know that they’re on a safe and trusted NC State website, and they should know where to look and how to interact with your website to find the resources and information they need.
Hillsborough has been created with the university brand guidelines at its heart and was re-written following brand training provided by University Communications. While you are ultimately responsible for the voice, tone, imagery, and other content-focused brand requirements, you shouldn’t need to make any modifications to your theme in order to meet brand requirements.
Templates, Widgets & Navigation
Page Templates
There are six page templates available for Hillsborough, reflecting a variety of possible use cases.
- Right Sidebar (Default) – Page content appears in a 3/4-width column on the left-hand side and a 1/4-width column on the right-hand side containing sidebar widgets.
- Right Sidebar, Hidden Title – Page content and sidebar widgets appear as above. The page title is hidden.
- Left Sidebar – Page content appears in a 3/4-width column on the right-hand side and a 1/4-width column on the left-hand side containing sidebar widgets.
- Left Sidebar, Hidden Title – Page content and sidebar widgets appear as above. The page title is hidden.
- Full-Width (No Sidebar) – Page content spans the full width of the page, with no sidebar widgets.
- Landing (No Sidebar, Hidden Title) – Page content spans the full width of the page, with no sidebar widgets and the page title hidden.
Each page template also has the option of displaying a featured image as a full-width banner across the top of the page:
- Right Sidebar (Default) with Featured Image
- Right Sidebar, Hidden Title with Featured Image
- Left Sidebar with Featured Image
- Left Sidebar, Hidden Title with Featured Image
- Full-Width (no sidebar) with Featured Image
- Landing (no title, no sidebar) with Featured Image
Widget Areas
The following widget areas are available in Hillsborough:
- Sidebar – Widgets placed in this widget area appear alongside pages with left and right sidebars.
- Blog Sidebar – Widgets placed in this widget area appear alongside single blog posts.
- Footer Left, Footer Center-Left, Footer Center-Right, and Footer Right – Widgets placed in these widget areas appear in the site footer.
Accessibility Note: Sidebar widgets appear in an aside element with role="complementary" in your HTML document, while your page and post content appears in a main element with role="main". This means assistive technology such as screen-reading software will announce content in your sidebar widgets as separate from the content of the page on which they appear.
With default usage of this theme, this is expected behavior. Your widgets will likely appear site-wide and will not be tailored to the content of any one page. If you are using a plugin that allows for the conditional display of widgets and you create widgets whose content is directly related to the page on which they appear, your content may be confusing or difficult to follow for assistive technology users. If you are concerned about this and need advice on proper implementation, please feel free to contact OIT Design.
Primary Navigation
Hillsborough defines one menu location, named “Primary Menu.” Menus assigned to the “Primary Menu” location will appear in the main navigation bar in the site header.
Theme Options
Hillsborough offers several customization options. You can set these using the WordPress Customizer (Dashboard > Appearance > Customize) or the Theme Options Panel (Dashboard > Appearance > Theme Options).
Customizing your website using the WordPress Customizer gives you a live preview of the updates you are making to your site as you select different options. The Theme Options Panel will not generate these live previews, but does provide assisting text and links to relevant documentation.
Basic Options
In the “Basic” section, you have the following options:
Site Width
- “Widescreen” layout (default), in which certain elements may stretch to a width of 1500 pixels
- “Boxed” layout, in which all elements are limited to a maximum width of 990 pixels
Blog Layout
- “Grid” layout (default), in which blog posts are presented in a three-column grid
- “List” layout, in which blog posts are presented in a single-column vertical list
Custom Favicon
If left blank, your website’s favicon will be the NC State Block S. If you have permission from University Communications to use a custom logo, it may make sense to use that as your custom favicon.
Header Options
In the “Header” section, you can customize the style of everything that appears in the top section of your website on every page. This includes:
Brand Utility Bar
The NC State Brand Utility Bar supports three colors:
- 90% Gray (default)
- Black
- Wolfpack Red
Note: At this time, Hillsborough’s theme options do not support using the Google Custom Search Engine functionality built into the utility bar. This is planned for a future release of the theme.
Header Style
The header style determines the display style of your website title and the style and placement of the NC State University brick logo. There are six supported styles:
- Modern (default) – 2×2 NC State brick hanging from brand bar, website name centered
- Modern Alternative – 2×2 NC State brick hanging from brand bar, website name left-aligned
- Modern Uppercase – 2×2 NC State brick hanging from brand bar, website name left-aligned, uppercase
- Classic 2×1 – 2×1 NC State brick and website name, left-aligned
- Classic 2×2 – 2×2 NC State brick and website name, left-aligned
- Classic Uppercase – 2×2 NC State brick with unit name split into two lines
Note: For the Modern, Modern Alternative, Classic 2×1, and Classic 2×2 styles, the text displayed for your website’s title is set by your Site Title under Dashboard > Settings > General, as is typical for WordPress themes.
For the Modern Uppercase and Classic Uppercase styles, you must enter your website’s title in the “Website Name, Part One” and “Website Name, Part Two” fields in your theme options. These fields appear just below your “Header Style” options, and allow you to control which segment of your site title appears as boldfaced font and which segment is normal.
See the gallery of images below for examples of each header style. Click any image to view full size.
Navigation Bar Color
NC State has 13 colors in its brand palette—three core colors, four accent grays, and six secondary colors. You can select any of these colors for your primary navigation bar.
Bootstrap Layout Shortcodes
Hillsborough is a Bootstrap theme, built using University Communications’ NC State flavor of Bootstrap. To provide additional page layout options without adding unnecessary page templates, we have included a set of Bootstrap grid shortcodes in the theme.
You can use [ row ] and [ column ] shortcodes in any post or page (minus the extra spaces, inserted to prevent the shortcodes from rendering). The [ column ] shortcode accepts the attributes lg, md, sm, and xs, corresponding to the presentational layout classes used in the Bootstrap grid scheme.
When you use the Full-width (no sidebar) and Landing (no sidebar, hidden title) page templates, you also have the option of using[ container ] and [ container-fluid ] shortcodes. These shortcodes are not available in posts and are not available in other page templates because they interfere with the display of the sidebar.
See the demo site for an extended example.
Each of the [ row ], [ column ], [ container ], and [ container-fluid ] shortcodes also accepts the attribute class="your-css-class", which allows you to style these elements with your own custom CSS classes (either in a child theme or using a plugin like Simple Custom CSS). Note that the following classes are built into Hillsborough to style a block of content with one of the colors in the NC State palette:
- wolfpackred
- white
- black
- gray10
- gray25
- gray60
- gray90
- reynoldsred
- pyromanflame
- huntyellow
- genomicgreen
- innovationblue
- bioindigo
Supported Plugins
There are several common WordPress plugins frequently used by campus units. Hillsborough attempts to anticipate some of these frequently-used plugins by including CSS rules that ensure a seamless presentation. Sample uses of each of these plugins are provided below. We plan to expand this list of supported plugins as the theme continues to develop.