Creating Teacher Webpages on the New APS WordPress Site

Creating Teacher Webpages on the New APS WordPress Site

TABLE OF CONTENTS INTRODUCTION 3 THE EDITING DASHBOARD 4 CREATING A NEW PAGE 5 EDITING YOUR PAGE 6 1. Page Title 7 2. Toolbar/ toolbar icons 7 3. Add media using the media library 11 Inserting a Graphic 11 Linking to a PDF or Word document 13 Linking to a Google doc 14 4. Additional content 15 5. Publish box 16 MANAGING YOUR SIDEBAR MENU 17 CREATING AND MANAGING A BLOG 19 Arlington Public Schools 2

Introduction By default, a generic webpage is automatically generated for you by WordPress, linked from the Staff Directory. The data to create this page is pulled both from Synergy and Stars. At right is an example of a generic page. If you want to customize your page(s) to provide more information for students and parents, you will need to log into the website and create a page or pages. Once you have created at least one page, the Staff Directory will automatically link to the first page you create. Notice in the example below, the teacher has not only created an initial page but has created subpages that can be seen on the right sidebar. The first page you create becomes your "overview" page, and it will include the Stars/Synergy data (title, email, grades, classes) in the header and footer. Subpages will not include the header/footer data. Before you begin, use your credentials to log in using the OneLogin button on the top of the school website. Arlington Public Schools 3

The Editing Dashboard Once you are logged in, you will see the edit bar across the top of the page. Click on your site name to enter the Dashboard. The left sidebar of your Dashboard will have a list of menu choices. The right side of the Dashboard will vary depending on which menu item you select. Arlington Public Schools 4

The items in the menu include: Media the media library is where all your uploaded images, documents, etc., will be stored. The media library contains all images and documents that are currently uploaded to your school's site. At this time, you can search by file type, by keywords, or manually by scrolling through the library. Future updates include a way to organize files by user. Staff Pages Any pages you create will be listed here. Your first page will be the overview. All other pages will be automatically nested under your first page. Make sure to name your first (overview) page with the following convention: Last name, First Name Staff Posts - You can create posts to have your own blog. First you will create a "category" to name your blog. Then, every time you create a post, you will tag it with that category so that all the posts can be displayed in a group. You can then create a regular staff page and insert the blog feed by category into the page, and any blog posts with that category will show up on the main blog page. (More detail below) CREATING A NEW PAGE Select Add New from the Staff Pages menu. Or, click the Add New button. Be sure to enter Last Name, First Name in the title bar of your first page. Arlington Public Schools 5

Editing Your Page 3 1 5 2 6 4 1. Title Bar 2. Toolbar 3. Add media 4. Additional Content 5. Publish Box 6. Publish/Update button Arlington Public Schools 6

1. Page Title Make sure to name the page. This is the title that shows up on top of the page or in tabs on browsers. The Overview page should be named Lastname, Firstname. 2. Toolbar/ toolbar icons The first time you see the toolbar it will have only one row of icons. Click on the toolbar toggle icon to expand the toolbar. Format text Bold, Italic, Strikethrough List types Blockquote Bulleted List, Numbered List Indents the text and adds a line along the left hand margin to indicate that it is a quote Horizontal line Insert a line that is the width of the page Text Alignment Align left, center, align right Insert/edit link Select the text that you want to link, and click on the insert link icon. Paste the URL or email address in the box and click the arrow in the blue box to apply the formatting. You can also start typing the name of a page to search the list of your pages on the website. Arlington Public Schools 7

Remove link To remove a link, you can highlight the link and click on the broken chain icon Insert email link Click on this link to insert an email address. Fill in the field for the email address, and what you want the linked text to say, and then click Insert Email Link. Insert Anchor Link Use this to create an "anchor" on the page so you can link directly to that point. Click your cursor on the point of the page that is the target, click on the icon, and give it a unique name, i.e. "Homework." To link to that target, highlight the text you want to link, select the insert link icon and type #[name] in the link box, e.g. #Homework. Create a Google Calendar in your APS Google account and make sure you set it to Public. Open the calendar settings. On the Calendar details page, scroll down to Calendar Address and copy the Calendar ID. Insert Google Calendar In WordPress, paste that ID into the window that pops up when you click on the Insert Google Calendar icon. You will only see code on the page, but the calendar will show up on the live page. Insert Twitter feed Add your Twitter ID without the @ symbol in the pop-up window that appears when you click on the icon. You can control the number of tweets that will show up. You will only see code on the page, but the Tweets will show up on the live page. Arlington Public Schools 8

Insert WordPress Calendar This icon allows you to display a category from the official school calendar on your page. Click the icon and then choose a category from the drop-down list. You will only see code on the page, but the calendar will show up on the live page. To insert a blog feed into your page, fill in the fields in the popup window. You must have created at least one post category to use this feature. Insert Dynamic Blogpost List Post Type select Staff Post Taxonomy Type select staff_posts_category Category Type select the category you assigned to the posts you want displayed. You can also select how many posts you want displayed and the format of the text. You will only see code on the page, but the posts will show up on the live page. Arlington Public Schools 9

Open Sans is the standard font for the website, and is used throughout. You do not have the capability to change the font. To change the size of your text, us the Headings in the Styles list. The only text color option that you have is Red Text. Text Formatting Justify text Use Justify Text to adjust letter and word spacing so that the text falls flush with both margins. Paste as Text/ Clear Formatting Paste anything in as plain text (will not preserve links or images). Clear formatting on text. Insert any of the following characters: Special Character Decrease/ Increase Indent Indent or "outdent" paragraphs in to the left at a distance at intervals of 30 px. This will only indent the left edge. If you use this feature with a bulleted list, it will only move the text and not the bullets. Arlington Public Schools 10

Undo/Redo Undo and redo typing and formatting changes with these buttons. Use this feature if you prefer keyboard commands. Keyboard Shortcuts 3. Add media using the media library You can add graphics and link to pdfs or Word documents using the Media Library Inserting a Graphic 1. Put the cursor at the point on the screen where you want to add the image. 2. Click on the Add Media button. 3. Click on the Upload Files tab. Arlington Public Schools 11

4. Upload your image from your computer (or select an image from the Media Library). Make sure the image you want is selected (it will have a checkmark in the blue box on the upper right). In the Attachment detail box on the right, assign information for the following: Title Give your image a title Alt Text Add a brief description of the image. This is required to comply with ADA regulations for users with limited vision that use a text-tovoice program to access the website. Size Choices are Thumbnail (will crop the image to a square), Medium or Full size. 5. Click on Insert into Page in the bottom right hand corner. Your image will now be on the page. Arlington Public Schools 12

6. You can change the alignment of your image by clicking on the image and using the popup menu. You can also select the pencil icon to edit any previously entered information. In this editing screen, you can also enter a custom size for your image, or use the "Link To:" option to link your image to a URL. If you just want to make your picture smaller, grab one of the corners and drag to resize. Linking to a PDF or Word document 1. Put the cursor at the point on the page where you want to add the file. 2. Click on the Add Media button. 3. Select the Upload Files tab 4. Upload the file that you want link to. Make sure the file you want is selected (it will have a checkmark in the blue box on the upper right). In the Title box, enter the text that you want to see hyperlinked on the page. Arlington Public Schools 13

7. Click on Insert into Page in the bottom right hand corner. 8. The title you inserted will now show up hyperlinked on your page. Linking to a Google doc 1. Create your document in Google. 2. Find the Share button. 3. Click on get shareable link in the upper right hand corner of the popup. 4. Make sure the link setting allows users to view your document. Do not make set the status to can edit or is owner. 5. Copy the link by clicking on Copy Link. 6. In WordPress, on your staff page put your cursor where you want to add the link and type in the title of the document, and highlight it. 7. Click on the insert link icon and past the URL of your Google doc in the box and click the arrow in the blue box to apply the formatting. (see insert/edit link, above) Insert Link Arlington Public Schools 14

4. Additional content When you click on the Add Content button, you will get a popup asking if you want to insert text or a Twitter Feed. If you select Text, you will get a text editing screen like the one in the main part of the page. If you select Twitter, you will be prompted to insert your Twitter Feed (without the @ sign). You can add a Text box and then a twitter box as well. These elements will show up in a right "sidebar" between the main page content and the Tools & Resources menu. Arlington Public Schools 15

5. Publish box This is what the Publish box looks like on a brand new staff page: a c a. Save Draft/Preview - You can save your page without publishing it if you still working on it. Click on Save Draft. If you want to see how the page will look before you Publish, click on Preview. b. Status - On an unpublished page, the status is draft or pending review. On a published page, Published is added to the drop down menu. If you wish to hide a page that you created, you can change the status to Draft. c. Publish immediately - You can choose to publish as soon as you are done with your page or you can schedule to publish your page later. If you choose to publish later, the Publish/Update button will change to Scheduled. d. Make Overview Page - The first page you create is automatically your overview page. If you later create a second page, and want to make it your overview, you can click this box. e. Publish/Update - When you are ready to make your page visible to the world click on Publish. If you need to make changes later, the button will say Update. Arlington Public Schools 16

MANAGING YOUR SIDEBAR MENU To add items to your right-side menu under Tools & Resources, select My Menu under Staff Pages in the dashboard. 1. Click on Add Page 2. Select the page you want to add from the drop-down list of pages you've created. NOTE: Your overview page is automatically the first link in your menu, and does not have to be added here. Do not choose to add your overview page again or it will be listed twice. Arlington Public Schools 17

3. You can also add a custom link by selecting Add Link. Give your link a title and paste in the URL for the target page. 4. You can keep adding as many pages or links as needed. Then click and drag each box up or down to make sure the pages are in the order you want in the menu. Make sure to hit submit to save your changes. Arlington Public Schools 18

CREATING AND MANAGING A BLOG Create a Category In the Dashboard, under Staff Posts, click on Staff Post Category. Enter a name for your blog (like "Algebra Homework") and click Add New Item. You can create more categories, if you want to have more than one blog. Then: Arlington Public Schools 19

Create Posts Under Staff Posts, click on Add New, either in the left menu or at the top of the window. 1. Give your post a title. 1 2 4 3 2. Add content to your post. This functions exactly the same as editing a page, above. 3. IMPORTANT: You MUST tag your post with a category, on the right side. You will see the category(ies) you created earlier; simply click the appropriate box. 4. Click the Publish button. Arlington Public Schools 20

Create a Blog Page 1. Under Staff Pages, click on Add New, either in the left menu or at the top of the window. 2. Give your page a title (like "Algebra Homework"). 3. Place your cursor in the editing area, and click on the "Insert Dynamic Post List" icon. 4. In the window that pops up, select from the drop-downs: a. Post Type select Staff Posts b. Format you can choose varying formats. Collapse is a popular one. c. Number of Posts "-1" will show all, or you can choose to show a limited number of the most recent posts. d. Taxonomy Type (do this before Category Type) select staff_posts_category e. Category Type select the category you assigned to the posts you want displayed. 5. Click Insert Show Posts Shortcode. You will only see code on the page, but the posts will show up on the live page. Arlington Public Schools 21

Add your new blog page to your menu Click on My Menu under Staff Pages. 1. Click on Add Page (NOT Add Blog Category). 2. Select the blog page you just created from the drop-down list of pages. 3. Drag and drop to order the menu as you want. Don't forget to click Submit to save your changes. Arlington Public Schools 22