WORDPRESS USER GUIDE HWDSB Websites

Transcription

1 WORDPRESS USER GUIDE HWDSB Websites

2 Table of Contents Forward - About Wordpress Getting Started ) Log into your account ) About the Dashboard ) Internal vs. External Views ) Open the External View ) Internal View ) Screen Options ) External View Posting to your Wordpress Site ) Create a Post ) Edit a Post ) Delete a Post ) Add Video with Video Category ) Add Categories from Posts ) Add Categories from Categories Subpanel ) Manage Existing Categories ) Delete a Category Creating Pages on your Site ) Create a Page ) Create a Subpage ) Edit a Page or Subpage ) Delete a Page ) Reorder Pages Using Media on your Site ) Add an Image ) Edit an Image ) Delete an Image ) Add a Document ) Edit a Document ) Delete a Document ) Re-add a file after Deleting ) Delete Files Permanently ) Media Library - Manage all Files ) Media Library - Add Media ) Media Library - Edit Media ) Media Library - Edit a PDF ) Media Library - Delete Media Permanently Using Links on your Site ) Create Links for Website ) Edit Links for Website ) Delete Links for Website ) Create Links in Posts or Pages ) Edit Links in Posts or Pages ) Unlink (delete) a Link ) Create a Mail Link ) Edit a Mail Link ) Unlink (delete) a Mail Link Comments ) Allow Comments on a Page ) Moderate a Comment Managing Users ) Add a User ) Delete a User ) Changing Your Password

3 Forward About Wordpress WordPress was born out of a desire for an elegant, well-architecture personal publishing system built on PHP and MySQL and licensed under the GPL. WordPress is fresh software, but its roots and development go back to It is a mature and stable product. We hope by focusing on user experience and web standards we can create a tool different from anything else out there. For a bit more about WordPress' history check out the WordPress Wikipedia page or this page on our own Codex. What is WordPress? WordPress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability. More simply, WordPress is what you use when you want to work with simple software. What if I am stuck, what should I do? There are various online resources you can use by simply Goggling your issue. Listed below are some of the helpful sites we have used. You can always ask the webmaster for help. However, there may be times where he/she is not available. There are thousands of users who contribute to the online support forum (link below)

4 Chapter 1 Getting Started 4

5 1) Getting started 1.1) Logging into your account Open a web browser (i.e. Mozilla Firefox, Explorer, etc.) and navigate to the administrative web address distributed to you via (Figure 1.0). Example: Note: when added as a site administrator, the address will be provided to you in an as a link with your password. Figure 1.0 Type in your Username and Password (for security purposes, do not select the Remember Me checkbox (see Figure 1.1)). You will be taken to the site Dashboard (Figure 1.2). Figure 1.1 ***School addresses are located at name)/wp-admin*** 5

6 1.2) About the Dashboard The Dashboard (Figure 1.2) tells you about recent activity on your site and provides you with the tools necessary to build, moderate, and manage your site. The Dashboard Subpanel (Figure 1.2 #1) provides you with a number of links to start writing Posts (Figure 1.2 #2), Pages (Figure 1.2 #3), and a Right Now (Figure 1.2 #4) view of the most recent number of Posts, Pages and Categories. A Recent Comments box shows the number of Comments awaiting moderation and a list of the recent comments (Figure 1.2 #5). Figure 1.2 6

7 1.3) Internal vs. External Views Before beginning, it is best to familiarize yourself with the internal (your administrative view) and external (the public website itself) interfaces of your Wordpress site. Always have both views (internal and external) open when working on your site. 1.4) Open the External View Your website name is located on the top left corner of your Dashboard. Right click on the website name to open a browser menu. Choose Open Link in a New Tab. Figure 1.3 Note: if your browser does not have the New Tab option, then choose Open in New Window the window will then be accessible from the toolbar at the top of your screen. Two tabs (or windows) will now be open, the internal Dashboard view and external website view (Figure 1.4). Figure 1.4 Click the tabs to alternate between the internal and external views. By having the two views open, you will be able to see what you are doing to the external website as you work within the Dashboard of the site. Note: click Refresh (Firefox) / (Explorer) to see changes. 7

8 1.5) Internal View (Dashboard) As mentioned, the internal view of the site is called the Dashboard (Figure 1.5). The tools found here directly correspond with and affect the external view of the site. Primarily, you will be concerned with Posts (see Figure 1.5 #2) and Pages (Figure 1.5 #3). Figure 1.5 8

9 1.6) Screen Options Each section has a Screen Options menu located on the top right of your screen (Figure 1.6). These options allow you to customize your screen. As an example, we will change our Dashboard appearance. This can be done for all screens such as Posts, Media and Pages etc. Currently our Dashboard has two columns and many subpanels that we don t need. We want our Dashboard to Figure 1.6 have only one column and only subpanels we need. Step 1: Click on Screen Options on the top right corner (Figure 1.7). Figure 1.7 Step 2: When the screen option menu appears, uncheck the following items: Incoming Links, Plugins, Wordpress Development Blog and Other Wordpress News. Figure 1.8 Step 3: In Screen Layout, select Number of Columns to be 1 (Figure 1.8 Step 3). 9

10 Step 4: Click on Screen Options (Figure 1.8 Step 4) once again to close this menu. Note: You can also drag subpanels up, down and sideways. Example, you can move Quick Press above Right Now subpanel. This is optional step. Your Dashboard is now set (Figure 1.9) and will always look like this when you login. We recommend setting the screen options for each section for better efficiency. Figure

11 1.7) External View Posts (Figure 1.10 #2) will appear externally on the home page of your site. Pages (Figure 1.10 # 3) exist within the site itself and also appear at the top of the page as header links for accessibility. Figure

12 Chapter 2 Posting to your Wordpress Site 12

13 2) Posting to your Wordpress Site Figure 2.0 Posts are only used on the homepage to post recent news, events and important information. When posting to your site, you will do so by category. Posting with three categories is discussed below. New categories can be added when needed. Categories Posts are created for your site by category. When you first receive your site, the following categories come premade and prepared. News Used to post news in the middle of the homepage Video Used to post a YouTube video on the right side of the homepage Rightbar Used to post important items on the right side of the homepage under the video (if one exists). News (Category = News ) Note: Your homepage template may not have three columns therefore you will not see the Rightbar or Video category. The News section comprises the central content of the site s homepage. Visitors will first see this information on your website. This is where you will post important news items and information that is relevant to student, parents, and the community. Figure 2.1 By default (and so as to not overwhelm the visitor), five News & Information stories appear on the home page. More stories can be accessed by clicking the Next Page link at the bottom of the page (Figure 2.2) and / or by clicking the News category link to the left of the screen (Figure 2.1). Figure

14 2.1) Create a Post News posts are posted to your site in Blog-like fashion. This means that the most recent posts go on the top. Figure 2.3 To post a new News item, go to your Dashboard and click the Add New (Figure 2.3) link under the Posts subpanel. The Editor Window will open (Figure 2.4). Figure 2.4 Step 1: Add the title. Step 2: Type your message. Pasting from Microsoft Word: If you are pasting your text from Microsoft Word, click this icon on the formatting toolbar (Figure 2.5). Paste your text from the Word document into the window that opens and click Insert. This will remove any formatting from Microsoft Word that is not compatible with the internet coding. Figure 2.5 Step 3: Format the text as desired (i.e. add bold, italics, lists, etc.). Figure 2.6 Step 4: Be sure that the News category is checked. Note: If you do not select a category, the News category will be selected by default. Step 5: Click Publish. Step 6: Click the tab to view the site externally. 14

15 2.2) Edit a Post Internal View To edit a post, Click Posts on the Dashboard subpanel located to the left of the screen. Figure 2.7 Once clicked a list of posts will appear (Figure 2.7). Locate the Post you wish to edit. Place your cursor over the title of the post and a quick link bar will open, click Edit (Figure 2.7). Clicking Edit will open Editor Window like the one below (Figure 2.8). Figure 2.8 Step 1: Edit the title (if necessary). Step 2: Type your message. Note: see page 14 Step 2 if inserting text from Microsoft Word. Step 3: Format the text as desired (i.e. add bold, italics, lists, etc.). Step 4: Be sure that the News category is checked. Note: If you do not select a category, the News category will be selected by default. Step 5: Click Update. Step 6: Click the tab to view the site externally (Figure 2.9). Figure

16 2.3) Delete a Post Deleting a post is very simple in Wordpress. Step 1: Hover over the post you wish to delete under the Post subpanel and click on delete (Figure 2.10). Figure 2.10 Step 2: Click on Trash and your post will be moved to the trash bin. You will now see an extra sub menu near the top of the page with a Trash button indicated by a number stating how many posts are in the trash bin. Figure 2.11 Step 3: Click on the Trash Button (Figure 2.11). Note: This step is optional and only done if you want to permanently delete the post from Wordpress. The trash bin provides an added security in case a post was deleted by accident. Step 4: The Trash bin will show you the post that you recently deleted along with others you may have. Currently, we have one post (Figure 2.12) which can be restored to its previous state or deleted permanently. Multiple posts can also be deleted by clicking on Empty Trash (Figure 2.12 #2). Figure 2.12 Note: Clicking the Delete Permanently button will not ask for a prompt and will delete the post. 16

17 2.4) Add Video with Video Category You can add videos to the home page by using the video category. This is a great way to showcase news, programs, and other school or student related items. Please note that this is an optional item. Note: Videos cannot be added to the homepage if the homepage template has two columns. To add the video, Click Add New under the Posts submenu located to the left of the screen (Figure 2.13). Step 1: Choose an appropriate title for the video. Step 2: Go to and locate a video you wish to showcase on your homepage. Figure 2.13 When the YouTube video plays, locate address bar in your browser (Figure 2.14) and find the code needed to place this exact video on your site (Figure 2.15). Figure 2.14 Select the code after the v= (Figure 2.15) and copy it (Ctrl + C), Figure 2.15 Step 3: Go back to your WordPress Admin area and paste (Ctrl + V) i.e. Z1R1tPFLGXo into your editor section (Figure 2.16 Step 2) Figure 2.16 Step 4: Select the Video Category. Step 5: Click Publish. Step 6: Click the tab to view the site externally. View the video on your home page (Figure 2.17). If you wish to change the video in the future, simply use the instructions on page 17 for YouTube instructions. 17

18 Figure

19 2.5) Adding Categories from Posts Using Categories is the best way to organize posts and group them by topic! If there is an item that is recurring in your office/department, you may wish to assign a category to it. Categories are a way of grouping related posts together. A post can belong to multiple categories, and categories can be organized into a hierarchy. Adding your own categories is easy. There are two ways of doing this. If you are adding or editing a post, you can add a category while adding/editing content. Step 1: Add/Edit title (We are going to add a new post in this example). Step 2: Add content. Step 3: Under the + Add New Category on the right side, type in a new category and click on Add New Category button (Figure 2.20 Step 3). Figure

20 Step 4: After adding the category, you will see your newly created category. In our example, we created a new category called Events (Figure 2.21 Step 4). Note: When you create a category, it is automatically selected by default. Figure 2.21 Step 5: Click on Publish. You can view this in external view (Figure 2.22). You will see that the Events category was added to the Categories menu on the left. You will also see the category name under the Filed under section below your newly created post. Figure

21 2.6) Add Categories from Categories Subpanel You can add/edit all your categories from the Categories dashboard page. Click on the Posts > Categories menu (Figure 2.23). Clicking on Categories will show you your current categories (Figure 2.24 #2) and the ability to add new categories (Figure 2.24 #1). Figure 2.23 Figure 2.24 You can add a new category by filling out the fields: Step 1: Fill out the name of your category. Step 2: A web friendly version of the category name is called a slug. Use lower case and call it the same as your Name. Note: If you want to create hierarchical categories then select the parent category under the Parent dropdown, otherwise leave as None. EXAMPLE: You could have a general category called Athletics News. Under that, you could have sub-categories, i.e. Soccer, Football, Basketball, etc. Description: Describe what the category is for. Step 3: Click Add New Category to add the new details to the list. 21

22 2.7) Manage Existing Categories The list of categories will show you the name, description, and number of posts belonging to each category. Hover over a category name to display a quick menu which will allow you to edit, quick-edit, or delete that category (Figure 2.25). Figure 2.25 If you click on Quick Edit, the category will change into an edit box which will allow you to quickly edit its properties (Figure 2.26). Figure 2.26 If you click on Edit you will taken to a separate page where you can edit the name, slug, parent, and description. This method is exactly the same as when adding a category on page

23 2.8) Delete a Category Clicking on Delete will delete that category. You will see a confirmation screen (Figure 2.27) Figure 2.27 When a category is deleted, all posts that were in that category will be assigned to the default category ( News ). Posts belonging to multiple categories will only have the deleted category removed from it. Note: You cannot delete the default category. 23

24 Chapter 3 Creating Pages on your Wordpress Site 24

25 3) Creating Pages on your Wordpress Site Pages in a nutshell The Header Links located across the top of the page below the banner are links to Pages within the website. When a new webpage is created, a new link is automatically generated in this area. Figure 3.0 What Pages Are: Pages are for content that is less time-dependent than Posts. Pages can be organized into pages and subpages. What Pages Are Not: Pages are not Posts, nor are they excerpted from larger works of fiction. They do not cycle through your blog's main page. Pages cannot be associated with Categories and cannot be assigned Tags. The organizational structure for Pages comes only from their hierarchical interrelationships, and not from Categories. Pages are not files. They are stored in your database just like Posts are. Figure 3.1 When a button along the top is selected you will see the page button highlighted (Figure 3.1 #1). Note: You will see the Edit button (Figure 3.1 #2) at the bottom. This only occurs when you are logged into the system. This allows for quick editing of a page. Users who are not logged into the system will not see this button. 25

26 3.1) Create a Page To create a new page, go to your Dashboard and click the Add New link under the Pages subpanel (Figure 3.2). Figure 3.2 The Editor window will open. In this example, let s create a page called Programs. In addition, we will create subpages for organizing and separating various topics. Step 1: Create a title for the page (Figure 3.3). Note: this will appear under the banner as a Header Link make the title clean and concise. Step 2: Type your page content. Figure 3.3 Note: If you are pasting your text from Microsoft Word, click this icon (Figure 3.4) on the formatting toolbar. Paste your text from the Word document into the window that opens and click Insert. This will remove any formatting from Microsoft Word that is not compatible with the internet coding. Step 3: Format the text as desired (i.e. bold, italics, lists, etc ). Step 4: Be sure that Parent (no parent) is selected under the attributes area. Step 5: Click Publish. Figure

27 Step 6: Click on the external tab to view what the page looks like (Figure 3.5). Figure

28 3.2) Create a Subpage Often, it will be necessary to break your sections into a variety of subpages. This will provide organization and focus. It will also provide your user with a quick indication of where they can find the information they need. In our example, we have created a Programs page. Now, let s create some subpages for it. Note: subpages are best considered as children to a parent (or main) page. To create a new subpage, go to your Dashboard and click the Add New link under the Pages subpanel. The Editor window will open. In this example, we will create a subpage called French Immersion. Figure 3.6 Step 1: Create a title for the page Note: this will appear as a link under the page menu. Make the title clean and concise. For this example, French Immersion will be added as a subpage. Step 2: Type your page content Note: see page 14 Step 2 if inserting text from Microsoft Word / See page 35 if adding images / see page 60 if adding an link) Step 3: Format the text as desired (i.e. add bold, italics, lists, etc.) Step 4: Be sure that the Parent Page (in this case, Programs) is selected (VERY IMPORTANT this will ensure that your page is added under the main parent page) (Figure 3.6 Step 4). Step 5: Click Publish (Figure 3.6 Step 5). 28

29 Step 6: Click on the external tab to view what the page looks like (Figure 3.7). Notice when you click on Programs there is a menu called programs on the left. This menu will contain all subpages (or children) that belong to the page Programs. Figure 3.7 Repeat the process to add more subpages. The subpages will all populate (in alphabetical order) in the Menu bar located to the left of the screen. This Menu bar will populate on every subsequent page created automatically. The use of subpages will allow you to organize each page and section of your website and facilitate ease of use for your students, their teachers, and the community. Note: Subpages can also have their own subpages. To do this simply, select the subpage you wish to put a subpage under. When creating subpages of a subpage, keep in mind not to go too deep as users of your website will not be happy clicking too many items in a subpage menu. HINT: When preparing your site, create all pages and subpages first without creating content. The content can be created after the pages are set. 29

30 3.3) Edit a Page or Subpage Editing a page or subpage requires the same process as editing a post. To edit a page, go to your Dashboard and click the Pages subpanel. Doing this will show you your current pages. Hover over the page you wish to edit and click on edit button (Figure 3.8). Figure 3.8 Step 1: Update your title (Figure 3.9 Step 1). Step 2: Edit your content. Step 3: Format the text as desired (i.e. add bold, italics, lists, etc.). Step 4: In our example, we have chosen to edit a subpage. Under the Page Attributes subpanel, you can leave this option as it is or place this subpage under another parent page by selecting it in the menu. We are going to leave this option as it is. Note: You can also change this page to be a main page (parent page). This will place this page on the header menu as a main page. Step 5: Click on Update once you are finished with your editing. Figure 3.9 Step 6: Click on the external tab to view what the page looks like (Figure 3.10). Figure

31 3.4) Delete a Page Deleting a page is very simple in Wordpress. Figure 3.11 Step 1: Hover over the page you wish to delete under the Pages subpanel and click on Trash (Figure 3.11). Step 2: Click on Trash and your page will be moved to the trash bin. You will now see an extra sub menu near the top of the page with a Trash button indicated by a number stating how many pages are in the trash bin (Figure 3.12). Figure 3.12 Step 3: Click on the Trash Button (Figure 3.13 #1). Note: This step is optional and only done if you want to permanently delete the file from Wordpress. The trash bin provides an added security in case a page was deleted by accident. Figure 3.13 Step 4: The Trash bin will show you the page that you recently deleted along with others you may have. Currently, we have one file which can be restored to its previous state or can be permanently deleted. Multiple pages can also be deleted by clicking on Empty Trash (Figure 3.13 #3). Note: Clicking the Delete Permanently button will not ask for a prompt and will delete the page. 31

32 3.5) Reorder Pages (Header Links) Figure 3.14 If you do not like the order of your Header Links, do the following to reorder them. Figure 3.15 Step 1: Go to your Dashboard, select the pages subpanel and click My Page Order (Figure 3.15). The Editor window will open. Step 2: Click and drag the page bars to the placement you prefer (Figure 3.16). Figure 3.16 Figure 3.17 Step 3: Click to accept and save the changes. Step 4: Click the external tab to view your changes (Figure 3.18). Figure

33 Chapter 4 Using Media on your Site 33

34 4) Using Media on your Site There are many items you can add to your website and Wordpress provides multiple ways of adding items to the system. One method is through the posts/pages and the other through the Media subpanel on the left. Some supported file types include: Images: jpg, jpeg, gif, bmp, png Documents: pdf, doc, xls, pub 4.1) Add an Image In this example, we will add an image by using the editor in a post or page. Posting pdfs, publisher and word formats will be covered on page 42. In the WordPress editor, position your cursor where you'd like to insert an image. Click the Add Media icon above the editor toolbar (Figure 4.0). Figure 4.0 Step 1: To add an image to your post, place the cursor where you would like the image to appear add click the Media icon from the Add Media toolbar. You will see a new window overlay (Figure 4.1) Step 2: Select the image from computer or drag and drop your picture from your computer. Click Select Files, then locate your image and click Open. Figure

35 Note: Media Library archives all images uploaded to the website. This tab will allow you to choose an archived image uploaded earlier. See section titled Media Library for more information on page 48. Once uploaded to your website, a thumbnail of your image will appear on the top left hand corner. Note: Clicking the Edit Image button (Figure 4.2) will give you advanced image editing options such as crop, flip and scale. See section titled Media Library Edit Media on page 49. You are now able to edit the Title, Alternate Text, Caption, Description, Link URL, Alignment and Size. You can also edit the image by clicking the Edit Image Button (Figure 4.2). Step 3: Alter the title if wish. Step 4: Alternate text area provides a different text when someone hovers over your image. Step 5: Provide a description of the image. Step 6: Align the image left, right, center or leave it as it is. Step 7: You can set your image to be a thumbnail or choose from 3 other sizes (Figure 4.2 Step 7). Figure 4.2 Step 8: Click Insert into Post once you are done editing your image information. 35

36 Step 9: Click the tab to view the site externally (Figure 4.3). Figure

37 4.2) Edit an Image Step 1: Go back to your editor in WordPress. You should still have this open when you published your post. Step 2: In the editor, click on the image and two icons will hover over it. Clicking the Edit Image icon (Figure 4.4, #1) will take you to the image editor window. Click the Delete Image icon (Figure 4.4, #2) will remove the image from your post. Figure

38 Step 3: If we select the Edit Image icon (Figure 4.4, #1), we get a screen where we can edit various properties about the image. Scrolling over the Size property (Figure 4.5 #2) will give you a preview of how the image will look in the paragraph. You can change this down to 60% of the size. Advanced Settings tab (Figure 4.5 #4) is also located here however we will not cover it in this guide. Figure 4.5 Step 4: The remaining settings are similar to Add an Image on page 35. In this example, we will change the Alignment to be on the right (Figure 4.5 #3). Figure 4.6 Step 5: Once you have completed your edits, you can click on Update (Figure 4.5 #5). This will take you to the editor window screen where you will have to click on Update in the Publish panel to update the post (Figure 4.6). 38

39 Step 6: You can now check you external tab or window to see the change (Figure 4.7). Figure

40 4.3) Delete an Image Step 1: Click on the post that has the image you want to delete. Step 2: In the editor window, hover over the image that you want to delete and click on Delete Image Icon (Figure 4.8 #1). This will remove the image from your post. Figure 4.8 Note: This will not delete the image from the system. You can add the image again from the editor window. See page 47 titled Re-add a File after Deleting. 40

41 4.4) Add a Document Step 1: In the editor window place you cursor where you wish to insert your file (Figure 4.9) and click on the Add Media icon. In this example we will insert a PDF file. Figure 4.9 Step 2: If the file is on your computer then select From Computer (Figure 4.10 #1). If you have previously uploaded this file in this post, then select Media Library (Figure 4.0 #2). In this example we will insert a file that is located on our computer. Click on Select Files (Figure 4.10#4) and browse for the file on your computer, or drag and drop the file into the dotted box. Figure

42 Step 3: We have selected a file called phone-instructions.pdf (Figure 4.11) with options to enter Title, Caption, Description and Link URL. We generally do not need to change much on this screen. We recommend changing the Title and adding a Description. Once you have completed your edits, click on Insert into Post (Figure 4.11 #3). Figure 4.11 Step 4: After inserting the PDF into the post, you will see a link (in blue) linking to the PDF document with the title that was entered (Figure 4.12). Figure 4.12 Step 5: Click on Update (if you are updating a post or publish if you are creating a new post). Step 6: Click on the external tab to view what the post looks like. We recommend that you always open PDF files in an external window (see page 58 Edit Links in Posts or Pages ). Figure

43 4.5) Edit a Document Wordpress does not have the capabilities of editing content inside of documents. You will have to do this in the application that the file was created in. Wordpress does allow you to edit the link for file that was created previously. Step 1: Go back to your editor and click anywhere on the link (blue phone instructions link (Figure 4.14).). Figure 4.14 Step 2: Click on the unlink icon to unlink the file from word. You can now also delete the word (phone instructions) or title (Figure 4.15). Step 3: In the editor window, click on Add Media (Figure 4.15) and go to the Media Library Tab (Figure 4.16). The Media Library will have your archived documents that were uploaded earlier. Figure 4.15 Figure 4.16 Step 4: Select the file you wish to edit by selecting Show. Complete the necessary edits and click on Insert into Post (Figure 4.17). Figure 4.17 Step 4: Click Update or Publish. Figure 4.18 Step 5: Click on the external tab to view what the post looks like (Figure 4.18). 43

44 4.6) Delete a Document Step 1: Go back to your editor and click anywhere on the link (blue phone instructions link.). Figure 4.19 Step 2: Click on the unlink icon to unlink the file from the word. You can now also delete the word (phone documentation) or title. Note: This will not delete the file from the system. This only removes the link to the file from you page or post. If you wish to delete the file from the website, follow instructions below titled Delete the File permanently on page

45 4.7) Re-add a File after Deleting Step 1: In the editor window click on add media icons. If inserting an image go to the Gallery tab (Figure 4.20 #1). Gallery has all the images that were uploaded previously for this particular post. Go to Media Library tab if a document needs to be inserted (Figure 4.20 #3). Figure 4.20 Step 2: You will see the image or document you deleted earlier. Click on Show (Figure 4.20 #2) for the image you want to insert. Do your necessary edits to the image and click on Insert into Post. Figure 4.21 Step 3: Click on Update in the Publish panel (Figure 4.21). Step 4: Click on the external tab to view what the post looks like. 45

46 4.8) Delete Files Permanently Files can be permanently deleted from within your post or page if they are no longer need on the website. Step 1: In the editor window, click on Add Media and go to the Gallery tab (if you are deleting an image) or Media Library (if you are deleting a document.) (Figure 4.22 #1). Figure 4.22 Step 2: Select the image or document you want to delete. Click on Show (Figure 4.22 #2) and select Delete near the bottom (Figure 4.23). Figure 4.23 Step 3: You will now get a confirmation below the delete button. Select Continue to delete or Cancel to leave the image or document on the system. Figure

47 4.9) Media Library - Manage All Files The Media Library allows you to edit, view, and delete media previously uploaded to your blog. Multiple media objects can be selected for deletion. Search and filtering ability is also provided to allow you to find the desired media. Figure ) Media Library - Add Media The Media Library allows you to add images to the entire website to be used at a later time. This process is similar to ones covered earlier. Click on Add New and follow instructions on page 35 or page 42. One notable difference will be the button at the bottom. You will see Save Changes instead of Insert into Post. Adding the media will then be saved in the Media Library to be used at a later time. 47

48 4.11) Media Library - Edit Media Media Library allows you to edit your uploaded files. You will get different options depending on the type of file you choose to edit. Example: Let s edit an image. Click on Media submenu on the left. A window with all files that belong to your website will be presented here. Add new files by clicking on Add New (Figure 4.26 #1). Brief summary of the types of files your site currently has (Figure 4.26 #2) are shown here. Hovering over the item will display a quick menu with options to edit, delete and view the file (Figure 4.26 #3). The Media Library also displays which post or page this media file is attached to (Figure 4.26 #4). Step 1: Hover over the image you wish to edit and click Edit on the quick links menu. Figure 4.26 Figure 4.27 Step 2: You will be presented with an edit screen where you can edit Title, Alternate Text and other options. Click on Edit Image under the image thumbnail. 48

49 Step 3: You will now be presented with various image editing options (Figure 4.28). This image can be cropped (use this tool by selecting it and hovering of your image), rotated and flipped (Figure 4.28 #1). You can also scale and crop the image using your own image (width, height) dimensions (Figure 4.28 #2). The Thumbnail Settings (Figure 4.28 #3) can be cropped differently. For example, a thumbnail can be square or contain only a portion of the original image to showcase it better. Alteration of the Title and Alternate Title can be done here as well (Figure 4.28 # 4). Figure 4.28 Step 4: Click on Update Media. This will update the image on post(s) or page(s) across the site. Step 5: In external view, go to the post that has this image and view your changes. Note: Editing an image such as cropping etc can also be done when you upload your image. You can also edit the image when you are editing your post. Example: Edit other documents: 49

50 4.12) Edit a PDF Let s now edit a PDF file. This procedure will be the same for other document files. Figure 4.29 Step 1: Hover over the file you wish to edit and click Edit on the quick links menu (Figure 4.29 #3). Step 2: You will be presented with an edit screen where you can edit Title, Caption and Description (Figure 4.30). Figure 4.30 Step 3: Update the necessary and click on Update Media. This will affect the file across the entire website. 50

51 4.13) Media Library Delete Media Permanently Media Library can permanently delete files from you website. We recommend that you do a monthly housekeeping of all media on the website. Delete files that you may not need or are not using in a post or page. Step 1: Hover of the file you wish to delete. Doing this will present a quick link menu (Figure 4.30). Figure 4.30 Step 2: You will be presented with a confirmation screen (Figure 4.31). Figure 4.31 Step 3: Click OK to delete the image or Cancel to leave the file on your website. Note: If you delete the file, it is deleted permanently. You will need to upload it again to use it on a post or page. When you delete the file from the Media Library, the link to the media file will still be present on post or page it resided in. This is an issue in Wordpress. You will need to delete the media file link from within the post or page it resided in (see page 45). 51

52 Chapter 5 Using Links on your Site 52

53 5) Using Links on you Site The Wordpress Template can place universal links that display on the entire website. These are strategically placed on the left side on every page to allow quick links to internal pages on your website or external links to other websites. Posts and pages can also have their own links. We will cover how to create both universal and individual links. 5.1) Create Links for Website To get started, click on the Links subpanel (Figure 5.0). Figure 5.0 Step 1: Click on Add New to create a link. Step 2: Enter a title for your link (Figure 5.1 Step #3). This will show up on the left side of your template. Step 3: Enter the web address (Figure 5.1 Step #4) of the site or page you want to link to. Step 4: This is optional step however you may enter a description which is used when someone hovers over you link (Figure 5.1 Step #5). Step 5: Target (Figure 5.1 Step #6) is an important option that determines how your link operates. By default, Target is set to open in the current window. When linking to an external website, it is recommended that you always set target to open in a new window or tab. This will prevent users from leaving your site when they click on the link. If the link resides on your site then you can leave the link as it is. Figure

54 Step 6: Click on Add Link to insert your link in your website. You will see a Link added. message when done (Figure 5.2). Step 7: View the link in external window or tab and make sure it works by clicking on it (Figure 5.3). Figure 5.2 Figure

55 5.2) Edit Links for Website Click on the links subpanel to display all your links on the site. Step 1: Hover over the link you wish to edit and click on Edit (Figure 5.4). Figure 5.4 Figure 5.5 Step 2: Edit the title (Figure 5.6 Step 2). Step 3: Edit the web address (Figure 5.6 Step 3). Step 4: Edit the description (Figure 5.6 Step 4). Step 5: Set the target (Figure 5.6 Step 5). Step 6: Click on Update Link (Figure 5.6 Step #6). Figure 5.6 Step 7: Click the external tab or window to view the changed link (Figure 5.6). 55

56 5.3) Delete Links from Website Links should be checked on a monthly basis to see if they still exist. If they do not, you may wish to delete the broken link. Figure 5.7 Step 1: Hover over the link you wish to delete and click Delete. Figure 5.8 Step 2: You will receive a confirmation window (Figure 5.8) regarding the link you are about to delete. Select OK to delete the link or Cancel to keep the link. In this example, we will select OK. Figure 5.9 Note: Links do not go the trash bin. It is important to know if you want to delete this or not. Step 3: View the website in the external window or tab to confirm that the link is deleted (Figure 5.9). 56

57 5.4) Create Links in Posts or Pages Links can be created per post or page basis. They are useful to direct you user to another location on your website or an external website. These are different from the links that reside on every page. These links only reside on a single page or post that they are created in. Select either a Post or Page subpanel. The example below can be used when you create or edit a new post or page. Follow these instructions when doing both. Figure 5.10 Step 1: In your editor window, highlight the word you wish to link (Figure 5.10 Step 1). Step 2: Click on the chain link icon (Figure 5.10 Step 2). Step 3: Clicking the chain link opens an Insert/edit link window (Figure 5.11). In the Link URL section, type or paste the web address or URL (Figure 5.11 #1). Step 4: In the Target dropdown, select Open link in a new window (See Note below & Figure 5.11 #2). Once you are done, hit enter. Step 5: Click Insert once you are done. You will be taken to the editor window (Figure 5.12). Figure 5.11 Figure 5.12 Step 6: Click on Update or Publish to update the post. Step 7: View the link in external view. The updated content should look similar to Figure Note: If you are linking to a site or page that is not part of your website, we recommend that you set the Target (Figure 5.11 #2) to Open link in a new window. If you wish to link to a page that resides on your website, we recommend that you leave the default setting (-- Not set --) or select Open link in the same window. File formats such as PDFs should also open in a new tab or window. Word, Excel, Publisher do not require this option because they launch in an application on a desktop. Remember, if the file opens in a browser then it is a good idea to have the file open in a new tab or window. 57

58 5.5) Edit Links in Posts or Pages Figure 5.13 Step 1: Place your cursor anywhere on the link you wish to edit (Figure 5.13 Step 1). Notice that the link icons will be grayed out before doing this. After clicking on the link, the icon will now be active. Step 2: Clicking on the link icon will bring up an editor (Figure 5.13 Step 2). Step 3: In the Link URL section, type or paste your new web address or URL (Figure 5.14 #1). Figure 5.14 Step 4: If the web address is linking to another website, make sure the Target is set to Open link in a new window (Figure 5.14 #2). Step 5: Click on Update. You will be taken to the editor window (Figure 5.15). Note: The link still looks the same in the editor even though the Link URL was changed to (Figure 5.14). This is because we changed the backend address for this link and did not change the name of the link. If you wish to change the linked word, simply place your cursor on the link and type a new word on it. You will know it is a link because it remains blue and underlined. Step 6: Click on external view to test your link. Figure

59 5.6) Unlink (delete) a Link Step 1: Go back to your editor and click anywhere on the link (blue phone instructions link.). Step 2: Click on the unlink icon or title. to unlink the file from the word. You can now also delete the word Step 3: Click Update or Publish. 5.7) Create a Mail Link To create a clickable or linked mail link so that an external client such as First Class recognizes it, simply follow these steps: Figure 5.16 Follow Steps 1 & 2 on page 58 titled Creating links in Posts or Page. Step 3: Clicking the chain link opens an Insert/edit link window (Figure 5.16). In the Link URL section, type or past mailto: user @example.com (Figure 5.16). Step 4: Click Insert once you are done. You will be taken to the editor with your link. Step 5: Click on Update or Publish to update the post. Step 6: View the link in the external view (Figure 5.17). Figure

60 5.8) Edit a Mail Link Step 1: Click anywhere on the link you wish to edit. You do not need to highlight the link. Note: If you wish to change the linked word, simply place your cursor on the link and type a new word for it. You will know it is a link because it remains blue and underlined. Example: We changed the word from Webmaster to Contact the Webmaster (Figure 5.19). Step 2: Click on the chain link icon (Figure 5.13 Step 2). Step 3: Clicking the chain link opens an Insert/edit link window (Figure 5.18). In the Link URL section, edit or paste mailto: something@example.com. Step 4: Click on Update. Figure 5.18 Step 5: Click on Update or Publish to update your post. Step 6: View the link in external view (Figure 5.19). Figure ) Unlink (delete) a Mail Link Step 1: Go back to your editor and click anywhere on the name link (blue webmaster link.). Step 2: Click on the unlink icon name. to unlink the file to the word. You can now also delete the word or Step 3: Click Update or Publish. 60

61 Chapter 6 Comments 61

62 6) Comments One of the greatest things about Wordpress is the immediate feedback that readers provide. Unfortunately, too much of a good thing can be challenging and problematic. Fortunately, WordPress has a great comment management system. You can manage comments made on your site similar to the way you manage Posts and other content. Note: Comments are not enabled site wide and need to be activated as you add/edit your posts or pages. Figure ) Allow Comments on Post or Page We will now allow comments on a post we created earlier. Same steps are required when you create a new post or page. Comments should mostly be used when posting to the homepage however you can also allow comments on a page. Go to a post you wish to edit. If help is needed with editing a post see page 15. Step 1: Go to the bottom of the post you are editing and check Allow Comments (Figure 6.1 Step 1) so that it is checked. Step 2: Click on Update to now allow comments on your page (Figure 6.1 Step 2). Figure

63 Step 3: View the post being edited in the external window or tab (Figure 6.2). When comments are not enabled on a post you will see a message that states Comments are closed (Figure 6.0). This is simply means that comments are not enabled on this post or page. Figure 6.2 Note: When logged into the Dashboard, the website will only show a comment text area (Figure 6.2). When visitors visit the site, Name, , Website and Comments will display (Figure 6.3). Figure

64 6.2) Moderate a Comment When a user submits a comment on a post or page, they see a message stating Your comment is awaiting moderation (Figure 6.4). Figure 6.4 A yellow highlight comment will be displayed in the comments section when an administrator logins to the Dashboard. This indicates that there is a comment that has been submitted and requires attention (Figure 6.5 #2). The Comments subpanel will also indicate that there is a comment by displaying a number beside it. The number indicates the number of comments that require moderation (Figure 6.5 #1). Figure 6.5 Step 1: Hover over the comment you wish to moderate. A quick menu will display with Approve, Reply, Edit, Spam and Trash (Figure 6.6). Figure 6.6 Approve the comment if it is appropriate for your website. Click on Trash if you feel that you do not wish it to be on the website. Click Spam, if you feel that this is a spam comment posted by someone. Click Edit to change what was written by the user. Click on Reply if you wish to reply to the user. Step 2: Approve the comment by clicking on Approve. Step 3: View your post in the external window or tab. The post is now live for all your readers to see. The message Your comment is awaiting moderation is also removed when approved (Figure 6.7). Figure

65 Chapter 7 Managing Users 65

66 7) Managing Users If you d like your website to feature posts and pages from multiple authors, you can add as many accounts to your website as you wish. Figure 7.0 In Wordpress, there are five user levels which have different abilities on your website. To view your existing users click on the Users subpanel on the left (Figure 7.0). This screen lists all the existing users for your site (Figure 7.1). We currently have only one user. Each user has one of five defined roles as set by the site admin: Site Administrator, Editor, Author, Contributor, or Subscriber. Users with roles other than Administrator will see fewer options when they are logged in, based on their role. Administrator - Somebody who has access to all the administration features Editor - Somebody who can publish and manage posts and pages as well as manage other users' posts, etc. Author - Somebody who can publish and manage their own posts Contributor - Somebody who can write and manage their posts but not publish them Subscriber - Somebody who can only manage their profile Figure

67 7.1) Add a User Click on the Users subpanel (Figure 7.0) to insert a user. Step 1: Click the Add New button (Figure 7.2) Step 2: Fill in the username, , first and last name, and password. Choose a role from the Role drop-down menu. Do not uncheck the Send this password to the new user by button (Figure 7.3). Figure 7.2 Note: You can add more information to the user profile such as biography, website etc however we recommend that you let the user do this instead. Figure 7.3 Step 3: Click on Add User to complete the user registration (Figure 7.3). 67

68 7.2) Delete a User Click the Users subpanel (Figure 7.7). This will present all users currently on your website. Figure 7.7 Step 1: Hover over the user you wish to delete and click on Delete under the username (Figure 7.8). Step 2: A confirmation screen asking what needs to be done with Posts will be displayed. Select the option to delete the posts if you wish to delete his/her posts. Select Attribute all posts and links to and select a user from the dropdown menu if you wish keep the users posts. This assigns the users post to another user on the website. Figure 7.8 Step 3: Click on Confirm Deletion to remove the user from the system. Figure

69 7.3) Changing Your Password When viewing the Users subpanel (Figure 7.10), click the Your Profile tab. Figure 7.10 Step 1. After selecting the Your Profile tab, you will be able to view all of your profile settings. If you scroll to the bottom of the page, you will see the New Password option (Figure 7.11). Step 2. Fill out your new password in the New Password text box, and then retype the password again for security reasons. By clicking on the update profile tab you will have successfully changed your WordPress password. Figure