The "How-to" page is where you will find all sorts of helpful information about your new website.

How-To Table of Contents

Pages

  1. From the Dashboard left-side menu, click ‘Pages’ (This will allow you to view all Pages that are currently built.)
  2. If you want to build a new page, select ‘Add New’
  3. On new pages ‘Enter title here’. Upon saving the draft or publishing the page a URL will be auto-generated based upon what is entered into the “Enter Title” field. To change, click the Edit button that appears under field.
  4. If applicable, set the parent page under Page Attributes (in the right column.) This will set the url structure but NOT the visual display of subpages in the site navigation. You will need to add these in Menus (see below.)
  5. Under 'Additional Page Content' you have additional fields that will vary depending on the type of basic page you are creating/editing.
    1. Select your Submenu Type - Standard (wavey white block under hero image), Brand (blocks with logo under the hero image), or None.
    2. Same for the Header Type - Interior, Home, Brand, Product, Hall of Fame.
    3. Here you can also add an alternative Title (this will override the page name and be the page h1) and Secondary Title (if applicable to the type of page you are creating/editing)
    4. Header image - This is highly recommended on most pages though is not absolutely required.
  6. Enter content into wysiwyg editor (instructions below). Most of your pages will use the page blocks to layout content.
  7. Enter SEO information in the Yoast SEO settings. (You will need to add a Meta Title/Meta Description.)
    1. Use the social sharing tab in Yeast to set specific content for Facebook and Twitter.
  8. Select any page blocks to join to the page by clicking name in the left window of Page Blocks box. Anything on the right will appear on the front end. (See Page Blocks section for details on how to build Page Blocks.)
    1. Click and drag to reorder. Click (-) to remove from page.
    2. Note: Page blocks need to be created before they can be joined to the page.
  9. Save as Draft, Publish (or Update to save edits) the page block to save it.
    1. Remember, published page blocks will not be visible on a page until it has be Joined to that page.
 

Content Editor (WYSIWYG)

Please note, if you do not see two lines of menu icons at the top of the wysiwyg you will need to click on the toggle open button.
  1. Type content directly into the wysiwyg editor or copy/paste from word processor with ease.
    1. When copying/pasting, ALWAYS use the 'clear formatting' button (small eraser icon) after pasting, and/or 'paste as plain text' (T on clipboard icon) before pasting.
  2. Use special characters button (Ω) to replace any special characters from pasted content. If not, the coding may be different.
  3. To add a horizontal line across the content space click on the 'horizontal line' icon (—).

Font Styles

  1. Different font and header styles are preloaded in the (Paragraph) drop-down menu and are labeled (Header 1, Header 2, etc.) Please see the Content Styles page for reference to your site’s font styles.
    1. Highlight the text and then select the desired font style
  2. Add 'Intro' text styling by highlighting text and going to the dropdown menu Formats > Intro next to the header styling options.

Block Quotes (in Content Editor)

  1. Highlight text to be put into block quotes.
  2. Select block quote button (“) next to the Italics.

Links and Buttons

  1. Highlight the word/s which you want to create as a link and clicking on the insert/edit link icon (chain icon).
  2. Enter the destination URL directly into the field or performing search by beginning to type in the internal page or post you want to link to.
    1. For internal links, you can also insert the page url after your domain name. IE: www.website.com/about would be: ( /about). Click the blue arrow 'Apply' button.
    2. For external links, insert the entire url (http://www.website.com). To open external links (or a pdf or image) in a new tab click on the 'gear' icon to get more link options. In the popup window click "Open in a New Tab". Click the blue arrow 'Apply' button.
    3. For telephone “click to call” functionality add "tel:" followed by the phone number (tel:8885551234).
    4. For email links add "mailto:" followed by the email address (mailto:name@email.com)
    5. To break a link, click on the link and then click the 'Remove Link' button (broken chain icon).
  3. To make a link into a button, highlight the link and in the Formats dropdown (Next to the Paragraph/Headers selector) menu select 'Button'.
Button Example

Inline Images

  1. To add an inline image (most likely used within Blog Posts), place your cursor on the area where the image should appear, and click 'Add Media' button above wysiwyg.
  2. Select image or search using field in top right corner, select it, then click blue 'Insert Into Page' button.
    1. You can also Upload a new file from your computer. Note: Images should be edited and cropped to the correct pixel dimensions before uploading. Jpgs and Pngs should be 72dpi. To keep page load times low we generally recommend that images be less than 250mb.
  3. Once the image is in place, click on image to reveal edit toolbar. Choose an alignment and click on the 'edit' pencil icon to control other setting such as link options.
 

SEO Settings

  1. Yoast SEO tab will automatically pull the page name and beginning content on the page as your Meta Title and Descriptions. Overriding these will allow you to control what text (and keywords) search engines will see here. Your custom page title should end with the site name. You will need to add this manually, it will not automatically appear when you customize the Meta Title.
    1. Enter Title tags (max. 70 characters)
    2. Enter Meta Description (max. 140 characters)
  2. Social tab - These fields can be used to custom set the information that will display on social media when the page, post, etc is shared on social media. Mostly used for any pages, post, resources that will be shared on social media.
    1. Enter Title
    2. Enter Description
    3. Upload Image
 

Landing Pages

To make a page a landing page, select "None" for the header and submenu, then select "Yes" for the landing page field.

Page Attributes

Underneath the publishing tools at the top right is Page Attributes. This is where you can assign a page to a parent page.
  1. If you assign a page to a parent page it will change the url structure of the page.
    1. If ‘new page’ is assigned to ‘old page’, its url will change to old-page/new-page
  2. You can set the order of pages in the visual navigation in Appearance > Menus. (directions below)

Page Blocks

Page Blocks are created separately from pages, and then joined to the desired page(s). They do not appear on your site unless they are assigned to a page. You can either assign pages from the page block backend, or, from the page backend you can join created page blocks.

All Page Blocks

  • To view/edit existing page blocks, in the dashboard left menu, click Page Blocks/All Page Blocks. This will allow you to view all Page Blocks that are currently built.
    • From a page, you can also click on the “Edit” red button that appears in the upper right corner of each page block (you must be logged into WordPress) to edit that specific block.
  • Existing page blocks can be “Cloned” or "Copied to a New Draft” but you MUST rename and change the joined pages or duplicates will appear on those pages.
  • Page blocks may be used on multiple pages exactly as they are created (you may consider naming these starting with “Global”). Keep in mind that any edits made to this page block will be reflected across all occurrences of this block.

Add New

    1. To create new page blocks, in the dashboard left menu, click Page Blocks > Add New. You can also click “Add New” from the top of the All Page Blocks view.
    2. “Enter title here”
      1. Note: unlike page titles, this title is not associated with SEO in anyway.
      2. You will want to name it intuitively, such as starting with the name of the page this block will be joined to, followed by the block layout, and perhaps the beginning content of the block. This will make it easier to find to edit later. Example: “About - 5050 Our History”
    3. Select your desired Layout: Columns, Blog Feed, Logo Collections, Locations, Team, Instagram
    4. Follow more detailed instructions on Page Blocks Layout Options page for each specific layout option.
    5. Join this page block to specific page(s) here. Note: This page block will appear at the bottom of that page. If needed, you will have to go to back of the page to rearrange the order of the blocks.
    6. Save as Draft, Publish (or Update to save an edit) the page block to save it. Remember, even published page blocks will not be visible on a page until it has be Joined to that page.

Page Block Layout Options

  • Columns
  • Testimonial
  • Blog Feed
  • FAQs
  • Gallery
  • Hall of Fame
  • Products
  • Feed (instagram)

Custom Post Types:

FAQ

FAQs can be joined directly to a page, or to a page block with the layout FAQ, depending on where on the page you need the FAQ to appear.
  1. In left menu, click FAQ (This will allow you to view a listing of all created faqs.)
  2. To add a new FAQ, go to FAQ > Add New (you can also do this from the All page.)
  3. On the new FAQ, name the item with the question and then repeat it in the Question field
  4. In the wysiwyg, enter the answer. You have full editor stylings here.
  5. Publish, Update or Save as a Draft.

Hall of Fame

Locations

Locations are added to the site via an upload CSV. You can edit and reupload the CSV as often as you need to. This will control the filtering options for "Restaurants/Stands" and "Grocery Stores", as well as identifying "Hall of Famers".

Posts (blog)

These are built very similar to pages, but have a slightly different layout and required fields.
  1. In left menu, click Posts (This will allow you to view a listing of all created course.)
  2. Posts also has a Categories taxonomy that can be used for filtering the blog. Each post should be assigned to the relevant categories. Select relevant Categories in the right column. New categories can be added here.
  3. To add a new posts, go to Posts > Add New (you can also do this from the All page.)
  4. Add a Featured Image, be sure to use the recommended size so that all images will appear consistently on the landing page. This image will appear on the landing page cards, blog page blocks, and large at the top of the blog detail pages.
  5. On the new Post detail page, name the course (this will feed to the landing page and blog page block).
  6. Enter blog content in the wysiwyg.
  7. Under Additional Page Content, you can overrider the page name with the Title field and enter a header image for the detail page.
  8. Enter an Excerpt if you want specific content, different than the blog starting content to appear on the landing page cards.
  9. Note: Page Blocks are not applicable to the blog.
  10. Set any Yoast SEO meta information as you would on a basic page.
  11. Publish, Update or Save as a Draft.
    1. In the Visibility tab of the post to Sticky, this will make this post appear at the top of the blog feed.
    2. Under Published you can change the date to post date or schedule ahead when this post will appear.
 

Products

The shop landing page (archive page) does not require a separate basic page. The content on that page is editable in the Settings tab within the Team Bio section on the left dashboard menu. You can edit the h1, header image, and page content there. The bios will automatically load to the page. You can also add sidebar widgets to this page, the widget area already exists so you just need to create new a OMS Widget and join it to the area in the Appearance Widgets tab.  

Media Library

  1. To view the Media Library click Media in the dashboard menu. (You can also go directly to the 'Add New' screen from here.
  2. To 'Add New' images/files, click the Add New button at the top of the page. Then drag and drop files into window or click Select Files button.
    1. You can add files directly to a specific folder, or drag/drop them later.
  3. Inside the Media 'Grid', media items are displayed in a thumbnail grid for ease of navigation. Click any media item to edit the image title, meta data, link options; however, we recommend that you use photo editing software like Photoshop before uploading images to Media Library.
    1. This is where you can find the unique URL for image and PDF, which can be used to link to 'Download' a PDF.
  4. Media library can be filtered by type or date and is searchable by title.

Options

  • Edit the Header Phone Number
  • Edit the defautl header image for pages and blog posts, and the default featured image for blog detial pages.
  • Edit eNewsletter signup text that appears on the blog landing pages.
  • Edit Social Media links in footer

Menus

Use menus to organize how you want the various menus to display.
  1. To add pages to your menus and to structure sub pages, navigate to Appearance > Menus in the left dashboard menu.
  2. At the top of the page, select the menu you want to edit from the dropdown, or select create a new menu.
  3. Adding Pages (or post type pages):
    1. Find the page you wish to add to your menu from the selection area on the left. Select all applicable pages and add to menu.
    2. Once in the menu, drag and drop the pages to reorder or set as sub pages.
      1. To set as a subpage, drag the page so it appears indented underneath the primary page.
    3. The menu label defaults to the name of the page but this can be overwritten. Click the arrow that appears all the way to the right of the page label and enter your title in the ‘navigation label’ field. You can delete menu items in this section as well.
    4. 'Save Menu' with the red button to the right.
  4. Adding 'Custom Links' such as a phone number or external site page.
    1. To add a custom link to your menu, select 'custom link' from the left options area and 'Add to Menu'.
    2. Add the URL and Navigation Label you want to display.
  5. 'Save Menu' with the red button to the right.

FORMS

New Forms
  1. To create a new Form, select Ninja Forms from the left navigation.
  2. Select Add New (or you can add new from the Ninja Form Dashboard or duplicate and existing form.)
  3. You can either click “Blank Form” to build a form from scratch, or you can start from a template such as Contact Us.
  4. On the right side of the screen are all of the form fields that are available to you.
  5. Click a form field to have it appear on the left side of the screen. Clicking on the form field will open up a window on the right where you can customize the “Label” of the field and/or make a field required.
  6. Next select the “Email & Actions” tab to edit the Success Message and Admin Email.
    1. Redirect – redirects to thank you page (You must build a Thank You page in the Pages section, and then add the URL to this action. We recommend this for tracking goals in Analytics.)
    2. Email admin –You can customize the way each submission hits your inbox: from name, address, to email (very important), subject, and fields.
  7. The Advanced Settings below the html window allow for additional email parameters to be added. If an auto Reply email, CC or additional email addresses need to be added to the form. Can be done here versus creating new email addresses.
  8. Once the form is complete, publish your form. Then copy the short code for your form and paste into your wysiwyg on the page that you want to add it to.
Editing Existing Forms
  1. To edit the existing form select Ninja Forms > Dashboard from the left navigation.
  2. Select form to be edited.
  3. Click on the gear icon of the field you want to edit.
  4. Edit the Label to change the name of this field, edit or add Options below to change the selections available within the dropdown.
  5. Each field in the form has a ‘Required Field’ toggle switch under the Label.
  6. To add new fields click on the blue “+” button in the lower right corner.
  7. Once the form is complete, publish your form. The form will automatically update on the pages that have the short code for this form.

Homepage

The homepage is a basic page with additional functionality related to the header area.
  1. Homepage Content:
    1. Title: Enter the h1 for the page
    2. Background Text: The large style light text behind the h1. (Imagine
    3. Header Image: Enter image (size is different than the inner page header image)
    4. Button Text: Enter text for button that can appear below the h1.
    5. Enter Button link
    6. Enter Animation Speed
    7. Enter Message Duration
    8. Enter Home Page Messages that will rotate in place of the h1.

Gift Cards

Allows customer to purchase digital gift cards that are sent to others.
  1. Purchasing a gift card effectively creates a copy of the coupon "giftcard", with the specified dollar amount added to it and a randomized code.
  2. The new coupon, will be sent via email to the recipient email specified on checkout.
  3. If you want to modify how the coupon appears in the email, you can do it under "WooCommerce" -> "Settings" -> "Smart Coupons".
  4. In all other ways, the gift card works as a "Store Credit/Gift Certificate" coupon.
  5. In EDI file, like other coupons, the amount used will come through as a cart discount ("PO1-D" line).
  6. You can see total usage, but not specific orders, of gift cards (and all coupons) under "WooCommerce" -> "Coupons" -> "Coupons by date".
  7. If a new gift card product needs to be set-up for any reason:
    1. Go to "WooCommerce" -> "Coupons".
    2. Create a new coupon. Select Store Credit/Gift Certificate as discount type. Important: Coupon code should not have any spaces between the name. Leave coupon amount blank.
    3. Create a new product.
    4. Leave regular price and sale price fields blank.
    5. Mark as virtual.
    6. Under coupons, select your coupon.
    7. Additional specific details can be found in the plugin documentation: https://docs.woocommerce.com/document/smart-coupons/

Gift Card Lookup

  1. In the admin, head to WooCommerce > Gift Card Report
  2. On the Gift Card Report, you can search by Order ID, Gift Card Code, and Recipient Email.
  3. After clicking Submit, you will see which order the Gift Card code was originally purchased on, and any orders where that Gift Card code was used on. Clicking on the order link will take you to the order in the admin.
  4. Searching by Email and by Purchased with Order ID will also turn up appropriate results by which to click further into and get the information you need.

!