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.

Getting Started

GitHub Updater

Hillsborough continues to be under active development. We welcome contributions from the broader NC State web development community, and look forward to the theme’s growth and evolution over time.

In order to take full advantage of this active development, we recommend installing it via the GitHub Updater plugin rather than simply uploading the theme files to your WordPress installation. This will ensure that your WordPress installation prompts to update you whenever the GitHub repository containing Hillsborough has a new release available.

See our brief documentation outlining how to install themes and plugins with GitHub Updater.

Note: If you are using Hillsborough in one of OIT’s managed WordPress environments—WordPress Blogs or Hosted WordPress—then OIT Design staff will ensure your version of the theme remains up-to-date.

Recommended Plugins

Out of the box, Hillsborough does not require any WordPress plugins for core functionality. However, after activating the theme you will be prompted to install and activate the Options Framework plugin. Options Framework powers the theme options that make Hillsborough customizable, but is not necessary for a simple, branded NC State website.

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 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:

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

When the Options Framework plugin is activated, 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.

Using the WordPress Customizer to make and preview changes to your website
Using the WordPress Customizer to make and preview changes to your website
Using the Theme Options Panel to make changes to your website and follow links to documentation
Using the Theme Options Panel to make changes to your website and follow links to 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
An example of a possible configuration of Hillsborough, with a widescreen layout
An example of a possible configuration of Hillsborough, with a widescreen layout
An example of a possible configuration of Hillsborough with a boxed layout
An example of a possible configuration of Hillsborough, with a boxed layout

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 ModernModern AlternativeClassic 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.

Header in the Modern style
Header in the Modern style
Header in the Modern Alternative style
Header in the Modern Alternative style
Header in the Modern Uppercase style
Header in the Modern Uppercase style
Header in the Classic 2x1 style
Header in the Classic 2×1 style
Header in the Classic 2x2 style
Header in the Classic 2×2 style
Header in the Classic Uppercase style
Header in the Classic Uppercase style

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.

Navigation Menu Behavior

Text

Parent Unit Link

Text

Display Search in Navigation Menu

Text

Footer Options

Text

Social Media

Text

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.