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 upload and manage your images and other documents all in one place. PDFs, Word documents, and graphics are all added to the media library for use throughout your entire website.

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. Once there, upload your image by clicking Add New, by choosing Select Files, or by dragging and dropping an image into the browser window.

Once the file uploads completely to the list below, select the recently added thumbnail to reveal the image's full options. For SEO and accessibility purposes, it is highly recommended that you provide a descriptive Alt Text for the image. This text tells search engines and users using screen readers a bit more about the image's contents.

You can use the URL provided in the top-right corner of the media settings on any other page throughout the site.

Editing Images

This section will describe how to use WordPress’s built-in image editor. If an image is saved in the media library and already in use, do not update this image. This may update it in other sections of the site. Add a duplicate and alter from there.

Go to the Media Library section in the left sidebar. Click on an image in the list to view its settings. Just below the image click the Edit Image button.

From left to right, you have options to crop, rotate to the left, rotate to the right, flip vertically, flip horizontally, undo, and redo changes to your image. If you wish to crop, drag your cursor over the image, to the proportions you would like visible, then click the crop button in the top left. If you do not like the change you have made, click the back or forward arrows.

If you would like to change the size of the image, update the New Dimensions in the right column under Scale Image. This will automatically scale your image proportionally and you cannot scale images up, only down.

Managing Content

Preview Content and Tagging

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

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

Unlike other content types, sponsors do not automatically live on their own page. Once you create a group of sponsors, you must use Swift Page Builder to place a sponsor grid on a page. Click Sponsors in the left sidebar of your dashboard and then Add New to create a new logo.

First, add the name of the sponsor to the title field. If you would like to include a description of case study for this sponsor, you can add that to the main body content use the WYSIWYG (What You See Is What You Get) editor. For more information about the WYSIWYG, check out this in-depth breakdown of the WordPress WYSIWYG. Next, upload the logo and website URL under Sponsor Meta. The image you upload should be a minimum of 300px wide by 100px tall and should not have any white space around the logo. Add/select a category to group your sponsor with others.

Publishing A Sponsor Grid

When you are ready to publish your content, you can click the blue Publish button. Publishing a sponsor will make the logo visible in any grid on the site that relates to your designated category. Your sponsor grid will look something like this:

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.

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 an 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 the 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)

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

We’ve installed a feature called Swift Page Builder into your WordPress site. This will allow you to easily create design “elements” for any page. Elements can be thought of like building blocks - stack and customize them how it fits your needs.

Swift Page Builder Basics

Click Pages in the left sidebar of your dashboard and then Add New to create a new page. Once you are on a page, click on the blue Swift Page Builder button to switch the editing view. Please note that the WYSIWYG should be in Visual, not Text mode when switching to Swift Page Builder.

Page Layouts

The first step before adding any content will be to create your layout by adding a row or column element to the page. These elements allow you to add spacing and group other elements together. You will have the ability to drag and drop text areas, buttons, dividers, and more into these layout areas.

Adjusting the width of an element

When hovering over any element except for rows, you will see five icons. From left to right these are trash, save, duplicate, edit, and resize. To resize any element into columns, you simply click the resize handle and drag the element to where you need it to be.

Saving Elements

Individual element settings, rows, columns, and even full-page layouts can be saved for use across your entire site. Make sure to title the element to be as specific as possible so other content contributors know what it is. You can access your team's full list of saved elements and pages by clicking the Saved Items button in your Swift Pagebuilder toolbar.

Publishing Content

Once you are ready to review your updates, you can click the Preview button in the top right corner of the screen, under your publishing options. This will allow you to see what the page will look like before publishing.

When you are ready to publish your content, you can click the blue Publish button to post the content immediately or select a date and time to schedule your post. Please note that times are set in military time, so if you would like a blog post to publish at 3pm, you would need to set the time to 1500.

Accordions and Toggles

Accordions and toggles are used to reduce the length of your page by hiding content until users choose to see it. The only difference between the two is that accordions are meant to hold several groups while toggles only hold one group. View functional examples at Social Driver's page builder codex for Accordions, Toggles, and Tabs.

Once you add an element, you can use the edit icons to rename the sections. Similar to rows and columns, you can add any other page builder element inside of an accordion or toggle group.

Blank Spacers

Blank spacers allow you to add space in between elements horizontally. You can easily customize the space size across multiple screen sizes. Spacers that are set to use a global scope will use the standard website setting. Customize the space of this specific spacer by selecting local.

Buttons

Buttons are flexible and have several different customization options. For any media such as PDFs and images, be sure to add that to the Media Library to retrieve a URL. View functional examples at Social Driver's page builder codex for Buttons.

Contact Forms

Contact Forms are added through the Contact Form 7 or Gravity Forms plugins. You can manage these forms through the Contact tab or Forms tab in your dashboard. Below you can find several resources to help you create a form. Once a form is created, you can add it to any page using the page builder element. View a functional example at Social Driver's page builder codex for Contact Forms.

Contact Form 7 Resources

  1. Under the “Form” tab this is where you create your form. Note: Follow this tutorial to learn how to create your form: https://contactform7.com/editing-form-template/
  2. Under the “Mail” tab this is where you control the settings for the mail response. Note: for help visit https://contactform7.com/setting-up-mail/
  3. Under the “Messages” tab this is where you control the messages the user receives for different scenarios. Note: for more information on Admin side: https://contactform7.com/admin-screen/
  4. Save the form to save all your work! Note: for more documentation for contact 7 form go here: https://contactform7.com/docs/

Gravity Forms Resources

Follow the tutorial that pops up or https://www.youtube.com/watch?v=VNt_QKIC83U and choose what you want to do based on the timing outline below

  1. 2:42 - 7:10 - creating a form
  2. 7:10 - 9:56 - basic form settings
  3. 9:56 - 11:00 - creating a dropdown field
  4. 13:33 - 14:38 - form confirmation settings
  5. 14:38 - 18:29  - form notification settings

Content Feeds

Content feeds are very powerful. They allow you to load dynamic content onto a page that can be filtered by many different facets. General options allow you to filter down the content that your visitors have the option to see. For example, if you select Posts from the Post Type dropdown, your feed will only contain blog post content. Visitors will not be able to see any other content type in that feed. View functional examples at Social Driver's page builder codex for Content Feeds.

The Filters tab allows you to specify how your site visitors filter your content. You can choose simply keyword search or any taxonomy to display as a dropdown.

The Display tab offers different options for your content feed's post previews. You can hide or show different content to offer the best user experience for your visitors.

Dividers

The divider element is fairly simple. You can use it to add a line between areas. It is one of many ways you can separate sections on your page.

Icon Boxes

Icon boxes allow you to add a variety of icons and emojis to your content to make it more engaging. View functional examples at Social Driver's page builder codex for Icon Boxes.

Image Blocks

Image blocks enable you to make your images a bit more engaging with captions and hover states. View functional examples at Social Driver's page builder codex for Images.

Raw HTML and JavaScript

Raw HTML & JS elements allow you to add embed codes to your website.

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
Submit site search

Sponsor Grids

Sponsor grid allows you to show your sponsors in a grid format. NOTE: you need to have sponsors taxonomy set up to use this. If you do not know how to do that follow these steps

  1. Click “+ Elements” and “Sponsor Grid”.
  2. Click the pencil button to edit.
  3. You can choose how the individual sponsors are displayed through:
    • columns
    • turn/off "show logo"
    • image size
    • turn on/off "show title text"
    • turn on/off "show item excerpt"

Team Feeds and Tiles

Team members can be managed through the Team Members tab in the left sidebar of your dashboard. Once added, you will have the ability to either add a feed of team members or an individual team member tile to your page content. You can select the option to see the full bio in a modal or link to a separate page. View functional examples at Social Driver's page builder codex for Team Members.

Video Players

YouTube and Vimeo content can be embedded into your site by simply copying the URL that you find in your browser window when viewing the video and placing into the video player page builder element.

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