Blogging with WordPress – Spring 2024 HIS 295 Tutorial

Creative Commons license iconThis tutorial by Tierney Steelberg, Digital Liberal Arts Specialist at Grinnell College’s DLAC, is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Table of Contents

  1. What Is WordPress?
  2. Discussion: What Makes a “Good” Blog Post or Webpage?
  3. Course WordPress Website
  4. Writing a Blog Post
  5. Accessibility
  6. Copyright & Finding Reusable Images on the Web
  7. Get Help

What Is WordPress?

WordPress is a powerful, open-source content management system for building websites. Over 40% of existing websites on the web were built using WordPress.

What you will use for this course website is a self-hosted instance of WordPress (WordPress.org), hosted by Reclaim Hosting through Sites @ Grinnell, available for free to any member of the Grinnell College community. These WordPress sites are different from a WordPress.com site, which come with advertisements, restrictions on what can be done on the back-end, and a domain ending in wordpress.com.

Discussion: What Makes a “Good” Blog Post or Webpage?

Let’s consider this together!

  • First person: relating to the audience (connection, not using complex terminology – explaining)
  • Visually clear how to navigate without thinking too hard – readable sidebars, intuitive design
  • Breaking up large walls of text with pictures
  • Using fonts that are readable
  • Not using things that move – or being thoughtful about it (maybe take a class poll on preferences)
  • Nice dominant pictures to draw folks in – something impactful

Course WordPress Website

You should have received an email from wordpress@landscapesofgrinnell.sites.grinnell.edu inviting you to set up your account. Use the link provided to set up your password. Your username is your Grinnell College username, and your email address is your Grinnell College email.

Once you have set up your password, you can log in to the back-end of the course site at https://landscapesofgrinnell.sites.grinnell.edu/wp-admin and you can view the public, front-facing version of the course site at https://landscapesofgrinnell.sites.grinnell.edu/. You can use click “Lost your password?” on the site login page if you need a password reset link emailed to you.

From your site profile page (Users > Profile) you can make changes to your site profile as needed (name display, etc.).

You have each been added to the site with the Editor role, meaning you can create and publish your own posts and pages, as well as edit others’ posts and pages.

As we get started, please fill out the online work consent form at https://bit.ly/47S2rf3

Writing a Blog Post

You will use WordPress’s Posts feature to write your reflections. Posts are site entries that appear on the site in reverse chronological order, and are associated with a particular author and timestamp.

Follow these instructions for creating or editing a post:

1. Click Posts in the left-hand navigation menu.

2. Click Add New if you want to create a new post, or click the title of an existing post if you want to edit it.

Screenshot of a WordPress Post being written in the Classic Editor

3. Use the text editor box to add or edit the content of your post. There are a variety of WordPress text editors: currently Sites @ Grinnell WordPress sites use the Classic Editor.

  • Buttons at the top allow you to edit the font, styles, and layout (bulleted or numbered lists, text alignment, etc.).
  • By highlighting text and clicking the insert/edit link button, you can associate a URL and turn that text into a hyperlink.

Screenshot of the WordPress Media Library insert options on a Post

4. Use the Add Media button to insert images. You can select existing media from your Media Library, or click the Upload files tab to upload a file directly to a page (which will also automatically add it to your Media Library). It will be added to the page where your cursor is.

5. Add descriptive ​alt text​ (alternative text, a description of the image for users who cannot see it) for your image in the alt text box when you upload it to the page.

8. If you want to embed media from another site (such as a video on YouTube or a song in SoundCloud), you can paste a link to it in your Post: WordPress will automatically convert these links into an embed, for most platforms.

  • You can also do this manually by copying the embed code (usually in an <iframe>), clicking the “Text” tab at the top of the WordPress text editor, and pasting the code where you want it to appear in the post’s HTML code.

7. When you’re ready, click Update or Publish to save and publish your changes – or click Save Draft if you’re not ready for it to be published yet. Don’t forget to save as you go, so your work is saved if you leave and come back.

For future assignments involving research, you may use WordPress’s Pages feature to write static site pages. Pages use the same text editor as Posts.

Resolving Image Issues

Some folks have reported issues with getting their images to show up on their pages: instead of seeing the image, they see a white box with the image title. It looks like this is most commonly happening when you upload a .HEIC file (the file iPhones/iOS automatically save photos as) – WordPress, along with other platforms, does not seem to be able to render this more specialized file type. Try converting the image to another file type (such as JPEG) and see if this solves the issue. If issues persist, get in touch with Tierney and/or Kailee.

 

Accessibility

“Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed.” (Wikipedia).

As you write your blog posts, keep ​accessibility​ in mind – think about:

  • ensuring a logical document/page structure (nesting headings correctly H2 > H3 > H4…)
  • breaking up walls of text
  • use of color: appropriate color contrasts, avoiding colors that are too bright, being careful when using colors to convey meaning…)
  • legible typeface and font size
  • providing text alternatives to multimedia content (alt text for images, captions or transcripts for videos)
  • writing links that make sense out of context (avoid “click here”)

See WebAIM’s ​Introduction to Web Accessibility​ to learn more.

You can use these resources to check your work:

 

Since this website is public, it’s important to look for and use images that are licensed for you to reuse freely, without worrying about copyright. Consider:

  • Photographs you took or other images that you created yourself.
  • A ​Creative Commons​ ​license​ is a copyright license that allows works to be used by others. Different types of Creative Commons licenses exist, with differing restrictions (attribution, share alike, no derivatives, non-commercial).
  • Works in the p​ublic domain​ are freely available to the public as a whole and are not subject to copyright laws.

If an image is copyrighted, or you are unsure of an image’s copyright status, do not use it on the website.

Here are some resources for finding Creative Commons & public domain images:

 

Get Help

If you have questions, need help, get stuck, or want support trying something new, there are support resources out there for you!

  • Kailee Shermak, Vivero Digital Fellow: email shermakk@grinnell.edu
    • Vivero Digital Fellows trained in a variety of digital tools and approaches (including WordPress!) hold peer mentoring drop-in hours from 7-9 PM in the Burling Library Media Room (lower level) Sundays through Thursdays every week while classes are in session. Kailee works on Sunday and Monday evenings from 7-9 PM!
  • Tierney Steelberg, Digital Liberal Arts Specialist, is available to help you with questions, technical issues, and trying out new things: email steelber@grinnell.edu.