Creating a Web Site with WordPress

Introduction

This lab will walk you through the basics of learning WordPress.

Learning Outcomes

• Use WordPress.com to create a web site with menus and HTML content
• Add images of maps to your web site

Getting Started

1. Navigate to WordPress.com in FireFox. WordPress.com does not support Chrome well (scary but true).
2. Join WordPress.com and you should arrive at a web page to create a new site
3. WordPress.com tends to change their website each year so we'll walk through the first few pages together in lab. Below are some tips.
4. • Stay with the defaults for now
   • Stick with the free options until you know you need the additional features
   • Don't worry too much about the domain name at this point as you can change it later

Updating Pages

Before we go on, note that WordPress keeps changing the user interface annually and the interface can change with the theme that you select for your website. The instructions below are a guide and your experience may vary! I do recommend taking some time to learn WordPress when you are not under too much schedule pressure and can play with creating websites.

1. Click on "Pages" to see a list of the web pages in your website.
2. Click add a new page.
3. Use a blank template for now
4. Click below the editing bar and write some text. Click "Preview" and you should see the changes on your page in this "preview" mode.
5. Click "Close" to return to editing the page.
6. Add several paragraphs of text.
7. Select some text and then change the style of the text from the "Paragraph" drop down menu.
8. To the left of the style menu are icons to make text bold, italic, a bullet list, a numbered list, and a hyper link. Try each of these now.
9. Continue switching back and forth between the preview and edit modes adding text and images to your web page.
10. You can also change the title of the web page by clicking on "Title".

Adding Images

1. Click on "Add" and then select "Media"
2. This is a web page that manages your images, PDFs, and other files for the web site.
3. Select "Add New" and then upload an image from your computer. This allows you do add your images, including static maps to a web site.
4. WordPress will scale the images for you but other web solutions may not so remember to scale your images to an appropriate size to keep them from taking a long time to download!
5. When ready to edit another page, click "My Sites" in the upper left.

Publish and Update

1. Spend some time editing your page with images and different features in HTML until you are comfortable with the editor.
2. Then, click the "Publish" button in the upper left and then click "Publish" again. This will save your changes and make theme available on the web.
3. The next time you edit the page, the button will change to "Update" as the page is already published.
4. Click "Close".

Selecting and Customizing the Theme

1. In editing mode, click on "Themes" next to "Customize".
2. You'll see a huge number of themes.
3. Click on the "Radcliffe" theme.
4. Scroll down and you'll see there are video tutorials for using this theme. Remember these in case you want to go through additional material later.
5. Select this theme or another one. You'll want to start with themes that are relatively simple. Don't worry too much about the content of the theme as you can change the fonts, images, and text for any of the themes but find one that you like the layout of as this is harder to change.
6. If your web site looks good you can keep this theme and customize it.
7. Click on "Activate".
8. If you select a new theme, WordPress will take you to the "Customizer", otherwise, return to edit mode and click on "customize".
9. First, notice that there are pencils in circles near some of your web page content. Click on one of these and it will let you edit the content that is nearby. The pencils do not appear in your final website.
10. Click on the pencil next to the "Search" feature. Open the search feature and notice there is a "Remove" at the bottom. Click this now to remove the search feature as it won't work yet and you can always add it back later.
11. Remember to remove any other features in your web site that do not make sense before you turn it in.
12. Click on the pencil next to "Blog at WordPress" at the bottom of your page and you'll see things you can change for the "Site Identity". These items appear on all pages. Unfortunately, you cannot change the footer unless you pay for a plan at WordPress.com.
13. Click on "Publish" to save your changes and publish them on your final website.

Linking Web pages to Menu Items

1. Return to the main edit page and add pages with the titles"Home", "Data", and "Projects"
2. Select "Customize -> Menus". This takes you to the menu editor for WordPress.
3. Open the "Primary Menu" and then click "Add Items".
4. Select the new web pages and remove the old home page.
5. Make sure "Header" is selected so the menu appears in your header.
6. Click "Publish" and then click the "<" arrow until you are back to the overall menu for the Customizer.
7. You can add additional pages to your website and then return to the menu editor to change the menu.
8. Note that this menu editor is related to your theme and different themes may change the menu editor a bit.