Documentation

This documentation is a “how to” guide for elements of the site that are custom built. For training and documentation on standard WordPress elements please see WP Beginner or other WordPress.org tutorials online.

Please see the Content Style Guide for best practices for accessibility and search engine optimization. Please put all bugs found and edits needed into the Bugs Document.

Contents

• Page Templates
  • Landing Page
  • Regular Page
    • Parent/Child Page
    • Flexible Content Blocks
    • Excerpts
  • Homepage
  • Resource Archive Landing Page
  • News Posts
    • Excerpts
    • Featured Posts
    • Categories + Tags
    • Related Publications
  • Resources
    • Resource Categories + Tags
    • Related News Posts
  • Images
    • Image sizes
    • Lightbox
  • Menus
  • Widgets
  • Plugins

Page Templates

Landing Page

The top most pages (for example Establishing Protected Areas) are using the Landing Page Template. This template is for any page that denotes a section of the website and lists other pages within that section.

You can select this in two places:

1. Within the page itself, on the right hand side under Page Attributes.
2. On All Pages, hover on the page you want to change, select Quick Edit and choose the template from the dropdown menu. Click update to save.

(example 1)

(example 2)

Landing pages are pretty self explanatory, each section has instructions. Sections include:

1. Hero Image
2. Photo caption (links can be added with HTML <a href=”https://link.com”>link text</a>)
3. Page Intro Text, that goes over the header image (this will usually be the page title, but can be a short call to action)
4. Button link and text
5. Intro Header
6. Intro text
7. Featured pages section: 3-9 are available (it’s good practice to have the order here be the same as the order the child pages are listed in the sidebars and menus) Each line within this section can be moved around using drag and drop.

Regular Page Template

All other pages use the regular page template. You don’t need to select this, as it’s the default.

Child Page

• All regular pages under landing pages are considered child pages, you need to select the parent page (which is the top level page of the section this page will be in) You can do this in the same area that you select the page template.
• You can select the order by putting the number in here, 0 being the top, 1 next down etc.

(example 1)

(example 2)

Flexible Content Blocks

The contents of all pages are set up within flexible content blocks.

• Select “Add Content Blocks: to get started.
• The available blocks are listed in the order you’ll most often use them on the page.
• You can select blocks multiple times if you’d like more than one of the same kind.
• Each block comes with instructions.
• See a filled out page for examples if you’re stuck.

Excerpts

Please fill out the excerpt field, this will show up as a page intro in search results. If left blank, only the page title will display. (This is only for pages, posts and resources have auto excerpts).

Don’t see the excerpt field? Go to the top right-hand corner and click on “Screen Options”, in the panel that opens, select “excerpt”.

Homepage

• The homepage is set up so you don’t have to select a template, it automatically loads.
• Sections are self explanatory and instructions are included.

Resource Archive Landing Page

The Publications & Contributions page is an archive of the resources custom post type (WordPress speak). Because it is an auto-generated page, it behaves a bit differently than other pages.

• Anytime you want to link to it, use the URL: https://staging.projectseahorse.org/resources (it won’t show up in the list of pages, you’ll have to enter the link manually)
• You can’t edit the page (as it’s auto-generated) so in order to change the header image and featured text, we’ve set up an options page with the fields.
• Go to Theme Settings/Resources Archive and fill out the fields there.

News Posts

Excerpts

Excerpts are automatically created from the main content of the blog post.

You can also create custom excerpts if you want to write something specific. To do this, fill out the excerpt field at the bottom of the post. This will override the automatically created excerpt.

• Don’t see the excerpt field? Go to the top right-hand corner and click on “Screen Options”, in the panel that opens, select “excerpt” (screenshots above in Page excerpt instructions)
  

Featured Posts

• To feature a post at the top of the news page and on the homepage, you can select “sticky” in the “Publish” area in the top right-hand corner of the the single news post page (example one) or you can go to All Posts select the post and “Quick Edit”, check “Make this post sticky” (example two).
• All featured posts require feature images.
• Only the 3 most recent posts will show up in the featured area, and they will not show up among the regular news posts.
• Remember to deselect “make this post sticky” when you no longer want to feature it so that it goes back into the regular news feed.

(example one)

(example two)

Categories + Tags

• Categories are groupings by format and should be limited to a specific list.
• If you have more than one category for a post, select a “primary category” and this will be the one that shows up above the post.
• Tags are groupings by topic and should be limited to a specific list.

Related Resources

To link resource posts to a news post, select the resource in the “Related Resource” section and move it to the column on the right. You can use search or taxonomy keywords if there are a lot of resources. You can drag and drop the selected resources to change their order.

Resources

Resources are a “custom post type” with “custom taxonomies” (WordPress speak). Custom taxonomies are similar to categories and tags for news posts.

Resource Taxonomies include:

• Resource Category (main taxonomy with icons at the top of the page)
• Resource Tag

Resource categories and tags act the same way as news categories and tags, but they do not sort together. So searching “Seahorse” in resources will only show seahorses in the resource section and vice versa in the news section.

Related News Posts

This section works the same as the related resources section in news posts.

Images

Different areas of the website require different sizes of images. For all images, please upload twice the actual size of the image, this is to accommodate retina screens that show double the amount of pixels. There is a plugin Perfect Images + Retina that automatically serves up the image the device will load (regular or retina).

Image sizes are:

All fields (except featured image) will include image sizes in the instructions. Most landing page images are already created and uploaded for you.

• home and landing page banners: 2560 x 896 // displayed at 1280 x 448
• news and resources banners: 2560 x 680 // displayed at 1280 x 340
• feature image: 700 x 524 // displayed at 350 x 262
• full-size in post: 1536 x 864 // displayed at 768 x 432

Lightbox treatment for images

If you would like the image in a post to open in a lightbox select link to: “media file” in the “attachment display settings” when adding the photo.

Menus

You can access the menus either via the dashboard link or through the customizer (which allows you to create pages without leaving the interface)

• Top Menu (no subpages)
• Main Menu (subpages not visible on mobile)
  • the arrows in the main menu are added with css, if you need to change a page copy and paste this code into the navigation label after the page title: <i class=”fas fa-chevron-down”></i><i class=”fas fa-chevron-up”></i>

Widgets

• Blog sidebar
• Resources sidebar
• CTA mailing list (Mailchimp sign up)
• CTA sidebar (using widget context to select the pages it shows up on) Loom video explaining how to set this up.
• Footer 1 // Logo
• Footer 2 // Contact Info
• Footer 3 // Quick Links & Social Media

Plugins

Here is a list of some of the plugins that this theme is using:

ACF Pro

This is what all the custom fields and flexible layouts throughout the site are built on.

Complianz

Complianz Privacy Suite for GDPR, CaCPA, DSVGO, AVG with a conditional cookie warning and customized cookie policy. Please go to settings and walk through the set up (it will take about 30 mins).

iThemes Security

Robust security plugin with a lot of features including:

• can hide login page to limit bot hacking attempts
• locks out multiple login attempts
• backs up the database
• monitors file changes

Redirection

• Redirects URLs from old site to the new URLS on new site to preserve SEO
• Monitors 404s

Perfect Images + Retina

Automatically creates versions of each image for both normal and retina screens. This prevents images from looking fuzzy on macs and devices with high resolution while saving page load space (not serving high quality images on devices that can’t load them).

Yoast SEO

While basic WordPress is already set up pretty well for SEO, it needs some tweaks here and there to be really effective. Yoast WordPress SEO plugin provides the following features:

• Automatically optimizes and inserts meta tags (snippets of text describing a page’s content, only appearing in the page’s code) for the Google engine
• Allows you to define focus keywords
• Checks whether you’ve written a meta description (a brief snippet summarizing a page’s content, which users can see in search results) and if that meta description contains your focus keyword
• Creates XML sitemaps and notifies Google & Bing of the sitemaps’ existence
• Comes with a Facebook OpenGraph implementation for improved social sharing
• Allows you to select one primary category on posts when there are multiple categories