search

nasa / nasapress

A WordPress theme built on the NASA Web Design Standards
MIT License
88 stars 22 forks source link

readme

NASAPress (a WordPress Theme)

screen shot 2018-06-15 at 12 31 39 pm

Sites using NASAPress

If you'd like your site to be added to this list please create an issue with your website name and URL.

Features

Required plugins

Recommended plugins

Designed for use with these services

Requirements

Make sure all dependencies have been installed before moving on:

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:

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

Todos

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