History: HIST 106 - Greenwald

Video Tutorials for WordPress

• Using WordPress (creating a post, using the block editor)

Creating and Editing Your Posts

1. Login to the WordPress Dashboard.
2. Click Posts on the left side of the screen.
3. Click Add New to create a new post, or click on the title of an existing post to edit it.
4. Enter a Title for your post, one that is descriptive of your topic, and draws the reader to want to click on it. Avoid jargon or specialized scientific terms.
5. The new WordPress Gutenberg editor uses Blocks to organize content. You can start typing in the block provided, or click the + to add a new block. The block you select will depend on the type of content, such as paragraph, image, heading, etc.
6. Once you have added blocks to your Post, you can move them around by dragging them up and down.

When editing a Post or Page, the right-hand side of the screen will switch between Document and Block tabs. The Document tab affects the entire Post, the Block tab only affects the Block you are currently working on.

Common Block Types

• Paragraph: Use for text. You can edit the style and add links similar to Word or Pages. Every new paragraph that you write is considered a new block.
• Image: Adds an image and a caption
• Heading: Use if you want to have multiple headings to break up your post
• List: Bulleted or numerical lists
• YouTube: Embeds a YouTube video in the post
• Quote: Creates a block quote to emphasize a concept
• Classic: Creates a block that uses the traditional WordPress editor
• Embed: Embeds a link inside the webpage so that the content of the page shows instead of the link. There are several pre-determined types of sites that will embed with no extra work, such as YouTube, Twitter, and Flickr. For other types of sites, you may need to find an embed HTML code that starts with something like <iframe> or <embed> and then paste it into the Custom HTML block type. For example, here is how to embed a Google Map into Wordpress.
  • WordPress documentation on embed blocks

Using the Media Library

Everyone in the class shares the Media Library for the entire WordPress site. To add images to the media library, you will either need to have the image saved to your computer.

1. From the Dashboard, click on Media
2. Drag the file from your computer to the box that says Drop files anywhere to upload, or click Select Files to search for them on your computer
3. Click on the image after you've uploaded it to add Alternative Text, a title, and a caption.
4. Click on Edit Image to crop the image, rotate it, or adjust its size.

Adding an Image to a Post​

1. From the editor, add an Image block.
2. Select Upload if the file is on your computer (this also adds it to the Media Library), Media Library if you've already loaded it to WordPress, or Insert from URL if you have a link to an image that is elsewhere on the Internet. Links to images already on the Internet need to end in .png, .jpg, .jpeg, or .gif in order to work. If uploading or adding from the library, you'll need to select the image.
3. Your image will appear in the editor. You can then move and resize the image as you see fit on the page, change how it is aligned, and add a caption. 
4. In the image block, the caption will appear below the image itself.
5. In the Caption field, enter your caption. This should give the reader some context as to why you are including the photo in the first place. You should also use the caption to provide credit to the original author of the image. At minimum, you should have the title of the image, author, and a link to the original image.

Working with Images

Once you've added an image to the page, you can set the alignment of the image (left, center, right, none) or click on the pencil icon to go into the editing mode. You can change the size of the image, or add a caption here. You can also drag the edges of the image to adjust its size.

Adding a YouTube Video to a Post or Page

1. Add a YouTube block (under Embeds)
2. Paste in the link to the YouTube video.
3. Include a caption for your video.

The DH Toolkit has several tutorial pages on how to find media on the Internet to use in your blog post, and how to provide proper credit.

Using Others’ Work

• Copyright
• Attribution
• Public Domain and Licensed Content

Media Libraries

• Finding images you can use
• Finding audio content you can use
• Finding video content you can use

Writing for the Web

• Writing for the Web (best practices for writing online)

Best Practices for Accessibility

Considering accessibility for different users of your site means that it will be accessible to as many people as possible from the start.

Text

• Bold/strong can be used to emphasize text. Use sparingly.
• Italics should be reserved for citation purposes. If you have to use italics for emphasis, consider bold/strong as well.
• Never use underline for emphasis or as part of a citation, as it can be confused with a link.
• Sub or superscript and strikethrough should be used sparingly.
• When creating a list of items (2 or more items), use the bullets or numbered lists. Numbered lists should be used for 2 or more items if sequence matters, bullets if there are 2 or more items and the sequence doesn't matter. If there is only 1 item in your list, it isn't a list and use the indent function if you need to offset something from the main body.
• Do not change text size or color.
• Keep text left-aligned.

Linking

• Link text should indicate a specific destination and usually be a phrase, not a single word. Do not use “Click here” or similar directions to indicate a link. “More information” or “Read more” may be used as long as there is context prior to the link.

• Creating accessible links (avoiding using "click here" or other text without context)

Images

• Center images instead of trying to stagger them left and right. Trying to align left and right may make text appear strange on a smaller screen.
• Use the Alt Text field in WordPress to describe the image so screen readers can provide a description.
• Always provide a caption and attribution for images you use.

Headings

• Headings should be used to identify hierarchy on a webpage, not for emphasis. For emphasis, use bold/strong text instead.
• Do not use bold/strong or italics on headings.
• Headings should be in order, so do not go from h2 to h4 (meaning you would be leaving out h3).