Donate Now
Committee of Seventy Logo

Website User Guide

Committee of Seventy is a WordPress site that utilizes WordPress’s block editor. Where possible, the site and theme leverage WordPress’s native functionality to achieve its goals.

Editors who are not familiar with WordPress should start with Learn WordPress.

This user guide explains specific functionality for this site, and is not intended to replace WordPress Documentation.

Design Library

A catalog of all the site’s building blocks, including colors, fonts, block editor components, and complex design patterns.

Open Design Library

Guides & Documentation

Training and reference materials for how to edit the site.

View Guides & Documentation

Report an Issue

Use this form to report a problem with the site, make a feature request, or ask a question.

New Issue

Guides & Documentation

Custom Post Types and Blocks:

Questions about something in this guide?

Content & Accessibility Guidelines

Headings

Please see this W3C guide to Headings. It’s important to not skip heading levels, as they serve as waypoints in the page for screen readers and indicate content hierarchy. If you need a smaller heading, use the typography settings to adjust the size.

Background / Foreground Colors

Pay close attention to the contrast warning when using the block color picker. The editor will check your selections and provide a notification if your foreground / background combination lacks sufficient contrast, but it will not automatically prevent low-contrast combinations.

Alt Text for Images

Ensure all images have alt text that describes the content of the image. This can be easily added through the Media Library.

New Tab Links

Avoid opening links in new windows/tabs, even offsite links. Allow users to control how they open links on your site. Unexpected new tabs or windows can be disorienting.

References:

Meaningful Link Text

Ensure link text is descriptive about the content behind the link. Avoid link text that says only, “click here” or “read more.”

References:

Using the WordPress Block Editor

Your theme utilizes the WordPress Block Editor. The Block Editor allows editors to build rich content pages within the bounds of the Committee of Seventy design system.

WordPress Block Editor Resources:

Helpful Editor Tips from The Devoted:

  • Use the Document Overview to move and nest content.
  • Leave the Settings Drawer open.
  • Use style presets and avoid entering manual values. Although the editor allows you to enter manual values for font sizes, colors, margin, spacing, etc, it is best to use the existing style presets developed by your designer. These presets help define the design language of the site, and establish an important visual hierarchy.

Using Patterns

Your theme comes with many patterns to make page building quicker and easier. These patterns make up your design system, and are meant to help you stay within design guidelines.

Use the Design to CMS Guide (Google Doc) to see what patterns are used to create page elements seen during the design phase.

Theme & Templates

About the Theme

The Seventy theme is a child theme based on the Devoted WordPress Starter Kit theme, a basic FSE framework for creating new WordPress sites.

It is important to not uninstall the Devoted parent theme, as both themes must be installed to work together as a pair. The Seventy child theme contains customizations needed specifically by the Committee of Seventy site, while allowing the Devoted theme to update as needed.

Theme Templates

Page Templates tell WordPress how to structure a page. The following templates are available in your theme:

Basic Page Templates
  • Single Page: this is the default template. It has a simple page title and a main+sidebar content area. Includes the site’s header and footer.
  • Single Page Alternate Page Header: just like the default single page, but with an alternative teal page header.
  • Single Page with Full Section Navigation: just like the default single page, but prints the full navigation for a section instead of just a page’s siblings and ancestors. See the Sidebar Navigation block for more information.
  • Single No Sidebar: this template is exactly like the basic/single page, but the sidebar area is empty. Content width is still restricted to the same value as a sidebar page to make reading easier.
  • No Sidebar with Alternate Page Header: just like the no-sidebar page, but with an alternative teal page header.
Landing Page Templates
  • Landing Page: for top-level pages in the main navigation. Landing pages are full-width (no sidebar) and have large page titles. Includes the site’s header and footer.
  • Landing Page with Alternate Page Header: just like the landing page template, but with an alternative teal page header.
  • No Title Page: landing page template with header/footer only, no page title. If you use this template, you must add an H1 title to the page.
Special Templates
  • Blank: completely blank page with no header, footer, or content container. This template is not currently in use, but is available if necessary.
  • Single Post: for displaying Press & Testimony/News articles. Includes the header, footer, meta information about the article, and a list of recent posts.
  • Single Post No Sidebar: same as single post, but with no sidebar content. Main content width is still restricted for easier reading, similar to the Single Page No Sidebar template.

Not all navigation menus on the site are edited in the same way. This is intentional, to provide control where needed (main nav) and eliminate repetitive work where possible (sidebar nav).

Editing the Main & Footer Navigation

The site’s main navigation appears at the top of every page below the logo. New items must be manually added to this menu. Manual curation of the main nav prevents it from becoming crowded, overwhelming, or difficult to use. Manage the Main Nav in the Navigation editor.

The navigation menus in the footer are also managed through the Navigation editor.

Editing Sidebar Navigation

Sidebar and tertiary navigation are automatically generated based on page hierarchy.

  • For a page to appear in the sidebar navigation of a certain section, it must be a child of that section’s landing page.
  • You can designate a parent page in a page’s settings: open Settings Drawer > Page Tab > Parent.
  • Order of sidebar navigation items is determined by each page’s sort order.

Descendant Pages: sidebar navigation will include the top level/parent page and all of its descendants. 

For more information, read notes about the Sidebar Navigation Block.

Plugins & Tools

The site’s theme, Seventy, is a custom theme created by The Devoted. It is a child theme of the Devoted WordPress Starter Kit theme, a basic FSE framework for creating new WordPress sites.

The Devoted uses GitHub to manage the project:

Functionality Plugins

The site and theme leverage WordPress’s native functionality as much as possible to limit reliance on third party tools and simplify training. For requirements that WordPress can’t meet, we rely on plugins. The following plugins are used to enhance the site’s functionality and recommended for use:

  • Admin Menu Editor: allows hiding/tidying up of the WordPress admin menu.
  • Advanced Custom Fields Pro (ACF): allows administrators to create rich custom fields for a variety of content types.
  • FileBird Lite: allows editors to organize images and create folders in the media library.
  • Login Security: provides security features such as password rules and login page hardening.
  • Smush: allows editors to optimize and compress images to improve performance.
  • Yoast Duplicate Post: allows editors to clone pages/posts.
  • Yoast SEO: provides critical SEO tools, content analysis, and XML sitemaps.

Block Plugins

The following plugins allow the creation of blocks that the site’s templates and/or design patterns depend on:

  • Icon Block: adds an Icon option to the block library. Supports custom SVG icons, which can be added on request. Used by several design patterns. The WordPress native icon block has been disabled, to avoid confusion with this plugin. At the time of release of this guide, the native icon block is very new and not able to support the design needs of the site. Should the native icon block be updated in the future, we could swap this plugin for the native block.

Hosting Provider Plugins

Your hosting provider, Pantheon, also installs some plugins to manage the site on their environment. Some of these can not be deactivated. Plugins published by Pantheon are recommended by the host and should not be adjusted or deactivated without direction from Pantheon.

You may find these links helpful as you edit your site.

  • Training Materials: assets from training, including recordings of training sessions, demo videos, and a “Design to CMS” guide.
  • C70 Sitemap in Octopus: we used this document to plan the navigation structure of the site. It shows a tree-view of most pages. Refer here when adding new pages, or if you’re unsure what section a page belongs in.
  • Wireframes: low-fidelity mockups of certain high level pages created during the design phase.
  • Design Prototypes: prototypes of planned page designs from our design phase. You can open these in your browser or within the Figma app.
  • Phosphor Icons browser: use this to search for icons to use inside the icon block. While the icon browser in your editor has a search feature, it can only search the exact name of each icon. The search on Phosphor’s site allows you to search for adjacent terms, such as “people” for “person” or “user.”
  • XML Sitemap: Sitemaps inform search engines about pages on their sites that are available for crawling. This XML file lists crawl-able URLs for a site along with additional metadata about each URL: when it was last updated, how often it usually changes, and how important it is, relative to other URLs in the site. This allows search engines can more intelligently crawl the site. Your XML Sitemap is automatically generated by the Yoast SEO plugin and served at the location linked in this bullet.

Still have questions?