Before starting, it is best to first turn on the Toolbar Toggle on the right hand corner of the WordPress toolbar, in order to display both rows of tools and extend the editor’s functionality.
- To start, first create a new post by going into the Dashboard and selecting “Add New” from the “Posts” menu (see figure below).
- Editor: You are now in the WordPress editor, where the title of the post is created, text and other media are incorporated, and formatting is applied (see figure below). Writing and formatting is applied directly in the editor using the WYSIWYG interface (what you see is what you get). If it is necessary to use html, switch the “Visual” button over to “Text,” located to the right of the editor’s toolbar.
- Add Media: In order to add an image or small video or sound file, the “Add Media” button is located above the toolbar controls (see figure below).
- Add Media: Before clicking on “Add Media,” be sure to have located the cursor where the image is to be placed. Clicking on “Add Media” will then access the Media Library, where an image can be selected from those already uploaded, or where a new image is uploaded (see figure below). Click on “Upload Files” in order to access images, video, and sound from a hard drive.
While it is not generally recommended to add video and sound to the Media Library, it is possible to incorporate time-based media so long as the files are less than 10 megabytes.
- Insert Media: Once a media file is uploaded, it will be added to the Media Library. Note that if there is a need to resize an image, this can be done under “ATTACHMENT DISPLAY SETTINGS” (see figure below). Choose the approximate size, although the image can be resized again after inserting. To insert, click on the “Insert into post” button in the lower right hand corner.
The size of the image in the Media Library will be whatever size it was uploaded. Keep in mind that it is a good idea to upload an image that is larger than size you may need to display it in WordPress, so it can be further enlarged when the viewer clicks on it. It is recommended to size your images between 1280 and 1920 in width, whenever possible.
- Image Placement: The image is now placed in the editor where the cursor was placed (see figure below). Note that an image can’t be dragged to a new location, rather, it is necessary to cut and paste it into a new location.
- Hyperlink: In order to place an embedded hyperlink into a word or group of words, select the word(s) and click on the hyperlink symbol on the editor control panel, which looks like a chain link. This opens the insert/edit link editor (see below). Type or copy the address into the “URL” window, and then type a name for the link into the “Title” window. This title will appear when the user holds the mouse over the link. Be sure and select “Open link in a new window” when linking to a site that is external.
An embedded hyperlink is standard practice for user interface design. Avoid displaying the URL of an address, unless it is absolutely necessary to convey.
- Testing the link: In order to be sure the hyperlink is working properly before publishing the post, view the post in browser mode by clicking on the “View” button at the top of the editor. Note that the link displays the active link color according to the style specifications (see figure below) of the site.
- Categories: WordPress is a database, and categories are an important aspect of the organization of content. In OSS, categories are used to designate whether a post is related to research, a project, etc. Once categories are setup (See Setting up Categories), choose the appropriate one as in the figure below. If using OSS for more than one class, select a category that corresponds to the module. If setup correctly, two course modules are displayed with their corresponding child categories. If creating a new category, it is possible to add one here, but be sure to assign it to a parent category that corresponds to the appropriate module.
- Tags: The use of tags is also vital to the organization of content, as well as the use of the functionality of the WordPress database. Tags are especially useful for creating tag clouds (See Widgets), so that concepts and keywords that are trending on the site, as well as in class, are displayed in the tag cloud. It is recommended that tags be specific ideas: not larger groupings such as “research” or “projects,” which are more appropriate for categories. Rather, use specific concepts such as “virtual” or “collective” or “interactive.” To add tags to a post, type them into the “Tags” field in the right sidebar of the editor (see figure below), and click on the “Add” button.
- Featured Image: In order to display an image on the recent posts feed after the post is published, it is necessary to add a featured image. Go to the lower right hand corner of the editor and click on the “Featured Image” button, which will access the Media Library (see figure below). Select an image from the post, or if there isn’t one, select any relevant image from the Media Library (or upload a new one), and click on “Set featured image.”
Use of the featured image is crucial in the OSS system. If a featured image isn’t included, there will be an empty area on the blog post, which distracts from the overall style of the recent posts feed, or any galleries that are created from posts.
- Publishing the Post: When ready to go live with a post, click on the “Publish” button on the right hand side of the editor (see figure below). The post will now be visible on both the individual site, as well as the class site. After a post is published, it is possible to edit and save changes by click on the “Update” button, which replaces the “Publish” button.
Once the post is published, be sure and view it to see that that it appears as intended, with links, category and tags displayed properly. (see figure below). In order to make changes to the post, click on the “edit” button at the bottom of the page, or in the WordPress menu at the top of the screen, where the content, category, tags, etc can all be edited.
Always check the recent posts feed on the class site to be sure the post and the featured image is displayed properly.
- Creating a Page: this is exactly the same as a post, except there are no categories or tags assigned. Everything else as described above applies accordingly. See “Menu Customization,” for how to incorporate pages into the site.