Introduction to Basic Website Maintenance. Fox River Water Reclamation District

Transcription

1 Introduction to using WordPress CMS instructions prepared for Fox River Water Reclamation District Prepared by John Staples, Visionary Webworks / eparkdistrict.com Revised 05/02/ S Bartlett Rd Suite Bartlett, Illinois tel fax cell

2 Introduction / Important Things To Remember! ALWAYS check your work on the website as the last thing you do. Never mind that you were very careful or that everything looked fine in your CMS. The only way to know for sure that your changes are complete and correct is to look at them the way your users do, with a browser! If you check your work in the browser and for some reason it looks like nothing has changed it could be your cache interfering with you. Sometimes the cache does not accurately report to the browser. This is usually OK for the end-user but for you it can be maddening when you are trying to see your latest changes but the browser insists on showing you what s in the cache instead. If this happens to you try the following steps (in Internet Explorer) while viewing the page until one of them resolves the problem for you, o Click the browser s REFRESH button (this usually does the trick) o Click the browser s REFRESH button while holding down the CTRL key o Clear your browser's cache Use tables for tabular data; avoid using them for page layout! Do not set table widths or column widths or row heights. Setting these parameters to a fixed value may cause the website to function poorly on mobile devices. Just like your business documentation, you need to make a commitment to quality with your website. With printed materials we go through review cycles to ensure everything is correct but with the instant publishing power of the web each publisher will need to monitor the quality of their work. If you are unsure about how to do something get help or make a test page and practice on it first. Don t ever settle for good enough. ALWAYS check your work on the website as the last thing you do. 05/02/16 Page 2 of 53

3 Establishing an Effective Workflow 1. gather all input materials such as images and PDFs before starting to work in the CMS 2. proof and spell-check your text before placing it into the CMS (if you are creating content on Word it may be easier to compose, edit and spell check there) 3. create any PDFs, reduce their size as much as possible and upload them to the website using the CMS 4. create any images, reduce their size as much as possible and adjust them to the desired dimensions (width by height) and upload them to the website using the CMS 5. generally avoid copying from Word and pasting into the CMS as this can introduce problems in your HTML code. Instead, do this, a. copy from Word b. paste into Notepad c. copy from Notepad d. paste into the CMS 6. if you get content from Word (or other similar programs) pay special attention to apostrophes and quotation marks as these do not typically paste well into HTML. For best results convert these from Word-style characters to plain ASCII characters. To see the difference, here is a Word quotation mark, but here is a plain quotation mark, " 7. always have a browser opened for viewing work in progress 05/02/16 Page 3 of 53

4 Starting the CMS Visionary Webworks - eparkdistrict.com 1. open your browser and go here, Pre-Launch: Post-Launch: 2. when asked to log in (figure 4) enter your Username and Password, check the box to be remembered (if you want) and click the Log In button 3. you should see a screen like figure 5 4. below are the main options available to you on the left side of the screen, Media Pages Contact Sliders Appearance (Main Menu) Users 5. we will cover each of these sections in greater detail in this document 05/02/16 Page 4 of 53

5 Media This section of the CMS is primarily for you to upload and manage images and PDFs that you will insert or link in your web pages. NOTE: As mentioned in the "Establishing an Effective Workflow" section, you should size your images before uploading them to the website. Homepage Slideshow - 940px 350px Other interior photos can vary - 550px 450px works nicely Click the Media link and you should see a screen like figure 6. On this screen you will see a grid or a listing (you can easily switch between views) of all of your images and PDFs. In grid view you can filter by Media Category. In list view you can sort by filename, author or date by simply clicking the column header. In either view if you know part of the name of the image or PDF you are looking for you can enter all or part of the name in the box near the top right and click the Search Media button to narrow down the list. When you mouse over a media item in list view you have the option to Edit, Delete or View. In grid view when you click an item to select it you will see detailed info about that item in the right column. In figure 7 you can see a PDF is selected and all of its info is available on the right. You can delete this PDF by clicking the Delete Permanently link BUT use this carefully as it is possible to delete something that you are using elsewhere in the website! Always be sure you no longer need a media item before deleting it. The URL field will be very useful when you need to know the exact URL link for this item. We will use this later in this document. The Title field defaults to the filename but you can change this if you wish. This field will be very important in determining how your documents are organized on your web pages! Caption will add a caption to your images when they are displayed on a web page. Another very important field for images is the Alt Text field; you should always add ALT text to each image so that assistive devices such as screen readers for the visually impaired will function properly with your website. 05/02/16 Page 5 of 53

6 One of the most important options on this page are Document Categories and Media Categories. Document Categories are primarily for your PDFs to organize them on certain pages within your website while Media Categories (without FRWRD prefix) is mainly used to organize your media within the media library. Always select the proper media categories for your images and PDFs to ensure they display on the public-facing web pages and also it will make it much easier for you to locate these resources later on! Figure 8 shows the section where you can add your own Document Categories. Your new website came with many Document Categories already set up and assigned to your PDFs but you can add additional ones easily! Figure 9 shows the section where you can add your own Media Categories. Uploading Images and PDFs 1. click the Add New link near the top of the Media Library page 2. you should see a screen like figure you can now drag and drop images and PDFs into this screen or you can click the Select Files button to select them 4. after uploading your files they will be listed in the Media Library IMPORTANT! After uploading your media files remember to add any desired categories to both the Document Categories field and Media Categories field. If you do not add the proper Document Categories your media will not appear in any of the document lists on the web pages. On the next page is a listing of the Document Categories present when your website was designed. Use the "slug" value in the Document Categories field for each of your uploaded PDFs. 05/02/16 Page 6 of 53

7 Pages This section of the CMS is where you will do most of your work updating your web pages. Click the Pages link and you should see a screen like figure 11. On this screen you will see a listing of all of your web pages. You can sort this list by title and date by simply clicking the column header. If you know part of the name of the web page you are looking for you can enter all or part of the name in the box near the top right and click the Search Pages button to narrow down the list. When you mouse over a page you have the option to Edit, Quick Edit, Trash, View, Clone or New Draft as shown in figure 12. If you click Trash you can remove the page BUT use this carefully as it is possible to delete something that you are using elsewhere in the website! Always be sure you no longer need a page before moving it to Trash. NOTE: If you accidentally send a page to the trash you can recover it by clicking the Trash link at the top of the screen and then choosing to Restore the page. If you click View you can see this page in your browser. If you click Clone you will get an identical copy of this web page. This is a great feature for creating a new web page based on one you already have to avoid the work of creating the page with its tables, images, etc. The New Draft option works similarly but clones the selected page and puts you directly in the editor. If you click the Quick Edit link you are presented with a screen (like figure 13) for editing certain parameters of that page as explained below, title - this is the name of the web page status - this should be set to Published in order to have the page visible on the website by the public IMPORTANT: At this time, no other parameters should be changed on this screen unless you have a specific need and know what these are for! 05/02/16 Page 7 of 53

8 IMPORTANT: If you make any changes be sure and click the blue Update button to the right of the screen otherwise your edits will be lost! If you click the Edit link you are presented with a screen (like figure 14) for editing the content of that page as explained below. The first field at the top of the page serves as the title of the page and also the header displayed at the top of the page (except for the home page where the header is displayed in a different fashion). So whatever you set this to be will be displayed in the menu, on the page itself and in the admin area where you are editing. Below the title field is a button labeled Add Media. This is the button you will use to add images to your web pages (more about this later). The button for Add Shortcode will not be used at this time. Below the Add Media button is the main content editor which consists of a toolbar area and the content window itself. You will type or paste your content text into this window (or edit the text that is already there) and you will insert images and add hyperlinks in this editor all of which will be covered in more detail shortly! To the right are a few parameters that should almost always be set as follows, o Parent is set to (no parent) o Template is set to Default Template o Sidebar Layout is typically set to Default Sidebar Layout (except for specialized pages which may be set to Full Width) Below the main content editor are a few parameters that should almost always be set as follows, o Page Title is set to Show page's title o Breadcrumbs is set to Use default setting o Both Left and Right Sidebar Overrides are set to -No Overrideo Leave everything else set to defaults And finally, a blue Update button (or Publish button if it is a new page) that you should click when you are finished with your updates. Remember to click this button after making changes or your changes will be lost! 05/02/16 Page 8 of 53

9 Content Editor Visionary Webworks - eparkdistrict.com The content editor is very easy to use but below are some basic instructions and an outline of the various items available on the toolbar. Below is an outline of the toolbar features, Bold, Italic and Strikethrough Unordered list and Ordered list Block quote Insert horizontal line Align left, center and right Insert/edit hyperlink and Unlink Read More, Toolbar Toggle and File List Format (figure 15) Underline and Justify Text Color Paste as Text Remove formatting Insert special character Outdent and Indent Insert table and table formatting Undo and redo Keyboard Shortcuts Most of these features are self-explanatory but a few need to be covered in greater detail, Insert/edit hyperlink, Unlink and Anchor - use this feature to, o insert a link to another page in your website use the search feature and list of web pages to choose the link o insert a link to a PDF use the URL field and paste the link to your PDF here - note that you can obtain the link to your PDF by locating the PDF in your Media Library and copying the link shown in the URL field. o insert a link to an external website use the URL field and paste the link to the external website here 05/02/16 Page 9 of 53

10 IMPORTANT: for PDFs and external websites always check the box labled "Open link in a new window/tab" o insert link by typing or pasting an address preceded by "mailto:" like this, mailto:johns@visionarywebworks.com Format - use this feature to choose an existing format for paragraphs and different levels of headers Distraction Free Editing (figure 16) 1. while editing a page click the button directly under the Text tab for distration free writing! Create a New Page - option 1 1. click Pages on the left 2. click Add New 3. add page title 4. edit the page as you wish 5. click the blue Publish button on the right Create a New Page - option 2 1. locate a page in the page list that already contains content similar to the new page you want 2. mouse over the page and select Clone to make a copy 3. open the copy for editing 6. add page title 4. edit the content 7. click the blue Publish button on the right Inserting an Image Into a Web Page 1. prepare your image in your photo editing program size it, crop it, adjust it, compress it, save as JPG, etc. (as explained elsewhere) IMPORTANT: For images used on web pages they should be no wider than 550px! 05/02/16 Page 10 of 53

11 2. insert the image into your web page a. in the content editor, open the web page in which you wish to insert the image b. put your cursor in the area where you want the picture to appear c. click the Add Media button above the content editor (figure 17). on this screen you ad upload files or, d. click Media Library tab and select image you want by clicking it (figure 18) e. on the right i. enter caption and alt text ii. select your alignment iii. set Link to None iv. choose your size (usually Full Size) f. click the blue button labeled Insert into page g. if you wish to make further changes to the image click the image to select it (figure 19) h. notice that you can set its alignment here in case you did not set it earlier i. if there are any settings you forgot to do earlier you can click the edit button (pencil) and make those changes j. click the blue button on the right NOTE: No other parameters should be changed unless you have a specific need and know what you are doing! Removing an Image 1. open the desired web page 2. click the image to select it and then click the Delete Image icon (X) that appears on the image 3. click the blue button on the right Viewing & Editing in HTML Text Mode (figure 20) 1. open the desired web page and click the Text tab at the top right 2. be very careful if you make any edits! 05/02/16 Page 11 of 53

12 Quick Way to Locate the Webpage You Wish To Update 1. all webpages in your menu have already been created and are available for you to add content into 2. after logging into the admin go to the website by clicking the "Fox River Water Reclamation District / Visit Site" link 3. using the main menu, select the page you wish to update and it should load in your browser NOTE: any menu item that you identified as a PDF or an external link will not be active and cannot be updated in this fashion; this is only for your actual webpages 4. notice that the loaded webpage has a link in the top toolbar (as well as the content area) called "Edit Page" 5. click the "Edit Page" link to switch to the CMS editor with that page loaded 05/02/16 Page 12 of 53

13 Homepage Banner Slider Changing Home Page rotating photos 1. create new images and size them to exactly 940px 350px 2. be sure they have no border 3. be sure they are no larger than approximately 100k 4. upload them to the Media Library 5. click Sliders on the left and you get to a screen like figure click HomePageSlider and you will get to a screen like figure 22 where you should now see a set of panels representing your homepage banner images 7. if you wish to re-order the images you can do so by simply clicking and dragging the panels 8. if you wish to delete an image simply open the panel by clicking the down arrow on the right of the panel and click the Delete Slide link 9. if you wish to add an image a. click the Add New Slide button near the top of the of the screen b. the new panel appears at the bottom c. open the new panel by clicking the down arrow on the right of the panel d. click the Get Image button on the left e. in the pop up window either upload a properly sized image or select one from the Media Library f. click the blue Use For Slide button g. make sure the settings are i. Full Size ii. Default (940x350, hard crop) h. add link, headline and/or description if you like 10. if you wish to change an existing image a. open the panel by clicking the down arrow on the right of the panel b. click the Remove button near the image c. follow the steps in #9 above to add a new image 11. click the blue Update Slider button. IMPORTANT: If you make any changes be sure and click the blue Update Slider button to the right of the screen otherwise your changes will be lost! NOTE: Your homepage was designed to feature images at the proper size and may not function correctly if you do not size your images correctly before adding them! 05/02/16 Page 13 of 53

14 Document Overview Your website has an advanced yet easy to use and easy to maintain system for displaying documents! For your purposes these will mainly be PDFs but other types of documents can be stored and displayed as well. The Document Category tagging discussed previously will be key to using this system. Below is a simple example that should help to explain this system! 1. for this example let's assume you wish to add a new PDF to your FOIA download page that is located here, (see figure 23) 2. first you would prepare your PDF; in this example let's call it, "FOIA Updates 2016.pdf" 3. upload "FOIA Updates 2016.pdf" to the website using the Media Library (figure 24) 4. go to the Media Library, click "FOIA Updates 2016.pdf" to select it and then set its Document Categories to "all-downloads" and "foia", separated by a comma (figure 25) 5. now view the FOIA downloads page again and you should see the new document in the list (figure 26) But let's say that after viewing the FOIA downloads page you decide you prefer that the new PDF be at the top of the list. Here is how to do that, 1. go to the Media Library and click "FOIA Updates 2016.pdf" 2. in the Title field on the right, change the Title to something that will be above the other documents alphabetically 3. in this case we will change it from "FOIA Updates 2016" to "2016 FOIA Updates" 4. view the FOIA downloads page again and you should see the new document at the top of the list (figure 27) For your document sections that have a lot of documents that are logically organized by date, such as your Board of Trustees Agendas and Minutes page, we simply named them starting with the year, then the numeric month value, the date and finally the general title of the document. We recommend you continue to use this naming standard for optimum display of your documents. This also makes it very easy to locate a full year's worth of documents by simply searching on the year! 05/02/16 Page 14 of 53

15 Document Categories Category Name Category Slug 457 Information 457-information All Downloads all-downloads Annexations annexations Bid/Proposal Notices bidproposal-notices Bid/Proposal Results bidproposal-results Billing Information billing-information Board of Local Improvements Agendas and Minutes board-of-local-improvements-agendas-and-minutes Board of Trustees Agendas and Minutes board-of-trustees-agendas-and-minutes Board Schedule board-schedule Engineering Standards engineering-standards FMLA Forms and Information fmla-forms-and-information FOIA foia FRWRD Holiday Schedule frwrd-holiday-schedule FRWRD Organization Chart frwrd-organization-chart FRWRD Phone List frwrd-phone-list FRWRD Safety Manual frwrd-safety-manual FRWRD Work Schedule frwrd-work-schedule Group Insurance Information and Forms group-insurance-information-and-forms Industrial Pretreatment industrial-pretreatment Laboratory laboratory Other Public Notices/Information other-public-noticesinformation Personnel Handbook personnel-handbook Sewer Permits sewer-permits Sewer Permits for Food Service Establishments sewer-permits-for-food-service-establishments Skyline Water Customers skyline-water-customers 05/02/16 Page 15 of 53

16 Document Categories (cont.) all-downloads foia board-of-local-improvements-agendas-and-minutes board-of-trustees-agendas-and-minutes Skyline Water Customers - skyline-water-customers Billing Information - billing-information Career Opportunities - career-opportunities Annexations - annexations Bid/Proposal Notices - bidproposal-notices Bid/Proposal Results - bidproposal-results Other Public Notices/Information - other-public-noticesinformation Sewer Permits - sewer-permits Sewer Permits for Food Service Establishments - sewer-permits-for-food-service-establishments Industrial Pretreatment - industrial-pretreatment Engineering Standards - engineering-standards Laboratory - laboratory 05/02/16 Page 16 of 53

17 Sidebar In order to update the sidebar that is displayed on all pages simply open and edit the page named Sidebar! You can put content in the sidebar just like any web page except you should stay aware that large images or large amounts of text will not display nicely in the narrow confines of the sidebar. 05/02/16 Page 17 of 53

18 Appearance / Main Menu It is quite easy to make change to the Main Menu for your website. The CMS provides an easy to use drag and drop interface. Click Appearance and select Menus from the menu. Rearranging Existing Menu Items To change the order of the existing menu items in the menu, from the screen shown in figure 28, simply click and drag each menu item to its desired location. Click the blue Save Menu button at the top right (or bottom right) and then test in your browser. As you drag menu items you may notice you have the option to drop a menu item indented under another menu item. If you do that this will cause that menu item to become a drop down from the one above it! This is not a feature you currently use but as your website grows you may wish to use this dropdown panel capability and you can easily do so! Deleting an Existing Menu Item To delete a menu item click the down arrow on the menu item and you should see the screen as shown in figure 29. Near the bottom of the menu item's panel you will see a link labeled "Remove". Click that link to delete the menu item. Click the blue Save Menu button at the top right (or bottom right) and then test in your browser. Editing an Existing Menu Item Click the desired menu item's down arrow to open its panel as shown in figure 29. To change the text that will be displayed in the menu simply edit the Navigation Label field. Click the blue Save Menu button at the top right (or bottom right) and then test in your browser. Adding a New Menu Item There are several types of menu items you can add to your menu, a link to a page in your website a link to a PDF in your website a link to an external website a "dummy" link that does not go anywhere but serves as a trigger for a dropdown menu panel Note: When adding menu items you must be aware that adding too many will cause your main menu to wrap and this is generally not a good thing. If you find this is 05/02/16 Page 18 of 53

19 happening you should consider whether you can reorganize your menu to use dropdown panels for related items and have fewer in the top level. Adding Menu Item that links to a page in your website First make sure the page already exists on your website. It does not need to be complete but does need to have been created already. Click the Pages option on the left and the Pages panel will open as shown in figure 30. If you see the new page you wish to add to the menu click its checkbox and then click the Add to Menu button. If you do not see the new page you may need to select the View All tab or the Search tab. After adding the page to the menu it will be at the very bottom of the menu panel. Click and drag it to where you want it in the menu. Click the blue Save Menu button at the top right (or bottom right) and then test in your browser. Adding Menu Item that links to a PDF in your website First make sure the PDF already exists on your website. Go to the Media Library and locate the PDF and click on it (or click its Edit link). On the top right of the PDF edit screen you will see a field labeled "File URL:" than contains the complete URL to the PDF. For example, Select and copy the entire URL and then return to the Main Menu screen. This time, instead of clicking the Pages option, click the Links option and you should see a screen like that in figure 31. Erase the text currently in the URL field and paste the URL for your PDF into the URL field. In the Link Text field type what you would like to be in the menu text for this link. Click the Add to Menu button and then drag this new item wherever you want it in the menu. For a PDF link in the menu you typically want it to open in a new browser window. To make your menu item do that simply click the new menu item and make sure the box labeled "Open link in a new window/tab" is checked. If you do not see this checkbox click Screen Options at the very top right of the screen and make sure Link Target is checked. Click the blue Save Menu button at the top right (or bottom right) and then test in your browser. 05/02/16 Page 19 of 53

20 Adding Menu Item that links to an external website In the main menu screen, instead of clicking the Pages option, click the Links option and you should see a screen like that in figure 31. Erase the text currently in the URL field and type or paste the URL for your external link into the URL field. In the Link Text field type what you would like to be in the menu text for this link. Click the Add to Menu button and then drag this new item wherever you want it in the menu. For an external link in the menu you typically want it to open in a new browser window. To make your menu item do that simply click the new menu item and make sure the box labeled "Open link in a new window/tab" is checked. If you do not see this checkbox click Screen Options at the very top right of the screen and make sure Link Target is checked. Click the blue Save Menu button at the top right (or bottom right) and then test in your browser. 05/02/16 Page 20 of 53

21 Users This section provides a way for each user to update their information. It also provides the way for an admin to create new users, change their roles and delete users. When you click Users you will see a listing of your current users like in figure XXX. When you click a user you see a screen like figures XXX and XXX where you can set various parameters for that user such as password reset, , etc. NOTE: Initially your users are all set to the highest level of access. Before you assign non-admin users please consult with us to determine the proper settings for these users! 05/02/16 Page 21 of 53

22 Figure 1 05/02/16 Page 22 of 53

23 Figure 2 05/02/16 Page 23 of 53

24 Figure 3 05/02/16 Page 24 of 53

25 Figure 4 05/02/16 Page 25 of 53

26 Figure 5 05/02/16 Page 26 of 53

27 Figure 6 05/02/16 Page 27 of 53

28 Figure 7 05/02/16 Page 28 of 53

29 Figure 8 05/02/16 Page 29 of 53

30 Figure 9 05/02/16 Page 30 of 53

31 Figure 10 05/02/16 Page 31 of 53

32 Figure 11 05/02/16 Page 32 of 53

33 Figure 12 05/02/16 Page 33 of 53

34 Figure 13 05/02/16 Page 34 of 53

35 Figure 14 05/02/16 Page 35 of 53

36 Figure 15 05/02/16 Page 36 of 53

37 Figure 16 05/02/16 Page 37 of 53

38 Figure 17 05/02/16 Page 38 of 53

39 Figure 18 05/02/16 Page 39 of 53

40 Figure 19 05/02/16 Page 40 of 53

41 Figure 20 05/02/16 Page 41 of 53

42 Figure 21 05/02/16 Page 42 of 53

43 Figure 22 05/02/16 Page 43 of 53

44 Figure 23 05/02/16 Page 44 of 53

45 Figure 24 05/02/16 Page 45 of 53

46 Figure 25 05/02/16 Page 46 of 53

47 Figure 26 05/02/16 Page 47 of 53

48 Figure 27 05/02/16 Page 48 of 53

49 Figure 28 05/02/16 Page 49 of 53

50 Figure 29 05/02/16 Page 50 of 53

51 Figure 30 05/02/16 Page 51 of 53

52 Figure 31 05/02/16 Page 52 of 53

53 For additional information please contact Visionary Webworks. Visionary Webworks 956 S Bartlett Road Suite 276 Bartlett, IL tel fax support@visionarywebworks.com 05/02/16 Page 53 of 53