Category Archives: How To Use Wordpress

Example spreadsheet screenshot

There are three main ways to get a spreadsheet into WordPress.

  1. Paste in text copied from a spreadsheet program like Excel or Google Docs.
  2. Upload a .PDF file (which can be viewed when clicking on the link to the file).
  3. Saving a screenshot as .GIF (recommended), .PNG, or .JPG.

1. Paste into

This list was copied from Google Docs and pasted into WordPress.
  1. File->Download->HTML to view it without Google’s interface.
  2. I selected the part I wanted to pasted in, then copied.
  3. I pasted into WordPress.
  4. Then removed data from cells I did not want to show.
  5. Then I used Worpress to align each money cell to the right (money is always displayed right-aligned).
It doesn’t usually retain the formatting but ought to keep the columns and rows intact. If your spreadsheet is too wide for the text column, the I recommend trying option 2.
Expense
 Amount
rent $48
credit card $10
transportation $16
hobbies $20
clothing $20
phone $20
food $30
entertainment $30
interest-loans $50
school $300
total $544

2. PDF Documents

This file displays an uploaded .PDF file. The spreadsheet was created in Google Docs and saved using File->Download->PDF…

Remember that .PDF files are not images, they are multi-page documents.

3. Image files

The image file below was first created in Google Docs then saved as a screenshot file:

  1. From Google Docs, I used the Grab tool on Mac with Command-Shift-4.
  2. The part I selected was automatically saved as a .PNG file, which works fine but it is usually too big for the web. This file is about 20k.
  3. So I opened it in Photoshop and “saved for the web” as a .GIF file so it is just 5k.
Spreadsheet screenshot example

Spreadsheet screenshot example saved as .GIF.

Testing how images appear when uploaded in WordPress 2.5

Famous poster art of Rosie the Riveter showing an example of the might American women used during World War II. Courtesy of US National Archives. Produced by Westinghouse for the War Production. Created by J. Howard Miller. Modifications © Jone Lewis 2001.This image was added to this WordPress post using the Add Media: Image icon listed on the Write->Post editing toolbar.

  1. Use the Upload button to add a file from your hard drive.
    • Or use the URL field to paste in a link to an image online somewhere else.
  2. Add a description and copyright statement to the Description field.
    • Note that when you edit this image later, the description will end up in the Caption field.
  3. Set the alignment if you want.
  4. Click the Insert into Post button to add the new image to your Post.

If you need to edit the image’s information, then:

  1. Click the Image icon on the toolbar.
  2. Or click the Manage->Media Library tab.
    • Click the title of the image in the list to switch to the image editing screen.

Note that when you add a Description in the Write-Post editing toolbar, the description contents end up in the caption field in the Mange->Media Library editing screen, becoming the alternative text attribute.

Irritations with WP 2.5

WordPress’ new image uploading functions have some great features, but no longer provide a sensible way to add citations and alt text to images.

  1. The contents of the title attribute do not popup when you roll over an image. Instead, the title field is used only in the Manage->Media Library list as a replacement for the file name.
  2. The alternative text field used to be called the description field and is now called the caption field. This caption is used for the visually impaired who are unable to see the image you have displayed.
  3. The description field is available to fill in, but does not seem to show up when viewing the image in a post. If you see it, let me know where it displays.

Editing these fields is now a pain. If you click on the image editing icon, you can only change the caption and not the title or description. You have to go back to the Manage->Media Library to make updates.

The bottom line is put your description and citation in the caption field.

How to Embed a Link Address in a Label

To improve readability and follow best web page formatting practices, embed link addresses in labels.

Before you learn how, click the Users menu while logged into WordPress. Scroll to the bottom of Your Profile to check the box labeled “Use the visual rich editor when writing.” Save your profile.

In WordPress 2.0+

  1. Copy the web address you want to embed from the address bar of your browser.
  2. While logged into WordPress, navigate to the Page or Post to be edited.
  3. Type the title of an article or web site in the Post editing box.
    • Select the title.
      • For my example web address, the title would be Women’s eNews.
    • Click the link icon on the toolbar right above the editing box.
      • Select title of link then click the link icon on the editing tool bar.
    • When a message box pops up, paste the address you copied into the address field.
    • And add a subtitle to help describe the link.
      • For example, the title of the link is Women’s eNews and the description is “News from around the world.”
    • Click Insert or Update.
  4. View the Preview.
  5. Save and Continue Editing, Save, or Publish the page/post.
  6. View the new page/post to ensure it looks the way you expect.
  7. Click on the link you made to be sure you pasted the correct address and it links to the site you wanted.

Bad example

http://www.womensenews.org/index.cfm

Good example

Women’s eNews

How to Upload Files within WordPress 2.0

To upload a file to go with a Post or Page, do the following:

  1. Login to your WordPress account
    • Write a new Post or Page (or Edit an existing Post or Page).
  2. Scroll down below the text box to see the Upload functions.
    • Click Upload.
  3. Choose a size and format for the new file.
    • If you uploaded a large image then choose Thumbnail and File.
    • If you uploaded a small image or a medium-sized image that fits within the column then choose Full Size and None.
    • Screenshot from wordpress.com dashboard. Open source using gpl license. View larger screenshot of the Send to Editor choices.
      • Note that the Send to Editor button is often hidden below the scroll box.
    • If you uploaded a document that is not an image, choose Title and File.
      • Be sure you’ve uploaded a web document such as a .pdf NOT a .doc, .xls, or .ppt file as these are not web formats.
  4. Choose Send to Editor.
    • This means WordPress will add the necessary code to your Post so that the image (or a link to the file you uploaded) will show up.
    • If you don’t like the location of image then select the image by clicking on it.
    • Drag it to the location you want, OR cut and paste it where you want it.
    • Then click the image icon on the toolbar.
      • The toolbar does not show up in Safari Browsers but will in others if you’ve selected the visual editor in Users->Profile tab.
      • Choose Right or Left alignment to have text float around it.
      • Update the description as needed.
      • Screenshot from the Upload tab in WordPress.com, the open source blog. Copywrite via gpl license. View a larger version of the image icon screenshot.

How to Define Pages and Subpages in WordPress

When you submit a project for this course, you’ll want to write the project report in a Page of your blog. If you choose to use WordPress to deliver your Culture Site, then you’ll want to create a Page and SubPages for each page of the site.

These Pages are separate from Posts and Links, which you’ll also use to note progress and store resources for the projects. Pages are always listed in the menu and are not “archived” like news posts.

For example, I have created pages and subpages for each page of the sample Culture Site called Hypatia, a Wild Goose Chase, which is in-progress.

To Write Pages and Subpages…

  1. Login to your blog.
  2. Click Write on the main menu.
  3. Click Write Page on the submenu.
  4. On the menu at the right, you’ll see a list of options. Click the + next to the Page Parent option.
  5. Choose Main Page (no parent).
  6. Now type the title of this page; something like Culture Site Introduction or be more specific and use the actual title, for example: Hypatia, a Wild Goose Chase.
  7. Type some placeholder text in the post box for now. You’ll replace it with your final text later. Click Create New Page.
  8. Write Page for each subpage, but choose Culture Site from the Parent Page instead of Main Page. Add a title and placeholder text. Click Create New Page.
  9. Now view your site. Click on each page and subpage to see if all your pages are viewable.
  10. You may want to click Manage Pages to modify the order (though in most cases the order is alphabetical regardless of the order you type in the right menu.

How to Categorize Posts and Bookmarks in WordPress

As required by this course, you will type your challenges, solutions, ideas, great finds, news, and preliminary project work in WordPress Posts, essentially keeping a diary or log of your progress.

To organize the many Posts you will make during the term, you will define Categories for each project. Assign these categories when Posting or defining a Bookmark.

For example, I like to paint, so I have a blog about my work at i-Paint.us. I set up categories for each type of subject/media/support: Boxes, Landscapes, Portraits, Murals, and Signs. When I post a description and picture of a new landscape, I choose the “Landscapes” catageory. If a reader just wants to see landscapes, they can click on the Landscapes category to see only landscape news posts.

Categories tab is openCategories tab is closed.
To define Categories for Posts and/or Bookmarks…

  1. Login to your blog.
  2. Click Manage on the main menu.
    • Click Categories on the submenu.
    • Notice that there is already a category defined called Uncategorized. Rename this category something like Set Up.
    • Add a category called Culture Site
    • Add a category for the rest of your projects: teach, financial analysis, and art.
    • Click the Save button.
  3. Click Manage again.
    • Click Posts.
    • View each post’s category to see if you need to update the posts’ categories’.
      • Click Edit on one that needs updating.
  4. Click the + symbol next to the Categories menu item on the right vertical menu.
    • Select and deselect category boxes as needed for this post.
  5. Follow this process for each post that needs updating.
  6. Define new categories while either in the Post or Bookmark area by using the Add field.
  7. Now view your site.
    • Click on a category in the main menu. Do you see all posts related to that category?