Creating a Website: Step-by-Step Guide

Table of Contents
COURSE PRE-REQUISITES .............................................. 3 MENU CUSTOMIZER ........................................................ 36
MENU LOCATIONS .......................................................... 37
ASSUMPTIONS REGARDING CONFIGURATION OF
POPULATING THE PRIMARY MENU ..................................... 38
NEWLY CREATED PENSCRATCH SITES ............................ 3
POPULATING THE SOCIAL LINKS MENU (OPTIONAL) .............. 42
PRELIMINARIES ............................................................. 4
CREATING A STATIC HOME PAGE ................................. 44
INTRODUCTION ............................................................ 4
COMMUNICATING WITH YOUR VIEWERS .................... 45
WORDPRESS.ORG VS WORDPRESS.COM ............................... 4
BLOG POSTS .................................................................. 45
STAY ON YOUR TOES… THINGS CHANGE FAST IN COMMENTS ................................................................... 46
TECHNOLOGY! .............................................................. 5 DELETING A BLOG POST ................................................... 52
TABBED BROWSING REVIEW ........................................ 5 SHARE BUTTONS............................................................. 53

CREATING A WORDPRESS ACCOUNT............................. 6 WIDGETS ..................................................................... 55

THE WORDPRESS ENVIRONMENT ............................... 10 REMOVING WIDGETS ...................................................... 55

ADDING WIDGETS .......................................................... 56
THE DASHBOARD ............................................................ 10 REORDERING WIDGETS .................................................... 58
LOGGING OUT................................................................ 13
LOGGING IN ................................................................... 13 ADDING “BUY NOW” FUNCTIONALITY ......................... 59

CHOOSING OUR THEME & NAMING OUR WEBSITE ..... 13 CREATE A PAGE FOR SALES ................................................ 59
INSERT AN IMAGE AND CAPTION FOR THE SALE ITEM ............. 61
ADDING A LOGO ......................................................... 15 CREATE A LINK FOR PAYMENT THROUGH PAYPAL .................. 61
FINDING A LOGO IMAGE ................................................... 15 EMBEDDING THE PAYPAL LINK INTO CODE FOR THE WEBSITE ... 64
INSERTING THE IMAGE INTO WORDPRESS ............................ 18 PASTING THE CODE ONTO OUR FOR SALE PAGE ..................... 65

THE MENU BAR AND A BRIEF LOOK AROUND THE ADVANCED EDITING FEATURES ................................... 66
WEBSITE ..................................................................... 19 DRAFTS......................................................................... 66
CREATING PAGES ........................................................ 20 PREVIEWING .................................................................. 66
SPELLCHECK ................................................................... 67
STEPS TO CREATE A PAGE .................................................. 20
SCHEDULED POSTS .......................................................... 68
ADDING CONTENT TO OUR PAGES .............................. 21
USER ROLES - LETTING OTHER PEOPLE EDIT YOUR SITE69
ABOUT PAGE - ADDING AND FORMATTING TEXT ................... 21
YOUR WORDPRESS PROFILE ........................................ 72
LINKS PAGE - INSERTING A HYPERLINK................................. 24
CONTACT PAGE - INSERTING AN EMAIL LINK (OPTIONAL) ........ 26 PROFILE PHOTO.............................................................. 72
DOCUMENTS PAGE - INSERTING A DOCUMENT ..................... 27 BACKING UP YOUR DATA............................................. 73
PICTURES PAGE - INSERTING PICTURES ................................ 29
GALLERY PAGE - INSERTING A SLIDESHOW ........................... 31 GUIDED TRANSFER .......................................................... 73
VIDEOS PAGE - EMBEDDING A VIDEO .................................. 32 EXPORT ........................................................................ 73
MAP TO THE STARS PAGE - EMBEDDING A MAP .................... 34

THE MENUS ................................................................ 36

 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

Created & Maintained by:

Andrea Philo
Mike Angstadt
MONTGOMERY COUNTY-NORRISTOWN PUBLIC LIBRARY
NORRISTOWN, PENNSYLVANIA
WWW.MC-NPL.ORG

Note to Home Students:

This lesson plan will occasionally refer to the “Temporary Patron Drive”, a storage
location on the Computer Lab’s computers. We save files to this location during
class. You may save files to your computer’s hard drive instead.
We preload the Temporary Patron Drive with an assortment of files that are used
during class. These files can be downloaded from on our Class Resources page. Our
class handouts and exercises can also be downloaded there. The website address is:
www.mc-npl.org/class-resources

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 2 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

Course Pre-Requisites
Computer Basics or test-out PLUS must be able to access a valid email account. Familiarity with
internet browsing software is a distinct advantage.

Assumptions regarding configuration of newly created Penscratch

sites
It took a couple of months to write this lesson, and in that time period we discovered that our chosen
theme for our website, Penscratch, changed quite significantly from when we started.
Therefore, this lesson is based on the following configurations of a newly created website that uses the
Penscratch theme.
1. Menu (top)
a. Home (blog page which includes a post with an image that has been added to the Media
Library, Post sharing buttons disabled)
b. About
c. Contact (which has a contact form)
2. The following widgets: Search, Text Widget, Recent Posts, Archives
3. Social links menu at bottom
4. New pages do not get automatically added to the menu

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 3 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

Preliminaries Show Slide 1

Welcome to Creating a Website! We are going to be using a web-based program called WordPress to
create our website. This means you will be able to access and edit your website from any computer on
the internet! We will need to create an account with WordPress in order to use the program. Part of
the account creation requires verifying your email address. WordPress will be sending an email to you
with a link you will have to click on. WordPress will not share your email address with any other entity.
To get ready, please open Firefox and log in to your email.

Introduction Show Slide 2

Before we begin our website I want to tell you a little more about WordPress.
WordPress is the most ubiquitous Content Management System, sitting behind 38% of websites on
the internet (as of May 2016). Although WordPress started out as a tool for creating blogs, over the
years new features have been added to the software which have seen it become increasingly used for
building regular websites. A blog is basically a journal that you write on the internet. Blogs consist of
entries called posts that appear on the opening page or “home” page in reverse chronological order,
with the most recent post appearing at the top of the page. A regular website, otherwise referred to as
a Static Website, typically has a fixed home page rather than displaying a list of posts from a blog.
The website we are going to create will be a hybrid one. We will have a static Home page and some
other static pages as well, plus we will have a page where we can blog.
For the purpose of this course, we are all going to make the exact same website so everyone is on the
same page. Our website is going to be about California. The co-teacher at the laptop will be making
this website as well so what he or she is doing on the screen should match what you are doing and you
can refer to it for guidance.
Show Slide 3
WordPress.org vs WordPress.com
As you develop you website, you may need to access help documentation to refresh your memory
about what you learned in this course, to learn new things, or to troubleshoot problems. In order to
do this, you should be aware of the difference between WordPress.org and WordPress.com.
WordPress.org WordPress.com
 Download source code and run on your  User-friendly—create a website without
own server technical knowledge
 For web developers and programmers  Hosting service
 Like buying a house  Runs the same software that’s on
WordPress.org
 Con: Not as customizable
 Like renting an apartment
We are using WordPress.com during this class. If you want to learn more about WordPress, use the
help resources and tutorials found on the .com site, NOT the .org site.
MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 4 of 73
(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

Stay on your toes… things change fast in technology! Show Slide 4

It’s important to be aware of how quickly things can change on the web (and with technology in
general). Whether the owner of a website is an individual like you or me, or a big company like Google
or Wordpress, people are constantly changing the way their websites look and operate. Keep that in
mind as you work through this (and any other) lesson, as the specific location, text, and images may be
different the next time you log in!

The best way to manage these changes is to think critically about what you see on the screen. Icons
& images are chosen to be intuitive so that you don’t necessarily need instructions to figure out how
they work. X’s close or delete things, + signs add things, <- -> arrows help you navigate. They may look
slightly different or move to different locations on the screen, but for the most part, the actions you
want to perform will still be there somewhere! If something doesn’t look or function exactly as you
learned, just take a moment to look around your screen and see if you can figure it out. You may just
surprise yourself .

Tabbed Browsing Review Minimize Slide Show

Before we begin, we must discuss a web browsing feature called tabs. A tab is a screen that has a
website inside of it. Web browsers let you have multiple tabs open at once. This lets you switch back
and forth between webpages quickly. We will be interacting with tabs extensively in this course.
1. Right now, we just have ONE tab open. This tab has our email inside of it.
2. To open a new, blank tab, click the “plus” icon. DO NOT click the “X” icon that’s next to it. That
closes a tab!

Close tab New Tab

3. Notice how our web browser now has TWO tabs open.

4. You can switch between tabs by clicking on the tab’s title. Click on your email tab to switch to
your email. Be careful NOT to click on the “X”—this will close the tab!

5. Switch back to the New Tab by clicking on it.

6. Let’s close the new tab. Click its “X” icon.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 5 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

7. We are now back to having ONE tab open (our email).

Creating a WordPress Account

Teacher’s note:
Remember: Students will need to switch back to their
email in order to activate their WordPress accounts.

1. Open a new browser tab and type www.wordpress.com into the address bar.
2. A website should load that has a button labeled “Create Website” or “Get Started. If you see more
than one button, let the teacher know. Click on the button.

Teacher’s note:
If the WordPress.com page has two buttons on it (“Create Website” and “Create
Blog”), select “Create Website”.
After students select “Create Website” the wizard may ask “What is your website
about?” and present a list of categories. This is simply a WordPress survey device. It
has no impact on the final website.

3. The next step asks how you want your homepage to look. We will select “Start with a blog”. This
layout will display a list of blog posts on our home page. We will talk more about what blog posts
are later.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 6 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

4. The next step offers some themes to choose from. A theme concerns the “look” of your website
and some of the functionality. We are going to come back to this setting, so just choose “Skip for
now” at the bottom.

5. The next step is where you will create your domain name. This is a very important step. Your
domain name should be easy to read and remember. If you enter a name that’s already taken,
WordPress will add some random numbers at the end of it in order to make it unique. In the
interest of time, we are just going to type our first name and accept whatever is suggested to us
that we can get for free.
a. Enter your first name and wait until a suggestion displays. It may take a few seconds.
b. Write down the “free” suggestion on the slip of paper we provided you. This will be the
URL of your website.
c. Accept the suggestion by pressing the Select button next to Free.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 7 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

6. The next screen asks us to choose a plan. Select the Free plan.

7. The next screen asks us to create a WordPress account:

Teacher’s note:
Student will have slips to fill in; one to keep and one to turn in.

a. Enter your email address.

i. When you are done typing wait a few moments for feedback.
ii. If a green border appears around the textbox, it means you can use that email
address.
iii. If a red error appears below the textbox, you might have used your email to create a
WordPress.com account in the past. If this happens, you will need to type in a
different valid email.
b. The Choose a username field will populate with your domain name. To save time we are
going to accept the username provided. (It can be changed later)

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 8 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

i. Write your username down on the slip of paper we provided to you.

c. Next, type a password into the “Choose a password” field.
i. Wait a few seconds to see if WordPress gives any feedback about the password such
as it being too weak. When the textbox border turns green, it means the password is
OK.

ii. Click the “eye” button to check what you typed.

iii. Write your password down on the slip of paper we provided to you.
d. Finally click the Create My Account button.
8. You are now at a screen with a Welcome message, and a notification that you’ll need to verify your
e-mail address.
a. Go to the tab where your email is and open the email from WordPress.
b. Click on the Confirm Now button in the email. This will open a new tab. Once the tab
finishes loading, close it.
c. Finally, return to the tab where your email is, log out of your email, and close the tab.
9. On the Wordpress Welcome screen, click Continue.
10. What you are looking at now is your website. Note the black bar at the top. Normally when a
website displays in a browser, it does not have a black bar at the top. The black bar is there
because you are logged into your WordPress account. Anytime you visit your site when you are
logged in, you will see the black bar.

Mention Handout 1

11. Typically the black bar is not used for much of anything except recognizing that you are logged in to
your website, however it does contain some buttons that will get you to an interface where we can
make changes to our site:
a. Click on the My Site link on the left. Notice how a menu appears on the left.
b. Click on Stats in the menu.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 9 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

12. Note the blue bar at the top of the screen. We have now been bounced from viewing our site to
the Dashboard. This is the place where we can make changes to our site.

The WordPress Environment

The screen we are on is called the Dashboard. We will be closely examining this environment as this is
where all the magic gets created!

Teacher’s note:
At the end of the WordPress environment section,
we will practice logging in and out of the website.

The Dashboard
When you first log in to WordPress you will be in the Dashboard. The Dashboard is “mission control”
for your website. It is where you create new posts, pages, add media, experiment with new themes,
and create custom menus. The Dashboard is composed of three sections:
 The blue toolbar across the top, which is called the Admin Bar.
 The left section, or Admin Sidebar, is where you navigate among the various tools.
 The right section is the Workspace.
Terminology from: https://learn.wordpress.com/get-comfy/
The Admin Bar
Let’s take a closer look at the Admin Bar from left to right.

Reader Tab

Click on the Reader Tab. When you first log in to WordPress, the Reader tab is typically the active tab.
Ironically this is not where you edit your website. The Reader tab resources have more to do with
managing your exposure to other WordPress websites and support communities.

My Site Tab

The My Site tab is the one that provides access to designing and editing tools for your website.

Create New Post

The first tool on the right side of the blue toolbar looks like a paper and pencil with the word Write
next to it. This is the Create A New Post Button. This button is a shortcut to creating a new post on a
WordPress blog.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 10 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

Profile

This button gives you access to many features of your WordPress account, which includes your public
profile information. If time allows, we will address the particulars of your profile settings later in the
course, but for now you should know that this button is how we will sign out of WordPress when we
have finished working in it.
 Click on the Profile button to locate the Sign Out button.
 Click on the My Site to exit the Profile section.

Notifications

This button is one that is present on many social media platforms. It is a hub for communications with
other WordPress users.
Click on the My Site tab now.
The Admin Sidebar
1. Note the tools listed on the Admin Sidebar that has opened up on the left.
2. Notice that Stats is the selected option. On the right is a box explaining the stats page. Clicking Got
It! Will display your webpage statistics.
Site Preview button
At the top of the Admin Bar is your Site Title, and a Site Preview button that is used frequently in order
to view changes to your website.

1. Click on the Site Preview button. A dialog window appears with your website inside it.
2. Notice the Dropdown menu at the top of the dialog that currently says Desktop. Clicking on it will
give you options for Desktop, tablet, and phone. You can ignore the Search and Social option as
that is for paid accounts. Clicking on each of these will show you what your website looks like on
each of these kinds of devices.

3. To navigate back to your Dashboard, click the “X” button in the top-left corner of the dialog.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 11 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

Stats button
Stats show you how often your website has been viewed within hours, days, weeks,
years etc.
Plan button
This button indicates which WordPress plan you are using (Free), and in the
Workspace there are links to upgrade to a paid plan. These are the features and limitations of the free
plan:
 Your own WordPress.com address, like “example.wordpress.com”.
 3 GB of storage space for uploading images.
 200+ free themes to choose from, with new options added weekly. (No premium themes are
included in this plan, but you can buy one at any time.)
 Basic customization: add pages and widgets, upload a custom header or background, integrate
with your social accounts, and more.
 Site statistics.
 Staff, volunteer, and community support in the WordPress.com forums.
 This plan provides no video storage and may show ads on your site.
Publish section
This section is where you select what type of content you want to add—a blog post
or a web page.
On our website we will be able to configure pages to accept blog posts and others
will be static Pages. A Page features static (unchanging) content that is created in a
different way than composing a post. This will become clearer as we begin creating
our own Posts and Pages further on in the lesson.
Personalize section
In this section there is a button that lets you change or customize the theme of your
website. The theme is the overall “look” of your website. Theme elements can
include colors, font styles, menu style and placement and more. We chose already
chose a theme when we first created our site—Penscratch.
Once a theme is chosen it can be customized by clicking on the Customize button,
located to the right of the “Themes” button. We will be using several of these tools
in class.
The Menu button is where you can control the placement and number of menus on your website.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 12 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

Configure section
This is where you manage sharing to social media, users, blog settings, domains, and
more.
Add New Site and Help

At the very bottom you will see Add New Site. We only click on this when we wish to
create an entirely different website rather than the one that we are working on now. Thus, this will be
important for after the class if you want to create a different WordPress website. When you have
more than one website, a SWITCH SITE button will be added above the Site Preview button.
To the right of Add New Site is a help button. Clicking this opens WordPress’s support documentation.

Logging Out
Before we go further, we are going to make sure we can readily log in and log out of our website. To
log out:
1. Click on the Profile button on the right side of the Admin bar.
2. Notice the Sign Out button on the Admin Sidebar on the left. Click it to log out.
3. Close the web browser.

Logging In
1. Open the web browser again and type “wordpress.com” in the address bar.
2. We are going to each log in to our individual WordPress accounts.
3. Locate the Log In link on the top right of the webpage.
4. Enter your email address (whichever email address you have associated with your WordPress
account) or your WordPress username and your WordPress password.
5. After you have logged in you should be on the Reader page. Click on My Site.

Choosing Our Theme & Naming our Website

Themes are templates that control what our website looks like. We’re all going to choose the same one
for class, but on your own you can play with different themes based on what you like.
1. In the Admin Sidebar of My Site click the Themes button (not customize!)
2. On the right side, you’ll see the current theme, a search box, and a bunch of suggestions. In the
search box, type Penscratch and hit enter.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 13 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

3. You should get one result. Click Penscratch 2 and you’ll be taken to a preview of the theme.

4. Click the Activate this design button, and then click Customize this design.

5. Now you’ll be in the site Customizer.

Note: Because your account is new,

WordPress may show you “tips” to help
explain what you see on the screen. If you
see a tip like this, you can click the blue
“Thanks, got it!” button to dismiss the tip.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 14 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

6. Notice that we no longer see our familiar blue Admin toolbar. We are deeper into an editing
environment called the Customizer.
a. On the right side you are previewing your website, in particular the Home page with some
samples of content you might want to have.
b. On the left side of the Customizer screen is a navigation button to allow you to get back to
the dashboard. It looks like an X.
c. Near the X button there is a Saved button which will change to a Save and Publish button
after we have made changes.

7. On the Customizer Sidebar look for Site Identity and click on it.
8. The Site Title box on the left will be populated with the current name of your site. Clear out
textbox and then type “California”.
9. In the Tagline field type “The Golden State”
10. Notice how the preview on the right has updated and the Saved button has changed to Save &
Publish.
11. Click on the Save & Publish button.
12. When the Save & Publish button changes to Saved, click the X to the left, and then click on My Site
in the top left corner. You will be back in the Dashboard environment.
13. Click the Site Preview button to view our live website. Note our website name and the tagline.
Next we will add an image “logo” to this section of the website.
14. Close the preview dialog.

Adding a Logo
A logo can be a design you create in a graphics program, a photograph of your own, or an image you
find on the internet. For the purposes of this class, we are going to look for a photograph on the
internet.

Finding a Logo Image Mention Handout 2

Understanding the use of Images found on the Internet

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 15 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

If you decide to use any other than your own photographs on your website, you need to be aware of
image usage rights. For instance, a Google Image search can yield thousands of results but there may
be licensed restrictions on their use. Many web designers take the worry out of this by using websites
that provide search engines for various collections of free-to-use images.
https://www.flickr.com/creativecommons/ - This website provides very good definitions of various
licenses and restrictions that uploaders of images can place on their use: You may want to consider
obtaining such licenses for your own photographs.
Sources of Good Quality images for free
Note that, even if a photo is free to download, there may be certain restrictions regarding its use, such
as attributing the original author or using it for non-commercial purposes.

Pexels www.pexels.com
Flickr CC www.flickr.com/creativecommons
Wikimedia Commons commons.wikimedia.org/wiki/Category:Images
The Stocks thestocks.im
Unsplash unsplash.com
Gratisography www.gratisography.com
Stock Up www.sitebuilderreport.com/stock-up
imagesource www.imagesource.com
pixabay pixabay.com

Searching for and saving a free-to-use image

1. Open a new browser tab.
2. In the address bar type pixabay.com and press Enter . Pixabay is a website that provides images
that you can use freely for your own purposes without having to ask permission or pay money).
3. In the search box, type “California” and hit the search button.
4. Click on the “Sunset in San Diego” image.

5. When it opens, look for the green Free Download button on the right and click it.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 16 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

6. Accept the size that’s already selected (Pixabay requires you to create an account in order to
download the highest quality image).

7. Next, you may have to enter a CAPTCHA code.

8. Save the image to the computer’s hard drive.

a. A file download dialog will appear. Select Save File and click OK.

b. In the “Save As” dialog box, navigate to the Temporary Patron Drive in the left pane

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 17 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

c. In the file name field, enter Sunset in San Diego. Make sure all the numbers are deleted.
The image’s file name will be visible in certain places on the website, so it should look nice.
9. Close the browser tab that contains Pixabay.
10. We are back in our Dashboard.

Inserting the image into WordPress

1. In the Themes section on the Admin Sidebar, click the Customize button.
2. Click on Site Identity.
3. Click on Change Logo.
a. This opens a large display where we can add saved images to our WordPress Media Library.
Once we upload an image, we will no longer need to keep the image on our computer’s
hard drive.
b. Notice this display has two tabs, Upload Files and Media Library. Upload Files is the active
tab.

Note: Each website in your WordPress

account has its own Media Library.

4. Click the Select Files button in the center of the display.

5. Make sure the Open dialogue is looking at the Temporary Patron drive and locate your Sunset in
San Diego file in the content pane on the right.
6. Click on the Sunset in San Diego file to select it and then click Open.
7. Notice that we are automatically taken to the Media Library tab and our image loads there. Click
on Select to upload the image as the logo image.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 18 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

8. Now you’ll be asked to Crop the image. This allows us to select only a portion of the image to
display as our logo. For now we’ll Click the Skip Cropping button on the lower right.
9. Notice the preview on the right has updated. Remember that this is just a preview—our changes
won’t be saved until we click Save & Publish.
10. Click on Save & Publish.
11. Then click on the X button to the left of the save button. You will be back in the Dashboard.

The Menu Bar and a Brief Look around the Website

Click on the Site Preview button. Note that, underneath the name, tagline and logo section of our
website, there are three text entries: Home, About and Contact. These entries are links to sections of
the website (called Pages). They make up what is referred to as a Menu Bar.
The Menu Bar is a typically a horizontal bar located near the top of a website. However, sometimes
menu bars can be along the right side or even at the bottom. Scroll to the bottom of the page to see
the Social Links menu (the four circular buttons on the right). Menu bars are always visible, no matter
which page on your website you are currently viewing.
The Penscratch theme provided, by default, three sections for our website. These sections are referred
to as Pages. Let’s take a look at our Pages.
1. When a user goes to your website they typically will land on the Home page. That is what we are
looking at now.
a. Scroll down a little to view the content which is titled First blog post.
b. The Home page in a WordPress website is typically used for posting Blog content so
Penscratch has placed a sample blog post on our Home page.
c. Blog posts can be compared to journal entries. They are the thoughts of the author and
display in chronological order on a webpage. They can be informational as well as personal.
2. Click on the menu bar link to navigate to the About page. This page has some sample content as
well. We will be editing this content in the next section of the lesson.
3. Click on the menu bar link to navigate to the Contact page.
a. Note that this page is populated with a form. Website visitors can use this form
communicate with you. Contact forms allow website visitors to communicate with you
without them needing to know your email address. When a visitor uses this form,
WordPress will send the information to the email address that you used to create your
WordPress account.
b. Note that the Contact form looks like it is filled in with your information, but it is only
appearing that way because you are logged in to your website. A visitor would see blank
fields which they would fill in with their information.
4. Close the preview dialog to return to the Dashboard.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 19 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

We should probably take this opportunity to remind you that this website is, in fact,
out there on the internet right now and is therefore potentially able to be discovered
in a web search. Since this isn’t a “real” website, and your email address, although
protected by WordPress, is associated with it, we strongly recommend that you delete
it when you are finished with this course.

Creating Pages Mention Handout 3

Now we are going to create more “sections” for our website. The sections again are referred to as
Pages. We will add links to these pages in Menu Bar.
Links, Pictures, Videos, Documents, Gallery and Map to the Stars

Steps to create a page

1. If you are not already there, navigate to the My Site tab in the dashboard.
2. Select the Pages section in the Admin Sidebar. The list on the right shows the pages which are
currently published on our website, namely; About, Contact and the Blog Posts page.
a. The Blog Posts page is listed as “Home” on the menu. It is a “special” type of page that will
be explained later in the lesson. It cannot be deleted.
b. When these page entries are clicked you can edit the content on the page. We will be doing
that shortly.
3. Click on the Add button next to the Pages menu item. The workspace on the right is called the
Editor. This is where you edit page content.
4. Notice the Title field. This is where we will give our page a name.

Teacher’s note:
If the label for the “Title” field is not visible, click in the
workspace textbox (The large blank area underneath the Editor
toolbar). This should cause the “Title” field label to appear.

5. Note that directly underneath the Title field is the permalink field. Right now, this shows the URL
for your website. When we publish the page to our website it, will change to unique URL.
6. Click into the Title field and type a page name, in this instance, Links.
7. Once you have done that, on the Toolbar on the right side of the page, click Publish.

8. Wait until you see the green Confirmation Bar appear before proceeding with anything else.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 20 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

9. Note the permalink has changed, now reflecting the URL for the Links page.
10. Note also the Publish button now says Update.
11. Click the Back button in the top-left corner of the page to get back to the Pages section of the
Admin Sidebar.

12. Notice how an entry for our newly created Links page was added to the list.
Using the steps above, create the following pages: Pictures, Videos, Documents, Map to the Stars, and
Gallery.)

Adding Content to Our Pages

We have created several pages for our website. We are now going to add several different types of
content to our pages. We will be placing hyperlinks, inserting pictures, inserting videos and adding and
formatting other types of content as well.
To get started, make sure you are in your Dashboard with the Pages section selected on the Admin
Sidebar.

About Page - Adding and Formatting Text

An About Page typically consists of detailed information regarding the creator of the website and why
they are knowledgeable regarding this topic. In the interest of time we are simply going to add a
couple of lines of text to our About page. In doing so we will learn about the Editor and the tools it
contains to format our pages and add special features.
In the list of published pages click the About page to “open” it.
The Editor
Mention Handout 4
When you open a page for editing it opens in an environment called the
Editor. The editor has several sections which are described below.
Note: When you click on the About page, you may see a large image at the top that Wordpress placed
there by default. You’ll need to scroll down to see the rest of the content.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 21 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

Title field Tabs

Permalink

Toolbar

Workspace

1. Note the Title field that contains the word About.

2. Note also the hyperlink for our About page. In WordPress this is referred to as a Permalink.
3. Underneath those sections is a toolbar. The toolbar has two tabs in order to switch to different
views of the content on the page, the Visual tab and the HTML tab.
a. Click on the HTML tab if it is not already the active tab. You will see text without any
formatting and also some HTML tags. HTML is the “code” that webpages are written in.
Thanks to the Visual editor you will not have to concern yourself with HTML code.

b. Click on the Visual tab. This view shows you an approximation of what your content will
look like when it is displayed on your webpage.
4. Underneath the toolbar is the Workspace. It contains the content of your page. Note the existing
content that came with the page.
MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 22 of 73
(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

Editing and Formatting the Page Content

1. Select the text in the Workspace and use the Delete key to clear it.
2. Type “My name is _________ and I have lived in California for 40 years. I hope you enjoy my
website!”
3. Let’s apply some formatting to our text:
a. Select your name and apply Bold formatting by finding and clicking on the Bold button.
b. Select “40 years” and find and apply an Underline. If you cannot see the Underline tool,
expand the toolbar by clicking on the three dots on the right.
c. Make the second sentence appear on a new line by clicking at the end of the first sentence
and pressing Enter on the keyboard.
d. Select the second sentence. Find the Text color button and apply a different color.
e. Locate the Undo button to undo your color selection.
f. Apply a different color.

b d, f e

Updating and Viewing the Page

1. When you are finished editing, click the Preview button.

2. This is just like the View Website button, but it shows you what your new changes will look like
before you save them. This is a handy feature to verify your changes before publishing them for the
world to see.
3. Click the X to close the preview dialog.
4. Now click the Update button. This saves your changes and publishes them to the website for all to
see.
5. Wait for the green confirmation bar to appear and then use the View Page link on that bar to view
the page.
6. Click the X to close the View Page dialog.
7. Click the Back button to navigate back to the list of published Pages.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 23 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

8. If you get a popup saying you have unsaved changes, click OK. This is a WordPress bug—
WordPress thinks we have unsaved changes, but we don’t!

Links Page - Inserting a Hyperlink

The intent for this page is to offer the user other resources on the topic of our website. In our case the
other resources are going to be hyperlinks to other websites.
Searching for Content
1. First we are going to search for the website we want to add to our Links page.
a. Thought should go into websites that you want to link to. You should be sure you have
evaluated them for up to date and authoritative content.
b. In our case we are going to look for a state sponsored tourism website.
2. Open a new tab in the browser. In the search box type California state tourism.
3. Find the search result for visitcalifornia.com (it should be on the top). Click on it to visit the site.
4. Select the URL in the address bar of the browser tab and copy it.
5. Close the browser tab.
Editing the Page
1. Back in our Dashboard, open the Links page from the published pages list on the right.
2. Make sure the Visual tab is the active tab on the toolbar.
3. Insert your cursor into Workspace underneath the toolbar.
4. Locate the insert hyperlink tool on the toolbar and click on it:

5. A dialogue opens with options for inserting a URL on a webpage.

a. The bottom half of the dialogue, where it says Link to Existing Content is for inserting a link
to a different page on our own website.
1. Choosing one of our own pages will automatically fill in the URL and Link Text.
b. The top half is used for inserting a link to an external (not our) webpage. That is the part we
will be using.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 24 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

6. Paste the URL we just copied into the URL field.

7. In the Link Text field, paste the URL again 6

a. It is standard web design practice to include

the actual website URL name in the link text. 7

However, you can delete the protocol 8

portion. Also, it is common practice to
delete the slash at the end of the URL as well.
b. Using standard text editing skills, delete the
protocol and the slash.
8. Check the Open link in new tab/window checkbox. This
will cause the link to open in a new window or tab. This
is for ease of navigation back to our website. When
users are finished visiting our linked website, they
simply close the browser tab to return to our website.
This eliminates the accidental closing of our website.
9
9. Click the Add Link button in the dialogue.
10. Back in our Editor, note the hyperlink.
11. Click once on the hyperlink and note the small, popup toolbar that appears.

a. Point to the icons in the toolbar and note the screentips.

b. Click on Edit and note it opens the Insert hyperlink dialogue again.
c. Cancel the dialogue.

d. Remove turns the hyperlink into normal text so it won’t be clickable anymore.
12. So that users know a little more about the website before they visit it, we are going to add a
descriptor to the link.
a. Insert your cursor at the end of the hyperlink, then hit Enter

b. Locate the Increase Indent tool on the toolbar and click it.
c. On the indented line, type Official State Website.
Previewing, Updating and Viewing a Page
1. You can preview what your site will look like before publishing any changes to the web for
everyone to see.
MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 25 of 73
(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

a. To Preview, click the Preview button in the top right of the screen.
b. Your site will display in the Preview Dialog.
c. Once you verify that it looks the way you want it to (or doesn’t), close the Preview

Dialog using the X in the top left corner.

d. Make any necessary changes, preview it again to confirm, then…
2. When you are finished editing, always click the Update button.
3. Wait for the green confirmation bar to appear and then use the View Page link on that bar to view
the page. This is the published version of your website. Anyone in the world can see it.
4. Click the X to get back to the Dashboard.

5. Click the Back button to navigate back to the list of published Pages.

Contact Page - Inserting an email link (Optional)

An email link, called a “mailto” link, can be used to quickly send an email to someone. When clicked, it
causes the computer’s default email program to open and then start composing a new email.
Editing the Page
1. Open the Contact page.
2. Insert your cursor at the end of the first sentence and press Enter .
3. Type in [email protected]. This is a fake email address. We do not want to use your real email
address because your website is actually on the internet now and accessible by anyone.
4. Select the email address and click the Insert/edit link tool on the Editor toolbar.

5. A dialogue opens.
a. Notice how it has placed a mailto link in the URL field.
b. Notice how it has inserted the link text for you.
c. Leave Open link in a new window/tab unchecked—it is not necessary to force mailto links
to open in a new window or tab.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 26 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

6. Click the blue Add Link button.

7. Click the Update button on the sidebar and wait for the green confirmation bar to appear.
8. Use the View Page link on the green bar to view the Contact page.
9. Click on the email address when the page opens. In the Computer Lab an error occurs, but in other
environments an email program would launch.
10. Click the X to get back to the Dashboard.
11. Click the Back button to navigate back to the list of Pages.

Documents Page - Inserting a Document

The purpose of this page is to provide to our users files which can be downloaded and saved to their
computers. First we will create a file and then we will add it to our Documents page. We’ll use
Microsoft Word to create the file and we will save it in a .pdf file format that will be able to be opened
on the majority of computers. (This functionality is native to Microsoft Word 2007 and newer)
Creating a Downloadable File
1. Using the Start menu, open Microsoft Word
2. Type each of these words on a new line in the document: shorts, t-shirts, underwear, swimsuit,
flip flops.
3. From the File menu, select the Save As command. In the Save As dialogue box, in the pane on the
left, navigate to the Temporary Patron Drive.
4. In the File name field type Printable Packing List.
5. In the Save as type field, select “PDF”.

Note: PDF is a file format that is widely supported across all kinds of computers and mobile
devices. Nearly all computers come pre-installed with software that can open PDF files. If
your computer does not have this software, you can download software called “Adobe
Reader” for free. Note that PDF files cannot be edited unless you purchase special software.

6. Click the Save button and then close Adobe Reader and Microsoft Word. Do not save changes.
Editing the Page

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 27 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

1. Open the Documents page in the Editor

2. Make sure you are on the Visual tab and click on the Insert Content button.

3. Click on Documents in the Media Library menu.

Note: This is not a necessary step, but if you are uploading many files to your
WordPress, it may help you to stay organized. Note there is a tab for images and an
ALL tab. The ALL tab will show all your uploaded files regardless of type.

4. Click on Add New

5. In the Open dialogue, navigate to the Temporary Patron Drive and select and open Printable
Packing List.pdf
6. Notice how the file we uploaded has appeared in the Media Library and is selected.

7. There are also a few controls in the top right of the Add Media dialog.

a. The Magnifying Glass allows you to search your media for a specific file. This is useful
when you’ve uploaded a lot of files for use on your website.
b. The bar with the Blue Dot allows you to zoom in and out on the files displayed in the
Add Media dialog.
c. The gray bar that says 0% of 3GB used indicates how much of your allocated space
you’ve used up. The free version of Wordpress gives you 3GB of storage for your
website(s) and media.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 28 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

8. Click on the Insert button. When a document is inserted from the media library, it is inserted as a
hyperlink.

9. Update your page and click on the View Page link on the green confirmation bar.
10. Click on the Printable Packing List link. The document will open in an Adobe Reader window.
11. Close the Adobe Reader window.
12. Click the the X to close the view page dialog and get back to the Dashboard.
13. Click the Back button to navigate back to the list of published Pages.

Pictures Page - Inserting Pictures

The intent for our Pictures page is to offer the user some pictures that will inspire them to explore
California. We are going to search for three pictures and make them display, along with captions, on
the Pictures page.
Searching for and saving a free-to-use image
Just like we did with our site logo, we are going to download some free-to-use images from
pixabay.com.
The instructions below summarize the steps required to download photos from this website. For more
detailed instructions, review the Adding a Logo section above.
1. Open a new tab in the browser and in the address bar type pixabay.com, and press Enter .
2. In the search box, type “California” and click the search button.
3. Download three images of your choice to the Temporary Patron Drive.
a. Remember not to select any images from the first row—these are sponsored images and
cost money to download.
b. Also remember to give the files meaningful names.
4. Confirm that you downloaded three images.
a. Open the Start Menu and click Computer.
b. Navigate to the Temporary Patron Drive.
c. Confirm that there are three images.
d. Close the Computer Window.
5. Close the pixabay.com browser tab to return to the Dashboard.
Uploading the image to the Media Gallery and Adding it to Our Pictures Page
MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 29 of 73
(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

1. Open the Pictures page.

2. In the Visual Editor, click the Insert Content button.
3. When the Media Library opens, click on Add New.
4. Navigate to the one of the images we saved to the Temporary Patron Drive.
5. Select the image and click Open. The image will upload to the Media Library.
6. Point to the image (which is already selected since it just uploaded). Note the edit and delete
buttons that appear above.

7. Click on the Edit button. This causes a dialogue to open that lets us edit information about the
picture. On this screen we are going to add a caption to the picture.

Teacher’s note:
Captioning can be done in either the Media Library before insertion into a page or in the
Editor after insertion. The caption that is added in the Media Library will populate the
caption field in a slideshow (and vice versa). Captions changed in the Editor do not affect the
Media Library caption.

8. Click in the Caption field and type a descriptive name for your picture.
9. Copy the text you just entered and paste it into the Alt text field. Screen reading software will use
this content to name the picture for the visually disabled.
10. Click Insert.
11. We need to get to a new line to insert another picture underneath this one.
a. If you see an I-beam cursor in the caption section of the image, press Enter on the
keyboard and your cursor should move to a new line.
b. If you can’t see an I-beam cursor click off and on the image until you see an I-beam cursor in
the caption section of the image and then press Enter on your keyboard. This action moves
the cursor to the next line workspace.
12. Repeat the steps above to insert another picture.
13. For the final picture, follow the steps above BUT SKIP THE STEPS ABOUT ADDING A CAPTION.
14. Finally, preview the Pictures page to verify it looks the way you want, and then update it. You can
then click on View Page if you’d like to see what the published version looks like.
15. Note that two of our pictures have captions and one does not.
16. Close the view page dialog to get back to the Dashboard.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 30 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

17. Click the Back button to navigate back to the list of published Pages.
Modifying Images - WordPress Limitations and Browser Issues
We have experienced less than impressive results when attempting to modify inserted images in
WordPress. There really is very little by way of modification that the software allows you to do.
For example, we encountered the issue of moving the cursor to a blank area in the workspace. We also
discovered that we could not resize pictures, at least not while using Internet Explorer. We were able
to resize in Firefox.
It is important to bear in mind that when you are designing webpages in WordPress, the browser can
play an important role in how easy or difficult it is to accomplish certain tasks. It is a known issue that
web developers do not particularly like Internet Explorer and will often design their websites with
other browsers in mind, such as Chrome or Firefox.
The takeaway here is that if you are unable to accomplish a particular task in one browser, open your
site in a different browser and see if you have better luck.
It is also important to test to see how your website looks in other web browsers to make sure it looks
consistent no matter what browser is being used.

Gallery Page - Inserting a Slideshow

Once you have several pictures loaded into the Media Library, a Slideshow is a very easy feature to add
to your website. We’re going to insert our slideshow on our Gallery page.
1. Open the Gallery page
2. Click on the Add Media button.
3. Select the four pictures about California (the sunset one we used for our logo and the three we
added to the Pictures page) by clicking once on each of them.
4. Notice how each image is given a number. This is the approximate order that the photos will be
displayed in (depending on the slideshow style, as we will see)).
5. Click the Continue button
6. Under Layout, select Slideshow
7. A Preview of the slideshow will appear in the preview tab. Note that, if a image has a caption, it will
appear at the bottom of the image.
8. Note we have two pictures without a caption: our original logo picture (Sunset in San Diego) and
another one of your choosing. Let’s add captions to those images.
a. Click on the Edit tab.
b. The slideshow pictures will appear and their captions are able to be edited.
c. Add a caption to the pictures that need them by clicking in the “Caption this image”
textbox. Note that if you forget what the picture is, you can point to the picture and the file
name screen tip should jog your memory.
MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 31 of 73
(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

9. Finally, click the Insert button to add the slideshow to your page.
10. Update the Gallery page and View it.
11. Close the view page dialog and navigate to the published Pages list in the Dashboard.
12. Note that if you clicked through the slideshow, you may need to click back 4-5 times before you get
back to the Dashboard.

Videos Page - Embedding a Video

Youtube.com is a very common website where user-uploaded videos can be found. Type in just about
any topic and you will find videos. These videos are published by amateurs and professionals alike. You
could even make your own videos with your smartphone and publish them to Youtube!
1. Open the Videos page from the list of published pages. This is where we will insert our video.
2. Open a new browser tab and type youtube.com in the address bar, and press Enter .
3. In the search box on YouTube, type “skateboarding california”.
4. Select one of the videos in the search results.
5. The video will start to play so you can preview it.
6. If you want to put it on your website, click the Share button (see pictures below).
1. We are going to Embed the video on our site. This is a way of displaying someone else’s
content from an external website directly within our own page. Embedded media does
not count against your allocated Wordpress storage.
7. Share options will appear below. Click Embed (see pictures below). Depending on Google’s mood
today, it may look like one of the two screenshots below:

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 32 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

1. If it looks like this…

8
7

2. Right-click on the selected text and select Copy.

3. If it looks like this…

4. Click the Copy button in the bottom right.

8. Switch back the browser tab with WordPress in it.
9. Select the HTML tab and then right-click inside the page content space and select Paste.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 33 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

10. Update the page and view it. You will see the video. Click the Play button to watch it.
11. Close the view page dialog and the YouTube tab.
12. In the Dashboard, navigate back to the published Pages list.

Map to the Stars page - Embedding a Map

Embedding a map is similar to embedding a video. We’re going to do a Google search for a map of
movie star homes in the Beverly Hills area.
1. Open a new tab and type “star homes in beverly hills” and press Enter .

2. In the results list look for this entry an click it:

3. Someone has created a custom map to stars homes. Look for the SHARE link in the left sidebar and
click it.

4. On the menu that drops down, find the link for Embed on my site and click it.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 34 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

5. An Embed this map dialogue box pops up in which the HTML code for the map is already selected.
Press Ctrl + C to copy it and click OK.

6. Switch to the tab with the WordPress Dashboard. Navigate to the published Pages list and select
the Map to the Stars page to edit it.
7. Switch to the HTML editor view if you are not already there.
8. Type Ctrl + V to paste the HTML code.

9. Update the Map to the Stars page and View it.

10. Close the view page dialog and then close the tab with the map in it.
11. Navigate to the published Pages list in the Dashboard.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 35 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

The Menus
In order for users to see the content on our Pages, they need a means of navigation to them. That is
what menus are for. You may not want all of your pages on your menu, but for the purpose of this
class, we will be adding all of our pages to a menu.
Click on the Menus button in the Admin toolbar. This is where all the menu manipulation will take
place.

Menu Customizer
The menu customizer is split into two sides:
 The sidebar on the left allows you to manipulate menus.

 The right side shows a preview of your site. Anywhere you see the icon on the preview,
you can click it to edit the associated item.
o You can use the buttons on the bottom left to change the preview window between
desktop, tablet, and phone views, or to hide the control bar completely.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 36 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

In the top of the sidebar (upper left of your screen) there are a few options:
 Menu Locations – Allows you to manipulate where on your page the menus display. Our theme
(Penscratch) only allows two menu locations.
 Primary – This is the primary menu bar at the Header (top) of your site, which currently has
links to your Home, About, and Contact pages.
 Social Media – This controls the social media icons that display at the bottom of your site.

 There is also a button to Add a Menu, which allows you to add a new menu to your site.

Menu Locations
Let’s see where these menus are located on our website.
1. Click the Menu Locations button.
2. View the preview on the right side.
a. Note the Header Menu area with the links to Home, About and Contact underneath our
logo.
b. Note the Social links menu area at the bottom right. The links are in the form of icons rather
than text links.

3. Look back on the left side of your screen, in the sidebar.

a. Note that it tells us that our theme only supports 2 menu locations: The Header location at
the top of your page, and the Social Media location, at the bottom.
b. You can use the drop-down menus beneath each location to adjust which menu displays at
that location.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 37 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

c. Change the drop-down menu beneath Header to Social Media. Notice in the preview how
the menu bar beneath your logo now reads Facebook, LinkedIn, Twitter, Instagram.
d. Change it back to Primary and notice how the menu bar says Home, About, Contact again.
e. Go back to the main menu customization screen by using the Back button at the top left of
the sidebar.

Populating the Primary Menu

Mention Handout 5
1. Select Primary from the sidebar.

2. From here you can edit the menu’s name, add/remove/edit/reorder menu items, adjust the
display location, and even enable an option to automatically add new pages to the menu.
a. Note that the menu name (currently Primary) does not display anywhere on your site. It’s
just used for reference when editing the menus.
Adding an existing page to the menu

1. Click on the Add Items button.

2. A second sidebar will appear to the right of the original sidebar. Also notice that the small down
arrows next to each existing menu item have become red X’s.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 38 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

3. This new sidebar allows you to add a few different kinds of links to your menu:
a. Custom Links – Links to external (not our own) sites
b. Pages – Links to pages within our own site
i. You can even add a new page to your site directly from here!
c. Posts – Links to individual blog posts within our own site
d. Categories – Posts can be tagged with categories. This option lets you create a menu item
that will show all posts tagged with a certain category
e. Tags – Wordpress uses tags to get more specific within categories. For example, you might
categorize a post as “Comedy”, but tag it as “Robin Williams”
4. We are going to link to our own pages. The pages section should already be selected for you.

5. Click the + button next to Gallery. Notice how Gallery shows up beneath contact on the sidebar on
the far left. Also notice how there is now a check mark next to Gallery in the list of pages.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 39 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

a. Go through the list of pages and add a menu item for each page except Home, About, and
Contact (which should already have menu items).
b. If you make a mistake, you can delete an item by clicking the red x next to it.
a. Use the scroll bar to see your complete list of pages.
6. Click the Save & Publish button and wait for it to say Saved.

7. Look in the preview window to see all of your new menu items.
Adding a new page to the menu
Instead of adding pages through the Pages section of the Dashboard, it is also possible to add pages
through the Menu.

1. Click on the Add Items button again.

2. Click in the text box that says Add New Page.

3. Type Testimonials and click the Add button.

4. Notice how Testimonials now shows up on the bottom of the Primary menu list on the left hand
sidebar.
8. Click the Save & Publish button. Wait for it to say Saved.
9. Notice that Testimonials has been inserted to the right (or on a new line!) of the Links entry on the
menu.
Re-ordering the Menu items
We are going to place most of the pages in alphabetical order on the menu, bookended with the Home
page and the Contact page. We will leave the Testimonials page where it is. Then we will make two of
the pages “child” pages and observe how that impacts the look of the menu on our website.
Navigate to the menus section of the Dashboard if you are not already there.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 40 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

Moving menu items

There are two ways to move menu items:
1. Drag & Drop – Lets you use the mouse to drag and drop menu items where you want them to
appear.
2. Reorder – Lets you use arrow buttons to reorder the menu.
We’ll move half of our menu items using one method, and the other half with the other method. In the
future, you can choose whichever method you find easiest.
The Drag & Drop method requires precision.
 MAKE SURE you drag straight upwards (or downwards)
 Do not move your mouse even slightly to the right.
1. Point to the Documents menu item with your mouse and holding the left mouse down, drag
straight upwards to underneath the About menu item and then let go.
2. Follow this same method to move Contact to the second to last position (ahead of Testimonials),
then be sure that Gallery and Map to the Stars are positioned in order after Documents.
3. Press the blue Save & Publish button and wait for it to say Saved.
Menu items that live underneath a first tier menu item are sometimes called subpages or “child”
pages.
4. Now let’s make Map to the Stars a subpage beneath Documents.
a. Drag the Map to the Stars menu item upward until it is underneath Documents. Before
you let go of the mouse, move the mouse slightly to the right. Notice how the menu item
has indented slightly to the right. Let go of the mouse.
We’ll move the other items using the Reorder method.
1. Click the Reorder button.
2. Notice the arrows next to each menu item, and that the Reorder button now says Done.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 41 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

3. Use the up and down arrows to put Videos, Pictures, and Links in alphabetical order, remembering
to leave Contact and Testimonials at the end of the list.
4. Press the blue Save & Publish button and wait for it to say Saved.
5. Let’s make Gallery a subpage of Pictures.
a. Use the down arrow to move Gallery so it’s below Pictures
b. Then use the right arrow button to make it a subpage.
6. Click Done.
7. Press the blue Save & Publish button and wait for it to say Saved.
Deleting a menu item
1. Click on the down arrow button next to the Testimonials page menu item.
2. Scroll down until you see Remove and click it.

8. Press the blue Save & Publish button and wait for it to say Saved.

Populating the Social Links Menu (Optional)

The Social Links menu can be used to link to all your social media profiles
(such as your Facebook and Twitter accounts). In the Penscratch theme,
which is the theme we’re using, this menu is located at the bottom of each
page and uses icons instead of text labels.
1. Make sure you are in the Dashboard.
2. Click on Menus.
3. Click on Social Media.
4. Next, let’s edit the Facebook item to go to our personal Facebook page. For demonstration
purposes, we will pretend we are Richard Branson.
a. Click anywhere in the Facebook menu item to edit it (the section will expand).
b. In the URL field, place the cursor at the end of the Facebook URL and type /richardbranson
so it reads http://www.facebook.com/richardbranson

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 42 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

i. Note that the entire URL will not display because the URL field is too small.
That’s OK, it will scroll as you type!
c. Click anywhere in the Facebook bar again to collapse it.
5. Now, let’s edit the Twitter item.
a. Click anywhere in the Twitter menu item to edit it (the section will expand).
b. In the Link Address (URL) field, place the cursor at the end of the Twitter URL and type
/richardbranson so it reads http://www.twitter.com/richardbranson
c. Click anywhere in the Twitter bar again to collapse it.
6. Now, let’s edit the LinkedIn item.
a. Click anywhere in the LinkedIn menu item to edit it (the section will expand).
b. In the Link Address (URL) field, place the cursor at the end of the LinkedIn URL and type
/in/rbranson so it reads http://www.linkedin.com/in/rbranson
c. Click anywhere in the LinkedIn bar again to collapse it.
7. Now, let’s delete the Instagram item. Instagram is a photo sharing app owned by Facebook.
a. Click anywhere in the Instagram menu item to edit it (the section will expand).
b. Click the red remove button.
8. Next, let’s add a menu item for our Google Plus account. Google Plus is Google’s answer to
Facebook.
a. Click the Add Items button.
b. Click Custom Links at the top of the new sidebar that opens (it’s the same sidebar as when
we added links to our Primary Menu).
c. In the text box where it says Link Text, type “Google Plus”.
d. In the URL field, place your cursor after http:// and type plus.google.com/+RichardBranson
e. Click Add to Menu.
9. Press the blue Save & Publish button and wait for it to say Saved.
10. Scroll down to the bottom of the preview panel to see your updated menu.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 43 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

11. Close the menu customizer to return to the Dashboard.

Creating a Static Home Page

Most WordPress themes will assign the “Home” page as a blogging page, as is ours currently.
However, if you don’t want to use the blogging functionality, or want to move your blog posts
somewhere else, you can make your “Home” page be a static page instead.
Websites don’t need to have a blogging page, but they are nice to have as a means of direct
communication with your viewers or customers. Not only can you post news items about your
content, but viewers can respond by adding comments to the blog posts.
1. Make sure you are in the Dashboard.
2. First, we need to create a page for where we want our blog posts to go. We will not put any
content on this page—it will act as a placeholder of sorts.
a. Click the Add button next to Pages in the sidebar.
b. Type “Latest News” in the page title field.
c. Click Publish.
3. Next, let’s add the page we just created to the menu.
a. Click Back, then select Menus in the sidebar.
b. Make sure you are viewing the Primary Menu.
c. Let’s insert the menu item after Home.
i. Click Add Items.
ii. Click the + button next to Latest News from the list of pages.
iii. Move Latest News so that it is located just below Home using either the Drag & Drop
or the Reorder method..
d. Click the blue Save & Publish button and wait for it to say Saved.
e. Then exit the Menu Customizer by using the X in the top left corner.
4. Next, we need to create a page that will serve as our static home page.
a. Click the Add button next to Pages in the sidebar.
b. In the page title, type ”Home”. Note that you can call this page whatever you want.
c. In the Editor type, “Welcome to my California website.”
d. Click Publish.
5. Note that we will NOT be adding this page to the menu. If we did, then we would end up with
TWO “Home” links in the menu.
6. Now, we need to customize our theme to tell it to display a static home page.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 44 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

a. Click Back to return to the Dashboard.

b. Click the Customize button next to Themes.
c. Click on Static Front Page in the sidebar.
d. Under the Front page displays heading, select A static
page.
e. Notice how two dropdown lists appear below.
f. For Front page, select Home. This means that WordPress
will put the contents of the “Home” page we just created
on our website’s front page.
g. For Posts page, select Latest News. This means that
when a visitor goes to the “Latest News” page we just
created, they will see a list of our blog posts.

Note: If you don’t see the “Home” or “Latest News” page in either of
these lists, click your browser’s “Refresh” button and try again.

h. Click Save & Publish.

i. Close the Customizer by clicking the X in the upper left.
7. Let’s view our changes. Open your site by clicking the Site Preview button.
a. Notice how our Home page now displays the “welcome” message.
b. Click on Latest News. Notice how this page now displays our blog post.
8. Close the preview dialog to return to the Dashboard.

Communicating with your Viewers

One of the benefits of WordPress is that it contains features that allow you to communicate with your
viewers and your viewers to communicate with you!

Blog Posts
Blog posts can be used to keep your viewers up to date on the latest happenings regarding your service
or business. For example, if you are the owner of an ice cream shop, you could use a blog post to
announce a new ice cream flavor you are selling.
Right now, the only blog post we have is the sample one that came with our website. Let’s create our
own.
1. Make sure you are in the Dashboard.
2. Click the Add button next to Blog Posts.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 45 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

3. Since our blog is a travel blog about California, we will create a post reminding people about an
upcoming event. Type “Parade in San Francisco” into the title field.
4. In the editor on the Visual tab, type “Check out the parade on Market St. this Saturday.”
5. Click Publish.
6. Notice the green bar at the top of the page. Click View Post.
7. This takes us directly to the blog post page.
a. Note that this page displays JUST the content of that single blog post. By contrast, the
Latest News page lists ALL of our blog posts.
b. This page also allows us to see the post’s comments and add a comment of our own (more
about comments later).
c. Click the open in new tab button at the top of the preview dialog to open your site in a new
tab.

d. Notice how the webpage URL contains the date that the post was published. This is one
way of telling if something is a page or a post (posts have a date in the URL).
8. Close the tab & preview dialog, then click back to return to the Dashboard.
9. Click the Site Preview button to view your site, then navigate to the Latest News page.

Note: When you click the View Website button while you are editing a page or a
post, the website will open in a new tab instead of the preview window.

10. Notice how both of our blog posts are displayed. The “Latest News” page displays ALL of our posts,
newest first.
11. Close the preview dialog to return to the Dashboard.

Comments
A comment is a message that a website viewer posts to one of the pages or blog posts on your
website. You can respond to people’s comments by creating comments of your own.
 Note that comments are publically visible to anyone that visits your website, so don’t put any
personal information in a comment.
 Also note that, when you post a comment, the website owner may be able to see your email
address, but nobody else will.
Moderating comments

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 46 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

People sometimes abuse comments by writing inappropriate messages, or by advertising their own
goods and services (called “spam”). Because of this, WordPress contains a filtering system that
requires you to manually approve a comment before it is posted to your website for all to see. This is
called comment moderation.
By default, WordPress websites are configured so that you must approve the first comment that
someone makes. Once you approve their first comment, all subsequent comments that they make will
be auto-approved.
To demonstrate this, we posted a comment to one of your blog posts before class. We will walk you
through how to see the comment and decide whether to approve the comment or reject it.
1. Click the Site Preview button.
2. Click the open in new tab button at the top of the preview window to open your website in a new
browser tab.

3. In the browser’s address bar add “/wp-admin” onto the end of the URL. Then, press Enter .

4. Notice the black side bar on the left. We are currently inside of the Classic Dashboard. This
dashboard is harder to use, but it gives you more control over your WordPress site.

5. Notice how the “Comments” item on the left side as a “1” next to it. That means there is 1
comment awaiting approval. Click on it.

6. Note – For some of you, the comment may have been categorized as Spam, in which case you will
not see the comment notification. If this does not apply to you, skip to step 7.
a. To find an item in spam, click the Spam link at the top of the Comments screen

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 47 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

b. Hover your cursor over the comment until you see some additional options.
c. Click Not Spam
d. Then click All.

7. Point to the comment in the table that appears. Notice how some links appear in the center.
a. Approve: Posts the comment on your website for all to see.
b. Reply: Allows you to post a reply to the comment.
c. Quick Edit: Opens a simple editor for editing the comment.
d. Edit: Opens an advanced editor for editing the comment.
e. History: Show’s the edit history of the comment.
f. Spam: Flags the comment as spam so that WordPress can improve its spam-detection
algorithms. Spam comments are comments that contain advertisements.
g. Trash: Deletes the comment immediately.

8. Click Approve.
9. Notice how the Approve link changes to Unapprove. This means that the comment has been
approved and is now visible on your website.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 48 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

Note: If you want to perform an action against lots of comments, like deleting a bunch of
spam comments, you don’t have to delete them one by one. You can (1) select them by
clicking the checkbox next to each comment, (2) select the action you want to perform
from the “Bulk Actions” dropdown list, and (3) click “Apply”.

10. The way that WordPress handles new comments can be customized.
a. Point to Settings in the menu on the left, then click on Discussion in the fly-away menu.
b. This screen contains settings regarding how WordPress handles comments.
c. For example, by default, WordPress makes you approve the first comment someone makes.
But the next time that same person makes a comment, the comment gets posted to your
site immediately without needing your approval. If you’d to change this so that you have to
approve every comment that gets posted to your website:
i. Check Comment must be manually approved.
ii. Uncheck Comment author must have a previously approved comment.
iii. Scroll down to the bottom of the page and click the Save Changes button.
11. Close the current browser tab. You should now be at the Dashboard with the preview dialog open.
Close the preview dialog.

Note: You will also get an email alert whenever a comment is awaiting moderation, so
you will know right away if someone commented on your website. Email alerts can be
turned off by pointing to “Settings” on the left, then clicking on “Discussion”.

Viewing the comment

Let’s see what the comment looks like on our post.
1. Click on the Site Preview button to open your website. Then, navigate to the blog post the
comment was posted on.
2. Scroll down the page to see the comment.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 49 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

Replying to a comment
You can reply to a comment with a comment of your own. Remember that your reply comment will
also be publically visible.
1. Click the “Reply” link underneath the comment.
2. Click in the “Leave a Reply” textbox and type a short message.
3. Click “Post Comment”.

4. After a few moments your reply will appear below the comment. Because you are posting a
comment to your own website, the comment does not need to be approved.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 50 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

5. Close the preview dialog to return to the Dashboard.

Turning comments on for a page
By default, comments are turned on for posts and off for pages. This setting can be adjusted for
individual posts and pages.
Let’s turn commenting on for our Contact page.
1. From the Dashboard, click Pages.
2. Open the Contact page for editing.
3. On the right sidebar, click “More Options”.
4. Under the “Discussion” subheading, there are two options.
a. Allow comments: Allows visitors to add comments to the page or post.
b. Allow Pingbacks & Trackbacks: If someone links to this page or post from another blog,
then a special comment will automatically appear saying that another blog linked to this
page or post.
5. Click the “Allow comments” checkbox to enable comments.

6. Click “Update” to save changes.

7. Click “View Page” on the green status bar.
8. Scroll down to the bottom of the page. Notice the “Leave a Reply” section.
9. Close the preview dialog to return to the Dashboard.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 51 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

Deleting a Blog Post

Now that we have some content to populate our “Latest News” page with, let’s delete the sample blog
post that came with our website.
1. Click Back, click on Blog Posts in the sidebar, then scroll down to the bottom where you’ll see the
post titled First blog post.
2. Beneath the first post, click the More button.

3. Then click on the trash button.

4. After a few moments you’ll see a confirmation dialog and be given an option to Undo, which you
can ignore.
5. Click on the Site Preview button and then navigate to the Latest News page. Notice how the
sample post is no longer there.
Note that the post was NOT deleted yet—it was moved to the Trash. The advantage to having a
“Trash” area is that it allows us to restore posts we previously deleted. Once an item has been in the
Trash for 30 days, WordPress will permanently delete it.
1. Close the preview dialog to return to the Dashboard.
2. Select Blog Posts on the left.
3. Click on Trashed at the top of the screen.
4. Notice how the post we just deleted is there.
5. If we wanted to add this post back to our site, we could click Restore. If we wanted to delete it
forever, we could click Delete Permanently. We will be doing neither.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 52 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

Share Buttons
At the bottom of every page and post is a collection
of “sharing” buttons. These buttons are designed
to make it easy for visitors to your site to share the
page or post they are currently viewing with
someone else.

Note: The “About” and “Contact” pages, as well as the sample blog post, may NOT have
share buttons. This is because WordPress created these pages automatically when we
first created our site. They can be turned on in each individual pages’ “Sharing” settings.

1. Click the Site Preview button and then navigate to a blog post.
2. Notice the Share this section underneath the post.
3. Close the preview dialog to return to the Dashboard.
Customizing the “Sharing” Buttons
These buttons can be customized. You can add, delete, and rearrange the buttons.
1. Click on Sharing in the Dashboard’s Sidebar.
2. Click Sharing Buttons at the top of the screen.
3. We are going to start by removing the “Google” button.
a. Click on “Edit sharing buttons”.

b. An “Edit visible buttons” section appears below.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 53 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

c. Notice how some of the buttons in this section look washed out. This means that they are
currently being displayed.
d. Click on the washed-out Google button. Notice how the Google button has disappeared
from the preview above.

4. Next, let’s add a Print button.

a. Click on the Print button in the Edit visible buttons section.
b. Notice how a Print button appeared in the preview section.

5. Next, let’s reorder the buttons so that the Print button comes first.
a. Click the Reorder button in the Edit visible buttons section.
b. Click and drag the Print button to the beginning of the list.
c. Notice how the preview above has updated.

6. In the Options section at the bottom of the page, notice the Show sharing buttons on section. You
can use this to turn off the sharing buttons if you don’t like them.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 54 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

7. Finally, to save our changes, click the blue Save changes button (either one will work).
8. Notice the green bar at the top of the page, confirming our save operation.

Widgets
Another WordPress concept to be familiar with is widgets. A widget is a small piece of information
that is displayed on every page of your website.
The location of the widgets varies depending on what theme your website uses. Our theme puts
widgets on the right side of the page.
1. First, we have to get to the place that lets us manage our widgets. This is done from the
Customizer.
a. From the Dashboard, click the Customize button next to Themes.
b. Select Widgets from the menu.
c. The next menu displays the locations where the theme allows widgets to be placed. Select
Sidebar by clicking on it.
2. Notice that our site currently has two widgets.

Removing Widgets
Let’s remove one of our widgets. We will remove the Categories widget.
1. Click the Text Widget box on the left sidebar to edit it.
2. Notice the widget settings expands beneath the button on the left.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 55 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

3. Click Remove in the settings area.

4. Notice how the widget disappears from the preview.
5. Click Save & Publish.

Adding Widgets
1. Click on the Add a Widget button at the bottom of the sidebar on the left.

2. Add the “Milestone” widget. This widget creates a “countdown” to a date of our choice.

3. Note that the settings area for this widget is poorly designed. Many of the textboxes are not even
labeled and we have to guess as to what they are for. Be aware that you may encounter widgets
like this.
4. Note that the widget’s settings are saved automatically as we type.
5. Apply the settings shown in the screenshot below:

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 56 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

6. Next, add the Calendar widget. This widget shows what days we’ve created blog posts.

7. Click Save & Publish to save changes.

8. Exit the Customizer by clicking the X in the top left corner.
9. Click the Site Preview button.
a. Notice that the Text Widget is no longer there because we deleted it.
b. Notice the Milestone and Calendar widgets that now displays on your site.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 57 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

10. Close the preview dialog to return to the Dashboard.

Reordering Widgets
Next, let’s reorder our widgets so that the Milestone widget appears at the top.
1. Open the Customizer and navigate to widget list (Widgets > Sidebar).
2. Point to the widget name. Notice how the cursor changes to the “move” cursor.

3. Click and drag the widget to the top of the list.

4. Notice how the preview on the right has updated, and is displaying the Milestone widget at the
top instead of at the bottom.
5. Click Save & Publish to save your changes.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 58 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

Adding “Buy Now” Functionality

The following material is being presented based on student demand. We have been asked how this
website might be used as a platform for sales of merchandise. Options are fairly limited when it comes
to adding “Buy Now” functionality to a free Wordpress.com website. Wordpress.com site does not
support plug-ins which are typically used for advanced functionality in more sophisticated WordPress
websites.
That being said, while it may be a little clunky for full-fledged ecommerce purposes, if you have items
you want to sell, you can do it on this website through the use of a PayPal Buy Now button. PayPal is
an online payment service that allows individuals and businesses to transfer funds electronically. A
PayPal Buy Now button will take the buyer to a PayPal form where the buyer enters their payment
information for an individual item they want to buy. Basic PayPal accounts are free, and many financial
transactions are free as well.
This class will not cover the creation of a PayPal account. However, we will show you how to get PayPal
Buy Now button code and put it on your website. Those students with PayPal accounts are invited to
log in and follow along. Others can use a sample button code we have created for this class.

Create a page for sales

Since this page is going to contain a “real” link to pay for an item that we do not actually possess, we
are going to take some precautions with this page so that unwitting persons who might stumble onto
this website do not try to buy it!
We should probably take this opportunity to remind you that this website, your website, is, in fact, out
there on the internet now, and you may have associated personal information with it such as your
email address. While it is unlikely, it is within the realm of possibility that someone could happen upon
this website. Since this isn’t a “real” website, we strongly recommend that you delete it when you are
finished with this class.
We are going to put in place two safeguards on our For Sale page that will reduce the likelihood of
anyone trying to buy our item. We will (1) limit who can see the page and (2) add a prominent
disclaimer to the page itself.
1. Make sure you’re on the Dashboard. Add a new page by clicking the Add button next to Pages on
the Admin Sidebar.
2. Title your page “For Sale”.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 59 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

3. Click the Status menu on the right sidebar and find where it says Visibility PUBLIC.

4. Change the visibility setting to Private.

5. You will get a prompt about what Private visibility means and requires you to answer yes or no to
proceed with your chosen setting. Click Yes.

6. After a moment, the green bar appears at the top of the page, saying that the page was privately
published successfully.

7. Make sure you are in the Visual editor.

8. In the editor, type “The following item is not really for sale. Do not send money!”
9. Select the text and make it Bold and Underlined. Using the options menu next to the Bold button,
change the font size to Heading 2.
10. Move the insertion point to the end of the text and press Enter to get to a new line.

11. Click Update to save changes.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 60 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

Insert an Image and Caption for the Sale Item

1. Next, we are going to insert a picture on this page of a necklace to “sell”. It has been placed on the
Temporary Patron Drive for you to use.
a. Click on the Insert Content button and in the dialogue click on Add New.
b. Navigate to the Temporary Patron Drive and open necklace.jpg.
2. There is some descriptive text about our necklace in a file on the Temporary Patron Drive.
a. Minimize the browser and double click on the desktop icon for the Temporary Patron
Drive.
b. Open the necklace description.txt file and copy the text in it.
3. Go back to the browser and click on the Edit button for your necklace picture in the Media Library.

4. In the Caption field, paste your text.

5. Click on the Insert button.
6. Resize the picture to a smaller size so you can see it and the caption on your screen.
7. Close the Notepad window.

Teacher’s note:
Teacher credentials for PayPal are in the Pre-Class checklist.
DO NOT START THIS SECTION UNLESS YOU HAVE AT LEAST 20 MIN TO COMPLETE.
THIS SECTION MUST BE COMBINED WITH THE SUBSEQUENT 2 SECTIONS

Create a Link for Payment through PayPal

Now that we have an item to sell, the next step is to establish a link with PayPal so that buyers can
send us money for the item. The link will be imbedded into some code which will display a Buy Now
button underneath the necklace on our For Sale page. For those who don’t have a PayPal account, you
can use the link we created in our account.
1. If you have a PayPal account, open a new browser tab, go to PayPal and log in.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 61 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

2. While they are doing that, those of you who do not have a PayPal account:
a. Go back to the Temporary Patron Drive window.
b. Open a file named PayPal LINK code.txt
c. Select the content of that file and right-click and copy to the clipboard.
d. Close the Notepad window and the Computer window.
e. You can then watch the teacher for steps to obtain the payment link from a PayPal account.
3. Navigate to the Buy Now button creation page by visiting http://goo.gl/ywmwUk

Teacher’s note:
Paypal now requires a Business or Premium account to create pay now buttons, but a legacy
page still exists to access this feature, as of 3/31/2017. It can be accessed via:
goo.gl/ywmwUk

4. Select the Buy Now button type.

5. Enter the name of the item you are selling and also enter a price of $75

6. Do not check any of these:

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 62 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

7. Enter a shipping amount and a tax rate.

8. Under Merchant account IDs, select Use my primary email address. This is the option you should
use if you do not have a Premium or Business account.

9. Click on the Create Button button.

10. You will be taken to a page with the link. Be sure to click on the Email tab in the code box, not the
Website tab.

Teacher’s note:
Believe it or not, you do not want the link for websites! WordPress.com
does not let users post web forms so the website code would be stripped.
You must use the link provided in the Email tab.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 63 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

11. Once on the email tab, click the Select Code button. NOTE: This code will not include a button
image as displayed on the right in the PayPal form. We will take care of that separately.

12. Right-click and copy the selected code

Embedding the PayPal link into code for the website

For this next section of instructions we relied heavily on a WordPress.com tutorial which can be found
here: https://en.support.wordpress.com/paypal/get-paypal-button-code/.
We have retrofitted the tutorial instructions to suit our hands-on classroom environment. Our goal is
to end up with a section of computer HTML code that will combine our payment link with the PayPal
Buy Now button image. When this code is put on our website, buyers will click on the Buy Now button
image and be taken to the form where they purchase the item. To create this code we will be opening
two files, located on the Temporary Patron Drive, each of which contain pieces of computer code
which we will ultimately combine into one long piece of code that will go into our website.
1. All students now have a PayPal link copied to the clipboard.
2. Either return to your Computer window or open a new Computer window and navigate to the
Temporary Patron Drive.
3. Open the PayPal PLACEHOLDER code.txt file.
a. Note the words between the two quotation marks that say YOUR-LINK-HERE.
b. Select YOUR-LINK-HERE and delete.
c. Place your cursor in between the two remaining quotation marks and Paste your PayPal link
there.
d. Note the empty line underneath the pasted in code. Click your cursor into this empty line.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 64 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

4. Return to the Computer window and open PayPal BUTTON IMAGE code.txt
5. Select all of the content of this file and copy it to the clipboard.
6. Go back to the PayPal PLACEHOLDER code.txt and paste.
7. Select all of the content in PayPal PLACEHOLDER code.txt and copy it to the clipboard.

Pasting the code onto our For Sale page

1. Switch back to your website.
2. We left off with the For Sale page in the Visual tab of the Editor. We cannot paste the PayPal link
and button code into the Visual editor. Rather, it must be pasted into the HTML editor.
3. Switch to the HTML editor by clicking the HTML tab, and insert your cursor underneath all the
HTML code that you can see there. You may have to press Enter to get to a new line.

4. Once your cursor is placed, paste.

5. Update and view the page.
6. Close all open windows except for the web browser. It is not necessary to save changes.
7. PayPal account holders should log out of their accounts.
8. Close all browser tabs except for the one that’s in the WordPress Dashboard.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 65 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

Advanced Editing Features

Drafts
As you are creating a page, it is possible to save the page as a “draft”. Drafts are pages that have not
been published to your site yet.
1. Make sure you’re on the Dashboard.
2. Click the Add button next to Pages.
3. Type “Surfing” into the title.
4. Wait a few seconds. Notice how it says Saved in faded text in the bar on the top, next to the View
My Site button. WordPress automatically saves your new pages as drafts as you are creating them.

5. Click the Back button to go back our list of pages. We are NOT going to publish this page.
6. Click on Pages, then click Drafts at the top.
7. Notice how our Surfing page appears in the list. This is the page that was saved as a draft.

8. Also Notice the button in the top right, next to the Write New Post button, that says Continue
Editing Surfing.

9. Click on either of the above to get back into edit mode on the Surfing page.

Previewing
To get an idea about what a page will look like before you publish it to your website for all to see, you
can preview the page. Previewing a page will show you what the page will look like on your site
without actually publishing it to your site.
1. Type “Surfing is an extreme sport” into the editor.
2. Click the Preview button.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 66 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

3. Notice how a popup window appeared. It is showing us what our page would look like if it were
published.
4. There are three icons at the top of the popup window. Clicking these icons show you what you
page looks like on various devices (from left to right: A desktop computer, a tablet, a cell phone).

Note: WordPress uses responsive design, which means that your website
will automatically adapt to any size screen your viewers use. This means
that your site will look good on desktop computers as well as phones.

5. Click the “X” in the top-left corner of the popup to close the popup.

Spellcheck
When you’re typing out the content of a page, your web browser checks your spelling as you type.
1. Move your insertion point to the last line and press Enter .
2. Type “ocen” and press Space .
3. Notice how there is a red underline under the word.
4. Right-click on the word. Click on the correct suggestion to correct the misspelling.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 67 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

Scheduled Posts
You can tell WordPress to publish a page or a post sometime in the future. For example, you could
create a blog post saying how your business will be closed on Christmas Day, and then schedule it to be
automatically published the week before.
1. Click on the Set Date and Time button to the right of the Publish button. This button is ONLY
visible if you have not published your page yet.

2. Notice how a calendar appears. Click on the date one week from now.
3. You can also choose the time it gets published. This is done in the textboxes below the calendar.
Enter 2 PM by typing “02” in the first textbox, “00” in the second, and select PM.
4. The Publish button changes to Schedule. Click the Schedule button.

5. After a few moments, notice that the Schedule button changes to Update.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 68 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

6. Click Status on the right sidebar. Notice that it says Future and provides the date and time we just
scheduled. We are also given an option to revert the page to a draft, which will cancel the
scheduled publish date.

7. Finally, notice the green bar, which confirms that our page was scheduled.

8. Click the Back button to return to your list of pages.

9. To view all of your scheduled pages, click Scheduled at the top of the pages list.

User roles - Letting other people edit your site Show Slide 4

You might want to create a website with a group of people instead of just by yourself. One way to do
this would be for everyone to share the same WordPress log in. That way, everyone can log in under
the same account and edit the site. However, a more powerful approach would be for each team
member to create their own WordPress accounts, and then give each of those WordPress accounts
permission to access the website.
One benefit to this approach is that you can assign each user a role, which gives them different abilities
depending on what they need to do. For example, one person may only need to create new posts, in
which case you would assign them a specific role that gives them permission to do that and nothing
else. There are many different roles available:
 Administrator: Has the same level of access as the creator of the site. Can do anything they want.
 Editor: Has full access to the content of the website. For example, an editor can add and remove
pages, but can’t change the theme or add new users.
 Author: Can create, edit, and delete their own posts. Authors cannot modify the posts of other
users or create pages.
 Contributor: Can create their own posts. However, the posts have to be approved by an Editor or
Administrator before they are published.
 Follower/Subscriber: Can read and comment on posts and pages. This role is only useful if your
site is private and is not visible to the outside world.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 69 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

To add someone to your site:

1. From the Dashboard, click on People.
2. Right now, only one person is listed (ourselves) because we haven’t added anyone else yet.
3. Click the Invite User button on the right, below the search button, to add a new person.

4. From this screen, you can add people to your website.

a. Usernames or Emails: Here you would enter the WordPress username or email address of
the person you want to invite.
b. Role: This is where you choose the person’s role
c. Custom Message: This message will appear in the email notification the person gets when
you send them the invitation.
d. Send Invitation button: Emails an invitation to the user. The email allows the person to
either accept or reject the invitation.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 70 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

2. The image below shows what the email invitation looks like. It contains the message you type into
the “Message” textbox, along with an “Accept Invitation” button.
Show Slide 5

3. When the “Accept Invitation” button is clicked, your browser takes you to WordPress and shows
you the screen below. You are prompted to choose a username and password, or you can sign in
with your existing account if you have one. When you click “Sign Up & Join”, you become a
member of the site and can start editing it.

Show Slide 6

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 71 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

Your WordPress Profile

Your WordPress profile contains information about you, such as your name. Some of it is public and
can be viewed by anyone.
1. Click on the “Profile” button on the right side of the Admin Bar to open your WordPress
Profile.
2. The information that you see on the next screen is all public. Anyone can view it.
a. You may want to fill this page out with your personal information, or you may not,
depending on what your WordPress site is for. For example, if it’s for a business, you may
want to fill out this information. But if it’s for something personal, like a blog, you may
want to leave it blank.
b. Note that the email address you used to create your WordPress account is private.

Profile Photo
You can also assign a “profile photo” to your account. A profile photo can be a picture of yourself, or
something fun like a picture of your pet. A profile photo will appear when someone views your
profile. It will also appear if you comment on someone else’s blog posts. Your profile photo can be
changed by clicking on the large icon on the left.

It’s important to note that WordPress uses a third-party service called Gravatar to manage its profile
photos. Many other websites also use Gravatar for this same purpose. Therefore, it’s important to
note that when you add a photo to Gravatar, that same photo might appear on other websites that
you have accounts on.
When you upload a photo to Gravatar, it associates the photo with your email address. So, any other
websites that you have accounts on that use that same email address might end up using that same
profile photo.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 72 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org
 CREATING A WEBSITE: STEP-BY-STEP GUIDE Revised: 6/12/2017

Backing up Your Data

WordPress is a very successful platform (they claim to power 27% of the internet), so you don’t really
have to worry about your data disappearing if WordPress goes out of business, because it probably
won’t go out of business any time soon. But if you want to download a copy of all your data for
safekeeping, or for moving to a different website hosting service, WordPress provides tools that let you
do this.
1. Go to the Classic Dashboard.
a. Make sure you are on the Dashboard.
b. Click on the Site Preview button, then click the preview dialog’s new tab button.
c. In the Address Bar of the browser, add “/wp-admin” into the end of the URL.
d. Press Enter .

2. Point to “Tools” in the menu on the left and click “Export”.

Two options are available.

Guided Transfer
Use this option if you want to host your own WordPress server and need help migrating your data.
This option costs some money, but you will receive help from a WordPress technician.

Export
This option is free, but requires some technical knowledge. It downloads an XML file to your
computer, which contains the content of all of your pages, blog posts, and comments.
XML is a markup language similar to HTML. It is used for data storage. To open an XML file, all you
need is a text editor, such as Notepad or WordPad.

MC-NPL Computer Lab • 1001 Powell St • Norristown, PA 19401 Page 73 of 73

(610) 278-5100 x141 • [email protected] • www.mc-npl.org