WordPress Tutorial

WordPress Quick Start Tutorial (by catkroll)

This brief WordPress tutorial covers an Introduction to WP site architecture (Dashboard, Media Library, etc.), blogging on the Festivals course website, and developing your own WP site.

WordPress site architecture (or logical structure): WordPress is a free, open-source content management system (CMS) used by millions of individuals and businesses to host personal portfolios, blogs, academic and personal projects, and to sell merchandise and services. As you are getting to know how WP operates, it will be helpful to understand how this and many other popular CMSs operate. WordPress web designers offer users a wide variety of built-­in templates. For the Festivals course, we will be using only those templates that are fully accessible so that those who need visual or auditory accommodations will be able to experience and to appreciate your work.

All WordPress sites operate according to a predictable, consistent site architecture. WordPress, like other CMSs, has a Dashboard of control options you can use to make global changes to your site (such as changing your theme template, categories, or font). All media files you upload will be stored in your Media Library permanently, so you can re­use, re­size, or rearrange them at will.

Important: as with other CMSs, your posts, edits, and site changes will not be effective until you hit the Save & Publish (or Update) button on the page. If you try to leave the page without saving, WordPress will remind you that you have unsaved changes.

Site navigation: As you become more familiar with WordPress navigation, you’ll notice that there is a fair amount of helpful redundancy in its operations: that is, you can access different areas and features of your site through a variety of pathways. For example, there are different ways to return to your home page and different ways to create new pages or posts.

Adding pages or posts is done by clicking on the blue pencil icon located at the top right­hand corner of any page. An html editor box with toolbars will open up (this will feel very much like the set­up in Microsoft Word). You have the option of typing or pasting in text when the Visual tab is activated (it defaults to this), or typing or pasting in html code. This can be useful if you need to customize something, check if a link is broken, or troubleshoot another issue. Normally, though, you’ll probably be leaving the html tab alone and just using the Visual tab. If you need special characters that are not supported by WordPress, I recommend that you type out that content in Word first (using Word’s Insert → Symbols → Advanced Symbols feature) and then paste it into the html editor box. After doing this, check your text and restore any formatting (or text) that has been lost.

Editing or updating individual pages or posts is done by clicking on the “Edit” link at the top left of the page under your profile photograph, or by clicking on the blue pencil by clicking on the blue pencil icon located at the bottom right corner of the particular page you’d like to edit.

WordPress has a variety of useful plug­ins already installed, such as Site Stats that records visits to your page; Akismet Stats that blocks spam; buttons that allow for links to Facebook, Google+, and other popular sites, and buttons for printing and emailing. You can customize your site further by adding plug­ins designed to be used with WordPress: https://wordpress.org/plugins/. For example, you can add a tag cloud widget that visually represents key words or terms on your site: https://en.support.wordpress.com/widgets/tag­cloud­widget/.

Blogging on our course website: Dr. Snow and I will assign you the role of Author so you can add blog posts to the Festivals course website. Most of your blogging will be done on your own individual sites, where you will be the site Administrator. Please see below for tips on adding blog posts to existing sites (topics #5 and #6).

Creating your own site in WordPress: WordPress has some tutorials embedded in its main site (and see https://learn.wordpress.com), but below I present a few tips to help you get started.

1. Select your WordPress theme. Be sure to use themes that meet accessibility standards so your work can be experienced by all. You can find the current list of those themes here: Accessible WordPress Themes

2. Select a free WordPress account and type in your site name (you can always change your actual site name later).

3. At this point, you can access a variety of introductory tutorials, if you’d like: https://learn.wordpress.com. Alternatively, proceed with the quick­start instructions below.

4.  Customizing the appearance of your site:

• Insert a header image (visit Wikimedia Commons for images that have been licensed through Creative Commons and are acceptable to use as long as you properly attribute them to their creator). From My Sites, click on WP Admin, which will take you to the Dashboard. Once there, click on Appearance, then Header, then Header Image. This action takes you to the Media Library, where you have the choice of using an existing image or of uploading a new image. Select the relevant image → Select & Crop → Save & Publish. You may need to crop your image so it views properly in the allotted space of the WP template you’re using. Important: below each image you insert on a page, be sure to insert a caption (in the html editor box) attributing the image to the original creator and cite the source where you located it. Ideally, use your own images, those licensed through Creative Commons (for example, those available on Wikimedia Commons), or those in the public domain.

• To insert images, audio, and video files on a page or within a post: click on the “picture” icon on the top of the toolbar at the far left. This takes you to your Media Library. From there, click on the file you’d like to insert from your computer, or add a new file or a url link. Then click Insert. Crop as necessary.
• At any point, you can change your WP theme (but remember to choose one that meets accessibility standards: Accessible WordPress Themes).
• To get back to your current home page, click on My Site in the top left corner. You will see your site listed there. Hover over the name of your site and click on the blue “home” icon.
• Change the title of your site (and subtitle) as needed. On the left hand side of the page, click My Site in the top left corner –> WP Admin → Appearance → Customize → Site Title. Fill in Site Title (main title) and Tagline (subtitle). Check that “Display Header Text” box is checked. Click Save & Publish. Click X to exit back to the Dashboard.
• To change fonts and font sizes: From My Site –> WP Admin –>  Appearance → Customize → Fonts → select from dropdown menu of fonts. Then click Save & Publish.
• Create a static front page (your landing page). From My Site –> WP Admin –> Appearance → Customize → Static Front Page → A static page. Click Save & Publish.
• Create menus (tabs across top of your site): From My Site –> WP Admin –> Appearance → Menus → View All. Click the Pages and Posts you’d like to be visible. Click  Primary Menu, then Save Menu. Note: you can create both menus and submenus (see #8 below). Experiment!

5. To create a new page or a blog post, click on the pencil icon in the top right­hand corner of the page. An html editor box will open up. Give that page or blog a title, then type (or paste in) your content. Click Save & Publish when you are finished.

6. Editing an existing page or blog post: You can go back and edit a page or blog post at any point by clicking on the blue pencil icon at the far lower right corner of the page. Click Update and then View Post.

7. Some handy keyboard shortcuts: Ctrl (or Command on Mac) X = cut

Ctrl (or Command on Mac) C = copy

Ctrl (or Command on Mac) V = paste

See also the complete list of WP keyboard shortcuts: https://codex.wordpress.org/Keyboard_Shortcuts. Sometimes, it will be useful to create content in Word and then insert it into an html editor box on a page in WordPress (especially if you are making use of lots of special characters or symbols). You may need to make some minor formatting adjustments after importing your content; also check to ensure that none of your text has been lost.

8. Creating menus (tabs at the top of your site): from My Site → WP Admin → Appearance –> Menus. Give your menu a name. Click View All, then click which pages and posts should be visible as a menu. You can either align them all flush left or indent slightly to create submenus (drop-down menus). Click Primary Menu, then Save Menu. To delete a menu, click on the link in red at the bottom of the Menu page.

9. Create your profile: from My Sites → WP Admin → Users → My Profile. Fill out the basic information, including a little bit about yourself. Upload a headshot or other image from your computer to customize your Gravatar (globally recognized avatar). You can crop the image so that it fits well in the available space.

10. Insert email, print, Facebook, Google+, and other buttons by going to Settings → Sharing. Drag (and rearrange as you like) the Sharing buttons you wish to add to your pages into the “Enabled Services” area.

11. License your site at Creative Commons to preserve your research and all of the hard work that went into the creation of your site: https://creativecommons.org/choose/. You can display the license in your sidebar. See the end of this tutorial for an example of what a Creative Commons license looks like.

Embedding Maps, Timelines, Audio, Video, and Plug­ins into Your WordPress Site: One of the great advantages of the digital humanities field is that it affords you many different ways to represent your ideas and, in fact, allows you to ask unique kinds of research questions and to creatively design the presentation of your findings. The medium in which you represent your ideas contributes to their communicative and aesthetic power. For example, embedding audio files of interviews into your site (by uploading them to SoundCloud and then displaying them on your site) affords your audience a sense of the intimacy and vibrant power of the human voice. The same holds true for video files: once you create them, import them into YouTube, and then link to them from your site, you add a visual and acoustic dimension beyond print. Further, you may find that maps or timelines help you narrate a particular aspect of your research, and these can be easily embedded in your site as well.

Deleting a Site: from the Dashboard → Tools → Delete Site.

A few tools for representing your ideas visually and acoustically, as well as textually:

Wordle: creates a word cloud to show the relationships between key words or terms; http://www.wordle.net

Timeline JS3 (considered one of the best pieces of timeline software): http://timeline.knightlab.com

TimeToast (easy ­to ­use timeline software): https://www.timetoast.com

Tiki­-Toki (more sophisticated timeline software): http://www.tiki­toki.com

Infographics: piktochart. http://piktochart.com

gifs: http://giphy.com

.mp4 to .mp3 converter: http://www.onlinevideoconverter.com/video­converter

GarageBand (available on Macs)

Audacity sound recording software (for both PC and Mac): http://audacityteam.org

Voice Memos on iPhone: for recording audio; easily imported to computer as .mp3 files

iMovie (available on Macs)

Camtasia:  simple video and screen recording software (many universities have this installed on computers in their labs; free trial available): https://www.techsmith.com/camtasia.html

SoundCloud

YouTube

For an amazing blend of the artistic and the geographic, see Rebecca Solnit’s Infinite City: A San Francisco Atlas, which combines geographic information system (GIS) technology, cultural history, and spatial analysis of San Francisco’s communities: http://amzn.to/1TT3qz2

WordPress Quick Start Tutorial by Cathy Kroll is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.