Unpacking the Bookstore

Blogging Resources

     Creating your first post can be daunting and, if you are unfamiliar with WordPress, confusing. The following instructions will not only help guide you through how to create a post, but also how to ensure that the different components in your post (text, photo, gallery, maps, etc.) are all compatible.

Create a Post

Create a Post

Go to the main Posts page to get started: https://unpackingthebookstore.susqu.edu/wp-admin/edit.php

  • There is an optiBlogging Resourceson to add a new post next to the “Posts” heading.
  • Alternatively, you can go to the lefthand side bar in your Dashboard and hover over the “Posts” tab. There will be an option to add a new post.

Familiarize yourself with the WordPress visual editor: https://easywpguide.com/wordpress-manual/adding-your-site-content/classic-editor/adding-content-with-the-visual-editor/

Images

Enhancements

How to add Galleries, Slideshows, Audio, Video, and use Shortcodes
  • http://learn.wordpress.com/get-flashy/

Creating Google Maps

Create a Google Map
  1. Go to https://mymaps.google.com/ and log in (if you don’t have a Google account, create one – it’s free).
  2. Click on the “+ CREATE A NEW MAP” button in the upper lefthand corner.
  3. In the new window, click on “Untitled map” and follow the prompts to name and describe your map. Then, click on “Untitled layer” and follow the prompts to name and describe the layer.
  4. Click in the Search Bar and type the name and address of the bookstore that you are working on.
  5. Click on the location listed under the Search Bar.
  6. The location will appear on the map. Click on “+ Add to map” to add the location to your map.
  7. You can add additional markers on the map by repeating steps 4-6.
Customizing a Google Map
  1. When viewing your map, you will see all your locations listed on the left-hand side of your screen. From here, you can edit the markers on your map.
  2. To change the marker colors, go to the left side of the screen where all the locations appear. Hover over a marker title and click on the paint bucket that appears to the right of one of the title.
Embedding Your Map Into Your Post
  1. Set your map to public by going to the left side of the screen where all the locations appear and clicking on the “Share” button.
  2. In the popup window, click on the button next to “Anyone with this link can view” and then click on the “Close” button. This setting will allow anyone to see the map when it is embedded in your post on Unpackingthebookstore.org.
  3. Click on the three dots to the right of your map name and choose “Embed on my site” from the dropdown menu.
  4. In the popup window, copy the HTML code and click on the “OK” button.
  5. Go to your WordPress post.
  6. On the post edit screen, click on the “+” icon.
  7. In the popup window, click in the search box and type Custom HTML. Then, click on the “Custom HTML” icon that appears below the search box.
  8. Paste the HTML code that you copied in step 4.
  9. Click on either the “Publish” or “Update” button in the upper righthand corner of the page.
Embedding a Street View Into Your Post
  1. In your Google Map, click on the marker at the location you wish to embed as a Street View.
  2. In the popup window, click on the ‘View in Google Maps’ link for the location.
  3. The Street View will appear in a popup section on the lefthand side of the screen. Click on the “Share” icon under the picture.
  4. In the new popup window, click on the “Embed a map” tab and then click on the “COPY HTML” button.
  5. Go to your WordPress post.
  6. On the post edit screen, click on the “+” icon.
  7. In the popup window, click in the search box and type Custom HTML. Then, click on the “Custom HTML” icon that appears below the search box.
  8. Paste the HTML code that you copied in step 5.
  9. Click on either the “Publish” or “Update” button in the upper righthand corner of the page.

Creating a Timeline

Create a Time.Graphics Timeline
  • Go to https://time.graphics and create an account by clicking on Log In which is in the upper right hand corner.
  • Watch this instructional video for guidance on creating a timeline.
  • Embedding your timeline into your Word Press Blog
  • For most of your work, you will be on the Visual tab for the WordPress Editor. However, in order to embed the code, you want to switch to the TEXT tab. Make sure that the HTML code is embedded in the appropriate location in the body of your text. For example, if you talk about the timeline near the middle of your post, it might make sense to embed the timeline in-between the paragraphs that mention it.

Creating a Floor Plan

Create a Floor Plan using ThingLink
  • Go to www.thinglink.com and create an account, “Join Now.”
  • On the next page click on “Go To Your Stream” on the right side.
  • Click the ” + Create” button located at the top right hand side of the screen.
  • Upload the image of your floor plan (archival image, photo or drawn-by-hand).
  • Give your floor plan a title.
  • Click on a specific location to add a tag to the image.
  • Then, add text content to “Description.”
  • Click on the icon image to select one.
  • Consider using the icon graphics to visually distinguish the types of content you’re adding.
  • To add photos, put the url to the photo into the link section. For images not already online, upload the images to this website, Unpacking the Bookstore, and then copy the url and paste it into the tag’s link section.
  • Then click “Save Tag.”
  • Add more tags to your image. You may wish to use text icons to describe the arrangement of subject/genre categories on the sales floor or to describe an especially interesting or evocative location in the bookstore. Image icons can illustrate the bookstore’s layout and look or highlight important visual details within the bookstore. Try not to crowd the floor plan—tag only what is necessary to support the focus of your post.
  • When you have have added all your content, save the image on the lower right hand side.
  • If you want to edit your image further, click the pencil icon to “Edit.”
  • To embed the image into your post, hover over the image and click on the “Share Image” icon on the upper left corner of the image.
  • Copy the embed code.
  • Paste the embed code in your WordPress post in the “Text” tab window, in the place where you want the floor plan to appear.

Additional Tutorial Sites

WordPress Tutorial Websites

Tutorials Point: https://www.tutorialspoint.com/wordpress/

  • A mecca of “How To” instructions, comprehensive and easy to read instructions

CreativeBloq: http://www.creativebloq.com/web-design/wordpress-tutorials-designers-1012990

  • Provides a list of awesome tutorial sites for those interested in the design elements of WordPress

WordPress support: https://en.support.wordpress.com/video-tutorials/

  • Basic video tutorials