Owner’s Manual

Table of Contents

Last Updated: October 1st, 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.aypf.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

Blog Posts

Posts allows you to manage and edit your posts usually this is where your blog posts are. These are used similar to how you create/edit pages.

  1. Click "Posts" in the left sidebar and then “Add New”
  2. Add a title
  3. If the "Classic editor" is enabled
    • Fill out your content using the WYSIWYG (What You See Is What You Get) editor. This is a text editing dashboard built into WordPress. For more on the functionality of each of these icons, check out this in depth breakdown of the WordPress WYSIWYG.
  4. If the "Swift Page Builder" is enabled

Galleries

  1. Click "Galleries" in the left sidebar and then “Add New”
  2. Add a title
  3. Add images you want to be featured in the gallery. Note: make sure images are 800px width and shoot for 1200px for the height
  4. When you are done use the gallery page builder element to add it into your page

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 “Team Categories” Section check off the appropriate team category
  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

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. Fill out your content using the WYSIWYG (What You See Is What You Get) editor. This is a text editing dashboard built into WordPress. For more on the functionality of each of these icons, check out this in depth breakdown of the WordPress WYSIWYG.
  4. In the right sidebar, add all of the Event Categories, Topics, Youth Populations, Policies and Legislation, Tags and a Featured Image
  5. Select if the event is Upcoming or a Past Event. This will determine what events are populated in the content feeds on the Upcoming Events and Past Events pages.
  6. Add an excerpt for the event
  7. In the “Event Information” section, add the registration link for the event. This will create a linked button in the sidebar for the event. Add any partner logos and website links in the "Partners" section. This will appear in the sidebar for the event.
  8. In the “Event Resources” section, upload resources for the event by adding a file and a resource name. This list will appear below the main event content from the WYSIWYG.
  9. In the “Schedule Options” section, add the start and end date and time (if needed) using the entry fields provided.
    1. In the “Location” field, enter either a city or a specific address.
    2. In the “Timezone” field, select the correct timezone for the event. This will display the timezone on the event page and in feeds. (i.e. 2:00 P.M. - 3:00 P.M. ET).

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. Fill out your content using the WYSIWYG (What You See Is What You Get) editor. This is a text editing dashboard built into WordPress. For more on the functionality of each of these icons, check out this in depth breakdown of the WordPress WYSIWYG.
  4. Select the appropriate Resource Type
  5. Select if this resource should be Highlighted on a landing page
  6. Add the appropriate Tags
  7. Add your Featured Image
  8. In the “Resource Meta” add the appropriate attachments in a PDF format for the “Resource File” and add the name of the “Button Text
  9. Add an Excerpt for the resource

Select Related Content for Blogs, Resources and Events

On Blog posts, Resources and Events there is a Related Content field that will allow you to override the automatic Related Content (aka the "You May Also Be Interested In" section) at the bottom of Blog posts, Resources and Events.

  1. While editing a Blog post, Resource or Event, in the Related Content section click 'Add a Row' to add a related content item.
  2. Type or copy and paste the title of the Resource, Blog or Event that you would like to display in the Related Content section. It may take a few sections for results to appear.
  3. You may add up to four Related Content items.
  4. Empty rows should be deleted. To delete a row, hover over the end of the row. Plus and Minus editing controls will appear. Click on the Minus sign to delete the row and the Plus to add an additional row.
  5. To rearrange the Related Content items, hover over the number of the row until the four arrow icon appears. Click and drag the item to the correct position.

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:
    • Topics” are used to categorize and filter content on the front-end
      • Check off the topics the post, resource or event fits or add a new topic if necessary
    • Youth Populations” are used to categorize and filter content on the front-end
      • Check off the youth populations topics the post, resource or event fits or add a new topic if necessary
    • Policies and Legislation” are used to categorize and filter content on the front-end
      • Check off the policies and legislation topics the post, resource or event fits or add a new topic if necessary
    • Years” are used to categorize and filter content on the front-end
      • Check off the year the post, resource or event fits or add a new year if necessary
    • Featured Areas” are used to tag blog posts for featured areas on the website
      • Check off the location where the item should be featured
    • Categories” are connected to the front-end categories and are used in feed logic
      • Categories are used for Events and Resources
      • 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 Seal" you will find the elements for the Guidestar seal image
  3. Under “Footer Contact" you can edit the AYPF contact information
  4. Under “Footer Newsletter" you can edit the elements for the newsletter signup
  5. The footer navigation links are housed under Appearance -> Menu

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.

Code Snippets

Code snippet lets you to add HTML or CSS code to the page without WordPress changing the format. 

  1. Click “+ Elements” and “Code Snippet” to create a line above, in between, or below each element.
  2. Click the pencil button to edit
  3. Add your code in the text block + select the language for that code block (options: HTML, CSS, JS, PHP)

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 

 

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.

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

Guest Authors with Co-Authors Plus

  1. Go to “Users” in the left sidebar and click on “Guest Authors”.
  2. Click “Add New”
  3. Enter the author’s Display Name then First and Last Name.
  4. Add a short bio (no more than 144 characters) to the “Biographical Info” field under “About the guest author” section.
  5. Click “Add New User”.

Relevanssi

Building the Index

  1. Go to “Settings” in the left sidebar and click “Relevanssi”.
  2. Go to the “Indexing” tab.
  3. Under “Indexing Options”, select Post Types and Taxonomies that should be indexed.
  4. Click on “Build the index” to rebuild the index after changes.
  5. Click on “Save the options” to save selections.

Customize Options (follow the instructions within each settings tab to customize the Relevanssi options)

  1. Searching: Customize search functionality.
  2. Logging: Enable and manage search logs.
  3. Excerpts and Highlights: customize excerpts (i.e. excerpt length) and search highlighting.
  4. Synonyms: Add synonyms for better search results.
  5. Stopwords: Specify words to remove from the search index with manual entry or by selecting from the most commonly found words in the index.

Email Templates and NeonCRM

Find the AYPF branded email templates below. Click on the template you would like to use and go to File > Save Page As in your browser. Ensure you are downloading HTML Only. Once downloaded, open your template in a text editor to make content updates.
  1. Blue Header with Text: click here
  2. Blue Header With Text + Two Images: click here
  3. White header With Image + Text: click here

Testing HTML Email Templates

  1. Navigate to Communications > Email Campaigns in NeonCRM.
  2. Click on the Upload Campaign Email button.
  3. Fill out an Email Name (for internal purposes), an Email Subject (what the user will see) and a From Email Address.
  4. In the Upload Email files section, choose the HTML file and click on Upload.
  5. On the next page, enter an email address and click on Test to send a test email.

Updating Email Template Images

  1. Navigate to Media in the Wordpress Dashboard.
  2. Upload the image to the Media Library.
  3. Click on the image in the Media Library. In the Attachment Details window, copy the URL for the image from the image details on the right side.
  4. In the email template HTML file, find the replace the placeholder image URL with the URL copied from the website.
  5. Add alt text to the image.

Downloading Email Templates

  1. To edit email templates, download a free text editor, such as Sublime text (https://www.sublimetext.com/). There is a free version of this editor available for download. (Since it is free, every once and a while a popup will appear asking you to purchase but you can close it and continue using Sublime.)
  2. Once you have a text editor downloaded and installed, open up one of the email template links from above in the browser. Click on File -> Save Page As or right click and choose Save As and download the template as Webpage, HTML.
  3. Name the file with .html as the file extension while saving. Ex: email-template-one.html
  4. In your text editor, open the saved HTML file. You can now make edits to the HTML.
  5. To view the file that you are editing in the browser, go to your browser and click on File -> Open File.
  6. When editing the template, you must save the file first and then refresh the browser to see the changes.

Customizing Email Templates

  1. In the email template, Sections, Divider ElementsElements and Columns are clearly marked with comments.
  2. Sections are large blocks of content organized into a layout (i.e. multiple columns). When rearranging the email template layout, Sections should not be placed within other Sections.
  3. Divider Elements can be placed between Sections or within Sections that do not have columns.
  4. Elements are assets such as Buttons, Links, Headers, Paragraph Text, etc. These Elements can be used within any Section.
  5. When rearranging Elements or Sections, copy the entire code block including the START and END comments.
  6. To add new Elements to a Section, copy and paste Elements from the HTML template into the section.
  7. To delete a Section or Element, delete all of the code including the START and END comments.
  8. Avoid deleting columns. Columns will not automatically resize to fill the entire width of the email if one column is deleted in a section with two columns, for example. Copy or modify a Section without columns instead.
  9. All links must include https:// or http:// to function.