North Star Marketing Client : The Guthrie Group Deliverable : Website Training +++ LOGGING IN AND OUT +++++++++ 1. Go to http://tgg.northstarmarketing.com/wp admin/. This is the address for the staging site site, which you will use until the site is live. Once the site is live, you will use: http://www.guthriegroup.com/wp admin. 2. Enter your unique username and password. 3. Once you have finished editing your site, log out by hovering over the Howdy, [your name]! button in the top right corner of the window and clicking on Log Out. +++ CREATING A NEW PAGE ++++++++ Pages are static content, generally linked in your navigation. They are used for things like your about page and contact page. 1. To create a new page, hover over (don t click) the link for Pages in the toolbar on the left hand side of the window. A pop out menu will appear with three options: All Pages, Add New, Tree View. *Helpful Hint: By clicking on Tree View, you will see an expandable, easily understandable version of your navigation. It is probably best to access your already created pages from this view. The Pages Tree View is accessible from the Dashboard as well as the Pages menu* 2. Click on Add New. 3. A window with a blank editor and title bar will appear. Set the title you would like to appear on the page. It is recommended that you choose a title you will keep long term. Changing page titles often creates inconsistencies with the URLs (which are created from original page titles). 4. A shorter Navigation Label, used in your site s navigation menus, can be entered if the title is long (see Step 5). In the General Page Settings box, you may enter the optional Navigation Label. The text entered in this field will override the title and show in all automatically generated site navigation menus and breadcrumbs.
5. Set your page parent. You can set this option in the Page Attributes box to the right of the content area. If you want this page to appear in your primary (first tier) navigation, do not set a parent page. If you want it to appear as a sub page (drop down) of any other page within your navigation, select the appropriate parent. 6. You will want to Publish your page after you are done. There are other options as well in the Publish box. 7. To reorder the page, hover over Pages. Click on Tree View. +++ EDITING A PAGE ++++++++++++++ 1. Hover over Pages in your toolbar. Click on Tree View. 2. Select the page you would like to edit from the Tree View menu. You can either click on the name of the page or you can hover over the title of the page and click Edit in the pop up box.
3. Once you are within the page, you will see your page title and the editor. The editor uses many of the same basic functions as Microsoft Word or Pages. Specialty functions are explained below: a. Pasting content: If you have copied text from another document, you can paste into your editor using the Paste as Plain Text option. This will allow you to format the text correctly within WordPress. b. Font styles, colors and formats: i. To set font sizes and heading styles (see style sheet for recommendations), choose the appropriate size/style from the menu titled Paragraph. ii. Paragraph is the regular size for all body content. iii. You will also have options from Heading 1 to Heading 6 for primary titles and sub headings. c. Adding anchors : Anchors allow users to jump back and forth between sections of text. They are used most often in long sections of Frequently Asked Questions. i. To add an anchor, set your cursor a line above the text you want users to jump to. Click the anchor button and set a title. ii. The title should be very simple and should have only one word. For example, if you want users to jump to the answer for question 1, name it one. iii. After setting the anchor, highlight the text you want users to click on and jump from. In our example, this would be question 1. iv. Click the link button. Remember, the text you are trying to link (question 1) must be highlighted to activate the link button. v. In the link box, type in the # symbol and your anchor title. In our example, this would be #one. d. Adding links : i. Highlight the text you would like to turn into a hyperlink. ii. Click the link button. iii. Set the address for the link, including the http:// prefix. If you are jumping to another page within your multi site, select the page name from the list provided. iv. Be sure to set a title for the link so that screen readers can pick those up. v. Check the box to open the link in a new window if you are opening a document, or going to a third party site. e. Adding pictures : i. To add a picture within your text, place your cursor at the beginning of the line where you would like the top of the picture to appear.
ii. Click on the Media Library icon. This will pull up your media loader and library. iii. To add an image from your computer, simply click and drag the image into the box. Alternatively, you can click Select Files, and it will pull up the file finder on your computer where you can select your image. iv. Once your image is saved, you can give it a title (what will show up in the Media Library) and Alternate Text (necessary for screen readers and good for search engine optimization). v. Always select full size or large. You may make an exception if you want to insert a smaller picture in the content area. vi. Choose the picture orientation: Left with text wrapping, right with text wrapping, etc. vii. Click Insert into Post. viii. Voila. Image appears in text. Because you selected full/large size, grab the bottom right hand corner of the picture and size it down to the correct proportion. *Helpful Hint: Proportions are often slightly different when you view your picture on the front end of the site, so always preview your pages.* f. Adding PDFs or other documents : i. Follow steps i. iv. above, as though you are adding a picture, but select your PDF/document instead. ii. Give your document a title and alternate text. iii. Click Insert into Post in the bottom right corner. 4. To publish any of your changes at any time, click the Update button on the right hand side of the window. If you wish to save your content but not publish it, go to the Publish box on the right side of the window and set the Status to Draft.
*Helpful Hint: If you accidentally leave the page, the content will not save automatically! It is recommended that you update often.* +++ HOME PAGE +++++++++ The home page is a special page that has specific options not found on other pages. Select Home Page from the Template dropdown. There should be only one page in the site with this template. This template should not be used in subsites. BASIC CONTENT 1. Enter the intro title and text. 2. Enter the YouTube video id and optional screenshot. If no screenshot is selected, a screenshot will be used from YouTube. ROTATORS 1. Locate the Slides section under Home Page Settings. Here you can edit, remove, or add slides to your rotator. An image is required. 2. To manage Images: a. To edit/change an existing image i. Hover over the thumbnail preview and click the X that displays.
ii. Click the Add Image button to display the media uploader iii. Upload your desired image, or select an existing one from the media library iv. Click the Select button b. To add an image to a new slide i. Click the Add Image button to display the media uploader ii. Upload your desired image, or select an existing one from the media library iii. Click the Select button 3. To change the order of the slides simply click on the far left side of the slide (where the slide number is listed in the darker shade of gray), hold, and drag a slide in your desired order. 4. Make sure to update / publish after all changes are made. INDUSTRY RESULTS Enter the 3 sections of metrics that appear on the home page for 2 industries. CLIENTS Enter 5 logos and 1 testimonial for each slide on the home page for this section. PROJECTS Enter any number of projects to feature on the home page. INDUSTRIES Enter any number of industries to feature on the home page. +++ BLOG/NEWS PAGE +++++++++ This page is a special template specially designed. It shows an archive of news posts in the
main content area and upcoming events in the sidebar. Post management is explained later. Any content in the editor will not display. Select Blog/News from the Template dropdown. There should be only one page in the site with this template. +++ CALENDAR PAGE +++++++++ The page is a special template specially designed. It shows an agenda view of events in the main content area and recent news in the sidebar. Event management is explained later. Any content in the editor will not display. Select Calendar from the Template dropdown. There should be only one page in the site with this template. +++ SIDEBAR WITH SUBLINKS +++++++++ The page is a special template specially designed. This template will show page content with page children in the sidebar. Select Sidebar with Sublinks from the Template dropdown. There can be many pages with this template. +++ ADDING A POST +++++++++ Posts are chronological frequently updated content often used for news and personal updates, such as in a blog. 1. Posts are controlled and added through the Posts button in the toolbar on the left hand side of the window. 2. If you have not created the appropriate category for your post, do that first. For example, if you are adding a posts about a recent furniture sale, be sure you have created a category for Furniture News (feel free to name it whatever you want, though!). 3. To create a category, hover over Posts. Do not click. 4. Click Categories. 5. This will pull up a window where you can add a new category or edit your current categories. 6. To add new, give your category a name. If it is a sub category, choose its parent from the drop down menu. 7. Click Add New Category. 8. To add a new post, hover over Posts and click Add New. 9. Add a title and create your content. 10. Set the news post category from the list on the right side of the window. Check as many categories as are applicable. 11. If you want your news item to appear on a day other than the one you actually added it, you can set a publish date in the Publish box on the right side of the window. 12. Click Publish to publish your post.
+++ EVENTS +++++++++ This calendar can be used as a single calendar system, or it can sync with Google Calendar. 1. To create an event, hover over the Events menu. Click on Add New Event. 2. Enter the title of the event along with any event details. 3. You may choose/create a category for this event to be stored in. By default, there is a General category in place. 4. You can preview your event to make sure the information looks correct. When you are ready, click Publish. Google Calendar If you would like to sync this calendar with an existing Google calendar, rather than filling the calendar with events manually, you can do so by following these instructions. 1. We will need to first get your Google calendar feed from Google calendar so that we can link the feed in the back end of the site. To do this, navigate to your calendar https://www.google.com/calendar 2. In the calendar list on the left side of the page, click the down arrow button next to the appropriate calendar, then select Calendar settings. 3. In the Calendar Address section, click the XML or HTML button. A pop up window with your calendar's public URL will appear. 4. Copy this URL we will enter this into the calendar plugin in the back end of the site.
5. In the back end of the site, hover over Events and select Calendar Feeds. 6. Paste in the calendar URL, that you just copied from Google, into the icalendar/.ics Feed URL field. Enter the Category (if desired) and select Add new subscription don t worry about Tags as they do not apply here. In a few seconds, you should see that the calendar has imported your events (you may want to select the Refresh button to update the status of the import). 7. Once the import is complete, you should be able to view all of the events in the All Events tab. +++ FORMS +++++++++ 1. To create a new form for your site, hover over Forms in your toolbar on the left hand side of your window. 2. Click New Form. 3. You will be prompted to create a title and description for your form. You will have the option of showing the form title and description when you insert the form into content. 4. To add other input fields to your form, you will use the menus on the right hand side of
your window: 5. Standard Fields allow you to create custom checkboxes, drop downs, number fields, radio button options, paragraphs of text, and more. 6. Advanced Fields allow you to add already created fields, such as Name, Address, Date, etc. 7. Post Fields and Pricing Fields are not used as frequently. Pricing Fields are used most often when a product is being sold online. 8. To insert an input field, simply click on it in the menu and it will appear in your form field. Click on the box to edit the field properties. 9. We recommend that you save the form frequently (using the blue Update Form button) as forms do not have an auto save function in WordPress. 10. When you finish populating your form with fields, save it and click Notifications (top of the page under Form Settings ) to set email notifications. 11. The top portion of the notifications page controls where the forms will be sent once submitted. Place your email or the email of the individual to receive the submissions in the first box. The rest of those fields will populate the form address, the form name, etc. You can customize this or choose the info from the form itself. 12. Save your settings. You will now need to go to the page where you would like to insert your form. 13. Once you have chosen your page from the Tree View, click on Add Form seen right above the content area. 14. Choose the form and whether or not you would like the title, description, and Ajax enabled. Click Insert Form. 15. Update your page and you can preview your form. +++ FORM NOTIFICATIONS ++++++++++++++++++ 1. Once you are finished creating your form, you will want to set up notifications so that your team/applicant can receive a notification once a form has been submitted. To begin setting up a notification, select the Forms tab and select the form that you would like to edit.
2. Hover over the Form Settings option and select Notifications. 3. From this menu, you can create as many notifications as you would like. There is a default Admin Notification already set. Let s edit this one. 4. The admin notification can be as complex as you would like. Let s keep this one simple. Leave the Name field set to Admin Notification. The send to field can stay set to Enter Email We will need to change the Send to Email field from {admin_email} to the email address of the person(s) that will be receiving these notifications. If there are multiple people receiving these, you can separate each email address by a comma. 5. The rest of the fields can be similar to the following depending on your preference: Reply to needs to be an address which can be replied to if the applicant is receiving a notification as well. Otherwise, this is not relevant Subject New submission from {form_title} Message {all_fields} +++ PROCESS STEPS ++++++++++++++++++++
Process steps are featured on the home page and have a single page of content. They can be assigned to an industry type (manufacturing or service). Since the home page has significant custom programming to handle the process animation, the number of steps must match the number of steps in the process wheel. +++ SITEWIDE OPTIONS ++++++++++++++++++++ To change template or theme wide options (mostly in the header and footer of the website), navigate to Appearance > Theme Options. In here you may manage some elements in the overall theme.