Owner’s Manual

Table of Contents

Last Updated: October 8th, 2018

Let’s take a step-by-step tour through your WordPress site and see how the different functions work and how to make your new site your own. During the first part of this tutorial, please don’t change anything within the program unless it is part of the tutorial. After following these steps, you’ll soon be changing everything.

Accessing Your Website

Follow the steps below to access the dashboard of your WordPress website and begin managing your website.

Log Into Your Website

Begin by logging into the “administration area” or the back end of your website. Visit your site’s login page by placing “wp-admin” after your domain name (e.g. https://www.apg.org/wp-admin).

If for whatever reason you do not remember your username and password, you can recover this information by clicking Lost your password? in the login prompt screen.

Two-Factor Authentication

Two-factor authentication adds another layer of security to your site that requires not only a password and username when logging in but also a passcode that you can only generate on your smartphone. Using a username and password together with a piece of information that only you can access makes it harder for potential hackers to gain access to your website.

For more information on two-factor authentication, check out the entry in the WordPress Codex.

Enabling Two-Factor Authentication

Navigate to your profile page to enable two-factor authentication, as well as sync their account with the Google Authenticator app. Scroll to the bottom and click Enable.

You’ll then see this screen:

Follow the steps by downloading Google Authenticator for your phone, scanning the barcode, and entering the six digit passcode that the Authenticator app generates.

Click Verify and you’re all done!

Using Two-Factor Authentication

Next time you log into your website after you enter your username and password, you’ll be asked to enter a passcode. Just fire up the Google Authenticator app on your phone and enter the passcode.

Media Library Basics

The Media Library is where you can manage your images, audio, videos, and documents all in one place.

Uploading + Link to Media

If you would like to upload a graphic, such as adding a picture to your post, then you must first upload the content to the Media Library.

  1. Go to the Media section in the left sidebar.
  2. Upload your image to the Media Library by clicking on Add New, by choosing Select Files, or by dragging and dropping an image into the browser window.
  3. Once the file uploads completely to the list below, open a new window.
  4. We recommend including “alt text” with an image uploaded to the site (include a description of the content in the image)
  5. Copy the URL listed on the right side.
  6. Copy and paste that URL into the appropriate page, wherever you may need to use it.

Editing Images

This section will describe how to use WordPress’ image editor to update the size of images uploaded to your Media Library. 

NOTE: If an image is saved in the media library and already in use, do not update this image. It will also update it in other sections of the site. Add a duplicate and resize from there.

  1. Go to the Media section in the left sidebar.
  2. Upload your image to the Media Library by clicking on Add New, by choosing Select Files, or by dragging and dropping an image into the browser window.
  3. Once the image has uploaded, it will appear in the list of media. Click on the image you wish to edit.
  4. Below the image, click on the Edit Image.
  5. Use the buttons above the image on the left side to rotate or flip the image.
  6. If you wish to crop, drag your cursor over the image, to the proportions you would like, then click the crop button in the top left. NOTE: if you do not like the change you have made, click the back or forward arrows on the right.
  7. If you would like to change the size of the image, update the dimensions in the right column under Scale ImageNOTE: this will automatically scale your image proportionally and you cannot scale images up, only down.

Featured Image Basics

A featured image is the representative image for posts, pages, or custom post types.

  1. In the right sidebar you also need to set your featured image
    • “Featured Image” is the image displayed for the blog post on the topics page
      1. Click “Set featured image” to add the image. We recommend including “alt text” with any image uploaded to the site
      2. When uploading an unformatted image as the featured image, WordPress will pan into the image and size it according to what they believe is the most important section of an image. Note: we suggest sizing each featured image to the optimal dimensions: height - 630px fixed + width - 1200px. This will also pull through on search engines and social media link shares

Managing Content

News Articles

News allow you to add and manage new items.

  1. Click or hover over “News” in the left sidebar and click “Add New”.
  2. Enter the News title
  3. Add all of the body content into the text editor
  4. If the News item is a file, add the file in the "Additional News Options" section
  5. If the News item is an external site, enter the URL in the "Redirect Options" section on the right-side
  6. In the right sidebar, add all the categories, tags, and a Featured Image
  7. If this item needs to show up in a Featured feed, select the "Featured Items" checkbox
  8. Click “Update” or “Publish” to save in top right column

Team Members

Team Members allows you to add blog author contributors and customize their profile

  1. Go to the “Team Members” category on the sidebar and click “Add New”
  2. Add the team member’s name in the heading
  3. Add all of the body content (bio) into the text editor if you want
  4. In the right sidebar, add all the categories, tags, and a Featured Image
  5. In the “Team Members Details” section, add several factors:
    • Company Position
    • Email Address
    • Phone Number
    • Any social media accounts like Twitter or LinkedIn
  6. Set the “Featured Image” to display the contributor’s profile picture. Note: The dimensions for the headshots should be 600px x 600px
  7. Click “Update” or “Publish” to save in top right column

Sponsors

  1. Click Sponsors in the left sidebar and then “Add New”
  2. Add the Sponsor’s name to the title section
  3. On the right sidebar find the “Sponsor Categories” section and check off which this applies to for the sponsor
  4. Go down to “Sponsor Meta” and upload the sponsor’s logo

Events

Events allow you to add and manage your events

  1. Go to “Event” in the left sidebar and click “Add Event”
  2. Enter the “title” of the event
  3. Add all of the body content into the text editor
  4. In the right sidebar, add all the categories, tags, and a Featured Image
  5. In the “Schedule Options” section, add the start and end date and time (if needed) using the entry fields provided.
    • In the “Location” field, enter either a city or a specific address. This will link to Google Maps and when a user clicks, it will open in a new tab. Note: keep these simple so Google can find the address.
  6. If the event has a registration URL, add it in the "Additional Event Options" section
  7. Click “Update” or “Publish” to save in top right column

Resources

Resources allow you to add and manage resources

  1. Click or hover over “Resources” in the left sidebar and click “Add New”.
  2. Enter the Resource title
  3. Add all of the body content into the text editor
  4. In the right sidebar, add all the categories, tags, and a Featured Image
  5. In the “Resource Meta” add the appropriate attachments in a PDF format for the “Resource File” and add preferred text for the button.
  6. If the Resource item needs to reference an original source, add that URL in the "Original Source" section
  7. If the Resource item is an external site, enter the URL in the "Redirect Options" section on the right-side
  8. Click “Update” or “Publish” to save in top right column

Updating the Latest Journal

  1. Add the most recent edition of the Journal to the Resources section.
    • Make sure to tag it as "Journal" in the Resources Categories.
  2. Once published, copy the new Resource's URL link.
  3. Edit the Resources page and update the "View the latest Journal" button to the new Resource link you copied.
  4. Hit Save to save the URL change.
  5. Hit Update on the Resources page to publish your changes.

Taxonomies

You will be able to add tags + categories for each of the content types that are applicable to your site (exp. News, Team Members, Events, etc.)

  1. In the right sidebar, there are 5 ways to tag content:
    • “Categories” are connected to the front-end categories and are used in feed logic
      • Check off the categories the post fits or add a new category if necessary
    • “Tags” are to be used for meta content that will not appear on the front-end but will assist the onsite search
      • Type in your own tags or click the most used tags to add them to the post

Content Previews

If you want to edit the preview text that will be pulled into the auto-feeds on the front end use the excerpt field. This functionality can be in the post types of News, Team Members, Events, Resources + Events, etc.

  1. Edit the post you want
  2. Scroll down to the bottom to find the “Excerpt” field
    • If the excerpt is hidden scroll up and click the "Screen Options" tab and check the box labeled "Excerpt" and the Excerpt field will appear

  3. Add your custom preview text here
  4. Save + Publish your work

Footer Content

  1. In the dashboard go to Appearance -> Widgets
  2. Under “Footer Logo" you will find the image that you can edit
  3. Under “Footer Nav" you will find the elements that pull in menu items that you can edit
  4. Under “Footer Social" you will find block that automatically pulls in the registered social account links
  5. Under “Footer Join APG" you will find the HTML for the "card" CTA that you can edit

Swift Page Builder

Accordions and Toggles

Toggles are very similar to Accordions. They only use one drop-down versus an accordion which allows you to have several drop-downs.

  1. To add an Accordion, click “+ Elements” then “Accordion” or “Toggle”.

  2. Change the name of a section by clicking on the pencil button on the first box. To add the content contained within the first accordion drop-down, click the pencil button on the second box.
  3. The pencil button will lead you to “Edit Text Block”. Use the WYSIWYG editor in the “Text” section to update any language or styles contained within the expanded section.
  4. Click the “+” button to add additional expand-collapse pieces

 

Blank Spacers

Blank Spacers allow you to add space in between elements horizontally. You can customize the space size (px) by screen resolution as well

  1. To add a Blank Spacer, click “+ Elements” then “Blank Spacer”.
  2. If needed, click the pencil button to edit the spacer.
  3. You customize the space height based on what device or browser size the user is on

Buttons

Button allows you to add different based on size, color and other customize features.

  1. To add a Button, click “+ Elements” then “Button”.
  2. Click the pencil button to edit.
  3. There are several options you can choose from to customize your button element:
    • To change the text that appears in the button, fill out the “Button Text” field.
    • There are two style options: “Small” and “Large” - choose this from the drop-down menu
    • You can also add a link location and chose where the link opens (same or new window).
      • If you would like the button to link to a PDF, image, etc., follow the instructions for adding the item to the Media Library  first and then add the link here.

Dividers

The divider element can be used as a visual separator of content

  1. Click “+ Elements” and “Divider” to create a line above, in between, or below each element.
  2. Click the pencil button to edit.
  3. Choose the top and bottom margins (we recommend 0px above and 30px below) + if you want the divider to expand the full width or not 

 

Icon Boxes

Icon Box element allows to add a variety icons or emojis

  1. To add an “Icon Box”, click “+ Elements” and “Icon Box”.
  2. Click the pencil button to edit.
  3. To change the text that appears below the icon, fill out the “Icon Box Title” field.
  4. Choose the specific icon you would like represented in the “Icon Box Icon” section.
  5. After scrolling through all the icons, update the text that appears below the icon by filling out the WYSIWYG editor titled “Text”
  6. Fill out the text element if you want there to be text under the icon
  7. If you would like the icon to link to another page, either on your site or externally, or to an uploaded media item, go to the “Icon Box Link” and add the URL to the entry field

This is the icon box title

This is customizable text for your icon

Image Blocks

The image element does exactly what it sounds like - allows you to add images

  1. To add an “Image”, click “+ Elements” and “Image”.
  2. Click the pencil button to edit.
  3. Add a “Widget Title” if you would like text to appear above the image.
  4. Click “Add Image” and upload files or select a photo from your media library.
    • NOTE: Images can also be added directly in the “Text Box” through the WYSIWYG editor by clicking “Add Media”. This will enable you to wrap text around the images.
  5. If you would like the image to link out, then add the URL to the “Add link to image” field.
  6. If you would like to add an image caption, scroll down to the “Image Caption” field and then choose how you would like it to display: hover or below.

Raw HTML and JavaScript

Raw HTML & JS allows you to add code straight into the page through this Page Builder element

  1. Click “+ Elements” and “Raw HTML" for HTML or "RAW JS" for Javascript.
  2. Click the pencil button to edit.
  3. Add your code in the text box.

Search Bars

Search element allows you to add a search bar to the content

  1. Click “+ Elements” and “Search".
  2. Click the pencil button to edit.
  3. You can customize what text is displayed in the input box
search submit icon

Team Feeds

The Team element is a feed for the team content type. You can filter the feed through categories if you wish.

  1. Click “+ Elements” and “Team”.
  2. Click the pen button to edit.
  3. You can change display options such as columns, number of items to display, if you want to link to the team member's individual page (if applicable), etc.
  4. Filter the team feed if you want using "team category" by typing in and selecting the categories you wish to display

Team Member Tiles

The Team Member element allows you to add individual team members to the content. 

  1. Click “+ Elements” and “Team Member”.
  2. Click the pen button to edit.
  3. Make sure that the team member is first added to the Team Member content type (see instructions below)
  4. Choose the correct person from the “Team Member” dropdown menu.
  5. If they will have a bio page, choose “Link to Page” from the dropdown menu. If they do not need a bio page, select “No” from the dropdown menu.
  6. Click “Save” then drag and drop the team member into the appropriate order.

 

Textblocks

The Text Block element allows you to display plain text or HTML markups on the page

  1. To add Text Block, click “+ Elements” and Text Block.
  2. To edit, click the pencil button.
  3. Add a title to appear above the text block and then add the full body text using the WYSIWYG editor.
  4. If you would like to add an image directly into the text block, click “Add Media”. Then choose an image from the Media Library or click “Upload Files” to choose from your server or desktop.

 

Video Players

The Video Player allows you to place videos into your content

  1. Click “+ Elements” then “Video Player”.
  2. Click the pencil button to edit.
  3. Add your "video link" for the video to pull through on the front end

Widget Areas

The Widget Area element lets you add any widget element anywhere on the page. Widgets can be found under Appearance -> Widgets. Often this is where your footer content and sidebars are if you have them.

  1. Click “+ Elements” then “Widget Area”.
  2. Click the pen button to edit.
  3. In the dropdown select the sidebar you wish to use

Other Admin Functionality

Navigation Menus

Note: in order for an item to be included in the menu, it needs to be a published page.

  1. Hover over “Appearance” and click on “Menus”.
  2. In the right column, there is a list of the current menu structure.
    1. If you would like to alter the current order of items listed, drag and then drop in the correct location. Note: Items that are tabbed in below other menus are submenus and will appear upon hover in the main menu.
  3. The left sidebar has a list of all the pages currently added on the site.
    1. Check the page you would like to add to the menu then click “Add to Menu”. Note: It will automatically be added to the bottom of the right sidebar list as a main menu item. Drag and drop to change the position in the menu or create as a subpage.
  4. Click the drop-down arrow next to the name of the page to change how it will appear in the menu.
  5. In this expanded view, you can also remove a menu item by clicking “Remove”.
  6. Always have “Main Menu” and “Mobile Menu” checked in the “Menu Settings” section.
  7. You must click “Save Menu” for these changes to pull through on the live site.

Advanced Forms with Gravity Forms

Create and Manage your Gravity Forms

  1. Go to “Forms” in the left sidebar
  2. Click “Add New” on top left corner
  3. Enter your “Form Title” (description is optional)
  4. Follow the directions with this tutorial here
    1. Select the fields you would like to appear in your form using the options to the left, customizing as necessary.
    2. Follow the tutorial that pops up or https://www.youtube.com/watch?v=VNt_QKIC83U + choose what you want to do based on the timing outline below
      1. 2:42 - 7:10 - creating form
      2. 7:10 - 9:56 - basic form settings
      3. 9:56 - 11:00 - creating dropdown field
      4. 13:33 - 14:38 - form confirmation settings
      5. 14:38 - 18:29  - form notification settings
    3. Add a form to a page use the following shortcode. Replace “15” width the ID of the form that can be found next to the title when editing the form.

      Oops! We could not locate your form.

    4. If you want more information about Gravity forms go here: https://docs.gravityforms.com/category/user-guides/getting-started/
  5. After you have edited the Form Settings and added your desired Form Fields, click the Update Form button at the bottom of the form editor to save your new form.

Adding your Gravity Form to your content

  1. If you are using the Classic editor 
    • Click "Add Form" and select the form you wish to form you wish to use
    • You can choose to display the "form title", "form description" by checking or unchecking the boxes
  2. If you are using the Swift Page Builder
    1. Go to “Forms” in the left sidebar
    2. Find the form you wish to use and hover over the title to make the option "preview" appear and click this. Note: this will give you your form id which you need for the code
    3. Select a "Text Block" element toggle to the "text" tab
      • create your gravity form code snippet with these parameters
        • Oops! We could not locate your form.

        • This gravity form means:
          •  form id=2
          • title = true which means you want your form title to show
          • description = true which means you want your form description to show
      • paste your gravity form code snippet with these parameters in the "text" tabs like in the example below

301 Redirects with EPS Redirects

Adding a Redirect rule will allow you to set a custom domain URL that will forward visitors to another URL

  1. Hover over the “Settings” category on the sidebar and click “EPS Redirects”
  2. Add the URL (minus “https://thesite’surl..org/”) you want visitors to be forwarded from in the “Redirect From” field
  3. Add the URL you want visitors to be forwarded to in the “Redirect To” field
  4. Click “Save” to save the redirect rule

Managing Tracking Code Pixels

This allows for the collecting of user activity on the site.

Tracking code can be added in the Settings > Tracking Code Manager plugin page

  1. Enter a title for the code. Note: for clarity, this should reference the name of the service and/or its location. “Google Analytics Head” or “Facebook Body”
  2. Paste the appropriate code in the text field body
  3. In the “Position inside the code” dropdown, select the location where the code should run. Note: this should be described in the company’s instructions for their tracking code use. If not, select the first option, “Before </HEAD>”
  4. If needed to display only on certain device types, use the filters in the “Show only on device” field
  5. Click the save button

More specific information based on the tracking code provider can be found at the following:
Facebook Pixel: https://www.facebook.com/business/help/952192354843755
Google Analytics: https://support.google.com/analytics/answer/1008080?hl=en
Google Tag Manager: https://developers.google.com/tag-manager/quickstart

SEO with Yoast

SEO is an extremely important aspect of your site and something to consider whenever you update or add any new site content. We’ve installed a tool called “Yoast SEO” which will help guide you towards matching your site content with important keywords.

Using Yoast SEO

Content (Tab that looks like a traffic light)

  1. The Snippet Editor previews what your page looks like in a Google search result. Click “Edit Snippet” to update the SEO title, slug (also known as the URL), and the meta description.
  2. Focus keyword: chose the main keyword or phrase that matches the content on the page.
  3. Meta keywords: additional keywords that pertain to the page content
  4. Content analysis: Based on your focus keyword, the content analysis will analyze the page content based on a benchmark of checks to ensure the focus keyword makes sense. This includes appearance in the URL, meta description, title length, etc.

Social  (Tab that looks like sideways “v”)

This section enables you to personalize the social media title, description and image representation for Facebook and Twitter should you choose. For images, be sure to pay attention to the recommended sizes listed in the descriptions.

On-page Optimization

Title Tag

  • Avoid duplicate title tags
  • Keep title tags at 55 characters or less in length, including spaces.
  • Your title tag should be written like this: Primary Keyword – Secondary Keyword | Brand Name
  • Use a dash in between your keyword phrases and a pipe at the end before your brand name

Meta Description

  • Write compelling meta descriptions (for CTR)
  • 150 to 160 characters is the recommended length
  • Avoid duplicate meta descriptions
  • Do not use quotes or any non-alpha characters
  • Use Target keywords in description

H1, H2, H3

  • Use H1 Tag for Page title
  • Use your keyword phrase once in your H1 tag
  • Use H2, H3 tags for subheadings if there are multiple sections

Anchor Text

  • When linking to another page on the same site from within content, select good anchor text (keywords) to use in the actual link and do this often. For example: “We offer *target keywords* services,” rather than “Click here.”

Image ALT tags and filenames

  • Include your keyword phrase in the name of your image. Name all of your images in a way that describes what they are.
  • Do not use non-alpha characters in your image or file names (no %, &, $, etc)

Managing WordPress Users

  1. Go to “Users” in the left sidebar and click on “Add New”.
  2. In the “Add New User” section, create a username, enter their email and assign them a role.
    1. Learn more about the different roles in WordPress.
  3. Do not click “Skip Confirmation Email”.
  4. Click “Add New User”.