The Devoted Logo

Website User Guide

Name_of_Site 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

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 Name_of_Site 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.

Theme & Templates

About the Theme

The Name_of_Theme 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 Name_of_Theme child theme contains customizations needed specifically by the Name_of_Site 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 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.
  • 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. 

Plugins & Tools

The site’s theme, Name_of_Theme, 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:

  • GitHub repository for the site/theme
  • GitHub project: issues, planned tasks, and development history.
  • Replace the links above with correct destinations for this 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.
  • Converter for Media: allows image conversion to WebP & AVIF to improve performance. Should you purchase the Pro version of the Smush plugin (see below), you can uninstall this plugin.
  • FileBird Lite: allows editors to organize images and create folders in the media library.
  • Google Site Kit: connects with your Google Analytics properties. Uninstall if you are using a different analytics provider.
  • Login Security: provides security features such as password rules and login page hardening.
  • Smush: allows editors to optimize and compress images to improve performance. A paid version is available that also includes the functionality provided by the Converter for Media plugin (see above). Should you purchase Smush Pro, you can eliminate the Converter for Media plugin.
  • Yoast Duplicate Post: allows editors to clone pages/posts.
  • Yoast SEO: provides critical SEO tools, content analysis, and XML sitemaps.

Compliance Plugins

These plugins help you ensure compliance with important regulations and guidelines.

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.

Still have questions?