NASAPress (a WordPress Theme)

Project status: Deprecated / legacy theme

NASAPress is no longer under active NASA development or support. This repository is being retained as a historical reference for legacy NASA Glenn Research Center websites that still use the theme.

NASAPress should be treated as unsupported legacy code. No new feature development is planned, and the repository may be archived.

Support and compatibility status

NASAPress is a legacy WordPress theme used for older NASA Glenn Research Center web properties, including www1.grc.nasa.gov and related support sites.

Based on current operational assessment, WordPress for these remaining legacy sites is expected to remain fixed at WordPress 6.3.5 for the remainder of their service life.

Because NASAPress is no longer actively maintained, compatibility with newer WordPress core releases, newer PHP versions, and current or future plugin releases is not guaranteed.

In particular, some plugins may require newer WordPress versions or may introduce regressions or incompatibilities when used with this theme and its older codebase.

Recommendation: use NASAPress only in limited sustainment mode until the remaining legacy sites are retired. Avoid elective enhancements or major theme changes.

Repository notice

This repository contains historical source code and older front-end build tooling. Security notices associated with dependency files in this repository should be understood in that context. The repository is not intended to represent an actively maintained or modern WordPress theme baseline.

Sites using NASAPress

Legacy NASA Glenn Research Center websites, including www1.grc.nasa.gov and related support sites.

Historical theme information

The remainder of this README is preserved primarily for historical/reference purposes and reflects the original installation, setup, and development guidance for NASAPress.

Features

• Built on Sage 9.0.0-beta.3
• Sass for stylesheets
• ES6 for JavaScript
• Webpack for compiling assets, optimizing images, and concatenating and minifying files
• Browsersync for synchronized browser testing
• Laravel's Blade as a templating engine
• NASA Glenn Web Design System based on the U.S. Web Design System for CSS framework
• Font Awesome

Required plugins

• Add Categories to Pages
• Advanced Custom Fields

Recommended plugins

• NASAPress Companion
  • adds shortcodes for displaying nasa.gov news articles, spinoffs, and lists of pages.
• Advanced TinyMCE Configuration
  • allows editors to add NASA Web Design Standards styles to elements in the visual text editor.
• TinyMCE Advanced
• Better WordPress External Links
  • Plugin Settings:
    • Set External links' CSS class to usa-external_link
    • Uncheck 'Use CSS provided by this plugin?'
• Disable Search
  • if using DigitalGov Search
• Responsive Lightbox
  • for viewing images in a lightbox.
• Yet Another Related Posts Plugin
• Yoast SEO
  • for breadcrumbs
• Gravity Forms and Gravity Forms Survey Add-On
  • for site feedback form and other forms.
• Popup Maker
  • for displaying site feedback form in a popup window.
• Hide YouTube Related Videos
• Broken Link Checker

Designed for use with these services

• Digital Analytics Program
• DigitalGov Search

Requirements

Make sure all dependencies have been installed before moving on:

• WordPress >= 4.7
• PHP >= 5.6.4
• MySQL >= 5.6 or MariaDB >= 10.0
  • Earlier versions don't support FULLTEXT index for InnoDB engine required by YARPP plugin. See this explanation of issue.
• Composer
• Node.js >= 6.9.x
• Yarn

Theme installation

Clone this repo into your WordPress themes directory.

Install Composer dependencies:

# @ app/themes/nasapress or wp-content/themes/nasapress
$ composer install

Run yarn from the theme directory to install dependencies. If you won't be making changes to the theme's static assets (css, javascript, images) then run yarn install --production.

Update resources/assets/config.json settings:

• devUrl should reflect your local development hostname
• publicPath should reflect your WordPress folder structure (/wp-content/themes/nasapress for non-Bedrock installs)

Theme setup

Search the theme folder for todo-config. These comments mark the locations where you'll likely need to make customizations for your site.

Add top navigation

Create a menu and assign it to the 'Primary Navigation' location.

Enable breadcrumbs

Install and activate the Yoast SEO plugin. Follow steps 1-5 in this guide to enable yoast breadcrumbs.

Enable related pages

If you want to show related pages at the bottom of pages install and activate the YARPP plugin. On the plugin settings, you might see a message about 'consider titles' and 'consider bodies' being disabled due to InnoDB... If you are using MySQL 5.6 or greater, expand the message and click the 'Create FULLTEXT indices' button to enable them.

Under display options, select 'Pages', then click the Custom button and make sure 'You Might Also Like' is selected as the template file.

Add NASA Web Design Standards styles to Visual Editor

todo

Add site feedback form

todo

Using the theme

Page templates

Home page

Although not technically a template the theme expects a static front page and styles it differently than the others. Use the following as a starting point for this page.

<div class="usa-overlay"></div>

<section class="usa-hero">
  <div class="usa-grid">
    <div class="usa-width-one-half">
      <h1>Shaping the world of tomorrow</h1>
    </div>
  </div>
  <div class="usa-grid">
    <div class="usa-width-one-half">
      <p class="usa-font-lead">By developing technologies that will enable further exploration of the universe and revolutionize air travel</p>
    </div>
  </div>
  <div class="usa-grid">
    <div class="usa-width-two-thirds">
      <div class="video-container">
        https://www.youtube.com/watch?v=5VHPanW6F4E
      </div>
    </div>
  </div>
</section>

Landing Page

The landing page template features a large hero image with leading paragraph followed by text. Make sure your featured image is large enough to not pixellate too much at larger screen sizes.

Default template

The default template has no top hero section.

On this page navigation

The default and landing page templates automatically convert h2, h3, and h4 tags into left 'in page' navigation. For shorter pages, this may not be desired, and can be turned off in the "On this page" settings on the edit page screen. In this section, you can also change which heading tags to convert to navigation.

Setting NASA Official

A NASA Official can be added or changed on the edit page category screen. You can select from any users of your WordPress site.

Theme structure

themes/your-theme-name/   # → Root of your Sage based theme
├── app/                  # → Theme PHP
│   ├── lib/App/          # → NASAPress functions
│   ├── lib/Sage/         # → Blade implementation, asset manifest
│   ├── admin.php         # → Theme customizer setup
│   ├── filters.php       # → Theme filters
│   ├── helpers.php       # → Helper functions
│   └── setup.php         # → Theme setup
├── composer.json         # → Autoloading for `app/` files
├── composer.lock         # → Composer lock file (never edit)
├── dist/                 # → Built theme assets (never edit)
├── node_modules/         # → Node.js packages (never edit)
├── package.json          # → Node.js dependencies and scripts
├── resources/            # → Theme assets and templates
│   ├── assets/           # → Front-end assets
│   │   ├── config.json   # → Settings for compiled assets
│   │   ├── build/        # → Webpack and ESLint config
│   │   ├── fonts/        # → Theme fonts
│   │   ├── images/       # → Theme images
│   │   ├── scripts/      # → Theme JS
│   │   └── styles/       # → Theme stylesheets
│   ├── functions.php     # → Composer autoloader, theme includes
│   ├── index.php         # → Never manually edit
│   ├── screenshot.png    # → Theme screenshot for WP admin
│   ├── style.css         # → Theme meta information
│   └── views/            # → Theme templates
│       ├── layouts/      # → Base templates
│       └── partials/     # → Partial templates
└── vendor/               # → Composer packages (never edit)

Theme development

Build commands

• yarn run start — Compile assets when file changes are made, start Browsersync session
• yarn run build — Compile and optimize the files in your assets directory
• yarn run build:production — Compile assets for production

Todos

Make site title customizable in wp-admin. Make right side of footer customizable in wp-admin.