SITE ADMINISTRATION www.pella.k12.ia.us/wp-admin N O V E M B E R 6, 2 0 1 3
HOW TO LOG IN Login as an admin: 1. In your web browser, go to www.pella.k12.ia.us/wp-admin Note: While in development, you can access the site at: www.pella.k12.ia.us.demo4.flyinghippo.com/wp-admin 2. Enter your username and password CREATING AND EDITING PAGES & POSTS Create a new page: 2. Click on the Pages tab on the left 3. Under the menu, choose Add New 4. Type your title in the top-most bar 5. Begin typing new content in the Main content area 6. All page content and photos go into the large editor area 7. To use subheads, under Format dropdown, choose: heading 2: for grey subhead text heading 3: for subhead yellow/orange text Note: do not use heading 1, as it is reserved for the page title Ordering (pages, schools and home graphics only) 8. On the right column, under Page Attributes, select a parent page (ie: page that this new page will fall under.) 9. To reorder these pages in the side navigation, drag and drop the order in the page listing view. GET PERMALINK To link to another page, enter: [permalink href= XX ]Link[/permalink] where XX is the page id of the other page. This can be found in the address bar when you are editing said page. PAGE 2
ADDING MEDIA TO PAGES Adding images into pages: Note: All images should be 72dpi in RGB format. 1. While editing in the content window, press the Upload/Insert Media icon (it is at the top of the page, directly under the page title and Permalink ) 2. From the following pop-up window you can either: From Computer: Add a new image from your computer Media Library: Use an image that is already being used in another content area 3. Select your image either from your hard drive or the gallery (if it has been used before) 4. Choose align right or align left If you wish to not have these as part of the image, select None for alignment 5. Next to Link URL, press the none button 6. Click Insert into post Adding videos: 1. Upload your video to YouTube. 2. After the video has been uploaded, copy the URL from the address bar on the new video s page. 3. Log back into the admin area and go to the page where you wish to add your video. 4. Paste the URL that you copied above. Note: Ensure that the link is not hyperlinked in the content (ie: underlined). If it is, press the Unlink button (looks like a broken chain). 5. This video file will then be placed in your page s content area. Adding PDFs: PDFs are considered media, and can be uploaded similarly to images above. After the pdf has been uploaded, it will appear in the content as a text link of its title. To change this link, simply type over the default title. RIGHT SIDEBAR CONTENT (SIDEBAR WIDGET) 1. Each page and school page has the option to add a content box to the right sidebar (below the navigation). 2. Using the provided Photoshop template, create your JPEG image to be 190px wide by 115px tall (Note: The website will autoformat larger images to fit a maximum width of 190px, however larger images will take longer to load). 3. Log into the admin and find the page where you wish to add your sidebar content. 4. Scroll down to the Sidebar Widget area. 5. Type your sidebar title in the Title for the Sidebar Widget area. 6. Add the link to the appropriate field. 7. In the content area, add your image (created above) and any related text that you d like to see in the sidebar. The recommended formatting for this area is to first show the image, then the associated text. If you image is larger than 190px wide, you might consider uploading the image as Medium to save file size. 8. Press Update to save. PAGE 3
SETTING PAGE OR NEWS ITEM HEADER IMAGE 1. First, create your photo at exactly 670x268, 72dpi, JPEG format. 2. Log into the admin and navigate to the page you wish to add your header. 3. On the right sidebar, press the Set Featured Image link. 4. Upload your image in the pop-up window and press Set Featured Image. 5. Press Update to save. ADMINISTERING THE HOME PAGE Emergency Alerts The only other feature to point out is Emergency Alerts. In cases of emergency school closings or delays, the homepage has a section that allows you to enable an alert, write some text for it and include a link to more information (e.g. an Announcement that more fully describes the cancellation). When enabled, this alert will appear at the top of all homepage tabs. It will not expire automatically, so it will need to be manually disabled when it is no longer relevant by unchecking the Enable Alert box. Note that you can choose between General and Weather in order to change the graphical style of the alert. Homepage Slides 1. To create new homepage images, first create your image using the provided Photoshop template Save the image as 716px wide by 400px tall, PNG format. 2. Log into the admin and press Home Graphics in the left navigation. 3. Select the slide you wish to edit or press Add New to create a new one. 4. In the title area, type a description for this slide. 5. In the right sidebar, find Add Featured Image. 6. Upload your image created in step 1. 7. To link the slide to a page, scroll down to the Homepage Graphic Details area. Add your link in the appropriate field. If the slide directs to a different website, type the full URL (eg: http://www.google. com) otherwise, you can just add the relative path, starting with a slash (eg: /about) 8. Press Update or Publish to save. 9. To reorder pages, view the Home Graphic list view and drag and drop to change the order. Quick Links 10. While logged into the admin, find the Homepage page and scroll down to the Quick Links Component area. 11. Type the title of your Quick Links area in the Quick Links Title. 12. In the Quick Links area, list your quick links as a bulleted list, with links. You can use [permalink href= 99 ] in this area. The list will automatically split into three columns in the website. Get Started 13. While logged into the admin, find the Homepage page and scroll down to the Get Started area. 14. In the Get Started Links area, list your links as a bulleted list, with links. You can use [permalink href= 99 ] in this area. PAGE 4
SCHOOL NEWS School news is a showcase of articles with specific information about news items, events and profiles that have happened. These can be related to individual schools or the district. 1. To create a new news post, first select your featured or main image. This image should be 670px by 268px, saved as a 72 DPI JPEG. 2. Log into the admin and select School News and New. 3. Type the news article s title in the main title area. 4. The main content of the article can be added in the main content area. A custom excerpt can also be used by typing a shortened version of the article in the Excerpt area of the admin panel. 5. Upload your header image using the Set Featured Image link in the right sidebar. 6. In the right column, select the schools from the list of School Categories. 7. Press Publish to publish the article. ANNOUNCEMENTS (POSTS) Announcements can be created to give a daily address of information happening at the school or district. The most recent announcements will appear on each school s landing page. 1. Log into the admin and select Posts and New. 2. Type the announcement s title in the main title area. 3. The main content of the article can be added in the main content area. A custom excerpt can also be used by typing a shortened version of the article in the Excerpt area of the admin panel. 4. In the right column, select the schools from the list of Categories. 5. If you d like to add a header image, this can be added using the Set Featured Image link in the right sidebar. The size and format is the same as the standard header image. 6. Press Publish to publish the article. CALENDAR & EVENTS The district calendar is made of events entered into the website. Follow the instructions below to add events to the calendar. 1. Log into the admin and select Events and Add New in the left sidebar. 2. Type the title of your event in the title area. 3. Scroll down the page to the Event Details area. 4. Complete the applicable fields for this event. 5. On the right column, select the applicable schools for this event. 6. Press Publish or Update. ADMINISTERING SCHOOL PAGES All of the content in the Schools portion of the site is administered through Schools in the sidebar menu. The Schools are set up a little differently than standard pages: a School Page with no parent is considered a landing page, while a School Page with a parent is considered a content page. Thus, every content page must be given a Parent that corresponds to an existiing School. PAGE 5
EDITING A SCHOOL LANDING PAGE Important: Do not change the School Type settings on an existing school, such as School News Category, Announcement Category or Event School Category. Updating the main landing page photo 1. Use the provided Photoshop template to create an image that is 722px wide by 327px tall, JPG format. Note: the school s landing photo has a few special effects applied, so for consistency, try to use the provided template. 2. Log into the admin, choose Schools in the left sidebar and select the school s landing page where you will be making changes. 3. Changes to the main content area can be made in the primary content region in Wordpress. Use Heading 2 at the top of the page for an intro/title statement for this school. Editing basic school information 4. Scroll down to the School Details section. 5. To update the Grade Levels graphic, use the provided Photoshop template and export a transparent PNG that is exactly 170px by 72px. Upload this image with the Grade Levels button. 6. Add the school s address and contact info (phone, fax) in the appropriate fields. 7. Add the Principal, Assistant Principal and Counselor names in the appropriate areas. 8. There are two fields for school hours. The first is usually for class time (eg: Weekdays). The second could be used for office hours. Use <strong> tags around the hours to make them bold (eg: <strong>8:15 AM - 3:15 PM</strong>) To add school Quick Links in the right sidebar 9. Type your quick link title in the appropriate field (eg: Quick Links ). 10. In the content area, use a bulleted list of links that are relevant to this school. You may use the [permalink href= 50 ] shortcode. Emergency Alerts In cases of emergency school closings or delays, a school s landing page has a section allows you to add an alert, write some text for it and include a link to more information (e.g. an Announcement that more fully describes the cancellation). When enabled, this alert will appear at the top of all homepage tabs. It will not expire automatically, so it will need to be manually disabled when it is no longer relevant by unchecking the Enable Alert box. Note that you can choose between General and Weather in order to change the graphical style of the alert. Creating new schools Due to technical limitations, the valid top-level Schools need to be defined in the code and so Flying Hippo will need to be called if schools are added to the district in the future. ADDING WEBSITE ADMINISTRATORS FOR SCHOOLS Setting school page owners School pages can be edited by Site Administrators, District Administrator or a School Administrator. Each school page can only have one School Administrator, so it will probably need to be a shared account... managed by a Site Administrator. 1. First create the school administrator User (eg: highschool ). Note: This username can be whatever you d like, but it should make sense. The email address and name can be whatever you want, the email address doesn t even need to be an actual email address, but it can t be the same email that is used on another account. 2. Navigate to the school page in the admin. PAGE 6
3. Scroll down the page to the author dropdown. Set this page s author to the new user created. 4. Press Update to save. 5. This user can now log in and make changes to this school page. STAFF DIRECTORY Adding or changing staff person on the website All staff information can be added to the website and are stored in a common area called Directory. Each person can be associated with more than one school and grade level. 1. To create a new staff person, use the provided Photoshop format to create a headshot photo that is 228px wide by 266px tall, 72dpi and JPEG format. 2. Log into the admin and select Directory and New in the left sidebar. 3. Type the person s name in the title area. 4. Type the person s bio in the main content area. 5. Scroll down to the Listing Details area. Add the person s: First and last name Position/title Phone number Email Link to a secondary website or page that the teacher manages 6. In the right sidebar, add the person s photo (created in step 1) using Set Featured Image. 7. Now you ll want to connect a person to a school. In the right sidebar, under Connected schools press the Create Connections button. 8. The list contains all school pages, some of which might have the same name among schools. You will specifically be looking for a school name. Select the school s name from the list, or type the school s name into the input field. When the school appears, press the (+) plus to add it. 9. In the dropdown to the right of the school name, choose the grade. 10. To connect a person to more than one grade or school, continue creating connections. 11. Press Publish to save. Adding new directory category pages 12. A directory category is a way to drill down to different staff people based on silimarity (for example, all First Grade teachers at Madison can be represented together). Each directory category has an associated Page. In the School Pages area of the website, these are subpages of Staff. In the main district website s directory, these are subpages of Directory. New pages should be added as new categories are added. Creating a new School Directory page 13. To set up a new directory category page for a school, press School Pages and Add New. 14. Give the page the title of the category (eg: Administration). 15. In the right sidebar, under Parent, choose the school s staff page you are adding (eg: Madison Elementary/Staff). 16. Press the Save Draft button. 17. Scroll down the page to the School Details dropdown list and choose the grade associated with this page (ie: Administration). 18. If you d like to add a message or information above the list of staff for this page, type it in the main content area. 19. Press Publish or Update to save. This page will now be created under Staff and will list the associated staff in alphabetical order. PAGE 7
20. To reorder pages, you can drag and drop the staff subpages in the School Pages list view. Creating a new District Directory page 21. In the left sidebar, choose Pages and Add New. 22. Give the page the title of the category (eg: Administration). 23. In the right sidebar, under Parent, choose Staff Directory. 24. Press the Save Draft button. 25. Scroll down the page to the Listing Details dropdown list and choose the grade associated with this page (ie: Administration). 26. If you d like to add a message or information above the list of staff for this page, type it in the main content area. 27. Press Publish or Update to save. This page will now be created under Directory and will list the associated staff in alphabetical order. 28. To reorder pages, you can drag and drop the staff subpages in the School Pages list view. TESTIMONIALS Testimonials are short messages from parents, staff and community about how Pella Schools is a fun, safe and exciting school district. They randomly appear in the lower right corner on the homepage. 1. Log into the admin and choose Testimonials in the left sidebar. 2. Press Add New. 3. Type a descriptive name of the testimonial in the title area. 4. Type the full testimonial, it should be summarized not to exceed 25 words to keep the message short and interesting. This is also due to the layout of the homepage. 5. Scroll down the page to the Testimonial Details. 6. Type the person s name in the Attribution field. 7. Type the person s title (eg: parent ) in the Title field. 8. Press Publish or Update to save. SUPPORT After the site has launched, any changes or issues can be sent to support@flyinghippo.com where our team of technicians will respond as soon as possible with suggestions and solutions. PAGE 8