National Aeronautics and Space Administration

Glenn Research Center

Home

Demonstration of all supported capabilities of the NASA GRC WordPress Responsive Child Theme and its two versions, Space and Sky, including display of plugins that enhance the theme’s CMS usability.

Introduction

This site is a demonstration of the theme’s capabilities, created from NASA WordPress customer user feedback and feature requests. This theme is responsive, using a fluid-width approach to viewing compatibility across devices (desktops, tablets, smartphones). To view how content changes to accommodate smaller devices, simply reduce the width of your browser window.

This theme is a child theme, dependent on the Genesis Framework, selected to reduce both long-term maintenance and development time.

If you require assistance or support with using this WordPress theme outside of this demo site, please visit Glenn’s WordPress Users (NASA only) 

Select the image above to view the image in a lightbox pop-up.

Select image to view the visual guide in a lightbox pop-up.

Visual Guide Tool

View the following for a quick way to visualize the content areas and see where in WordPress administration menu to update each content area. Select a version link below to view and/or download.

Layout Elements & Available Content Areas

The following content areas are user editable from the WordPress interface. In general, all of these areas are editable by a user assigned with a role of curator; while the content area is editable by users with a role of editor or below. Areas with an asterisk (*) are generally updated once during the initial set-up of the site. In parentheses at the end of each item describes the location in WordPress’ left administration menu of where to update this item.

  • NASA Header*: Contains name of NASA center, links to NASA and center, plus additional optional link area. (Genesis > Theme Settings)
  • Header Banner*: The header banner graphically establishes the current site. The standard size is exactly 960×120 pixles, but with CSS, it can be made to be less high (less than 120 pixels high). (It is possible to put custom content in the right side of the header, but this area has been underutilized.) (Appearance > Header or the WordPress “Customizer”) You will see two different headers; one in the Sky version (a graphic with text embedded) and one in the Space version (a graphic with HTML text overlaid), which responsively behave differently.
  • Primary Navigation Menu*: The top navigation below the banner, which automatically hovers any subnavigation elements, is used to promote the main pages of the site. It can be hierarchical, or you can create a custom menu to promote particular site pages/sections (Appearance > Menus if you are setting up a custom menu).
  • Primary Sidebar*: The left navigation area, which for the purposes of this demonstration mirrors the top navigation, is used frequently. A graphical left arrow signifies the page is a parent page with child pages (subpages), and you can click on the arrow to quickly display the child pages. When you arrive on a child page, the parent navigation remains unfolded to show the sibling pages in that section. (Appearance > Widgets: Sidebar or the WordPress “Customizer”)
  • Content Area: The area for the page content that a user edits in the Visual Editor. Also a dynamic content area for category and search results archives.
  • Secondary Sidebar*: Area for dynamic content that visually appears on the right side of the content. (Appearance > Widgets: Sidebar Alt)
  • Footer for Three Widgets*: For site-wide placement of dynamic or static (widget) content. (Appearance > Widgets: Footer 1, 2 and 3). Optional.
  • NASA Footer*: Contains the NASA Official, Site Curator, page modified stamp, and NASA policy links. The third link is optional. (Genesis > Theme Options)
  • Footer*: Contains “Return to Top of Page” and other links or custom content. Intended for a single line of text across the bottom of the page. (Genesis > Simple Edits)

Additional Navigation Menu Positions

The following navigation elements are not shown in this theme, but are available if needed. They are a carryover from the non-responsive version of this theme, and we are evaluating alternative ways of displaying them across responsive views. 

  • Above Header*: The navigation position above the header banner (a.k.a. “above” nav) is used when it is necessary to establish links to related/partner sites that are outside the URL of the current site. Created via a custom menu (Appearance > Menus).
  • Secondary Navigation Menu*: Appears below the Top a.k.a. Primary Navigation. (Appearance > Menus if you are setting up a custom menu)

Content Flow

The content areas flow slightly differently than what a left-to-right viewing indicates, specifically with the Content area and the Sidebars. The content flow is seen immediately on smaller devices such as tablets and smartphones. 

  1. NASA Header
  2. AboveNav
  3. Header/Banner
  4. TopNav (Primary Nav)
  5. Content Area
  6. Primary Sidebar
  7. Secondary Sidebar
  8. Footer for Three Widgets
  9. NASA Footer
  10. Genesis Footer