Team 1

Mary Haddock, Jacob Belcher, Conner Murphy,

Quan Nguyen, and Kelly Parks

Wordpress Tutorial Project

1
Table of contents
Pg. 3
Creating a Free Account

Updating Your Information Pg. 10

Creating a Static Homepage Pg. 14

Applying a Theme Pg. 18

Creating the Portfolio Page Pg. 21

Adding Items to Your Portfolio Pg. 28

Creating a Resume Page Pg. 32

2
Welcome to WordPress!

3
 WordPress
Create Login

From the WordPress homepage,

select login, then create an account.
Next, click “Connect with Google”

4
Set up using a Google Account

Click on the Google account you

would like to connect to WordPress.

5
Fill out info
Answer the questions on the form, and
fill in the boxes with the appropriate
information.

Click continue when you’ve

completed the form.

6
Name Your Site
Start typing words and ideas
associated with your site, such as:
Cycling, technical writing, acting,
business, etc.

Ideas will populate as you type:

Choose the free option --->

7
 Select a Plan
Choose the free plan, labeled
“Best for students” by clicking the
“Start with Free” button.

8
Congratulations!

You created a website.

Next, create an icon.

Click the pink “Do it” button.

9
 Uploading an Icon
Select change,
1
under the earth.

Select add new at the 2

top left.

10
 3 Choose a photo
from your folder. Uploading an Icon,
Click open.
Cont’d

5
Use the flip, rotate and Click
crop tools to adjust your continue to
photo. Click done when edit your
satisfied. photo.

11
Create a Tagline
Click on the box that says “Site
Tagline” and then write a little
description about your website.
In this case, you could write “This
is my online portfolio.” After you
are finished, click “Save Settings”
on the upper right

12
Set Your Time Zone

Scroll down to find the dropbox for the time

zones. Select your timezone. Scroll down even
And Privacy!
more to find your privacy settings. For this
example choose private then save your settings. 13
Creating a
Static Homepage

Step 1

Click the customize button on the

left side in the scroll menu. This
will open up the customization
menu. Do not click the “Themes”
button. This is something
different!

14
Creating a
Static Homepage
Step 2

Click on the Homepage Settings

in the menu. This will open up
the homepage editing menu.

15
Creating a
Static Homepage
Step 3
2
Once you have opened up the
homepage editing menu, select the “A
static page” option. Then click on the
“Add New Page” button under
“Homepage” to add a new page. This
will be your home page. For this
1
example we have named it “Home”.
Once you are done, click the publish
button on the upper left. Then press
the X to return to the main menu.

16
Creating a
Static Homepage
Step 4

Once you have returned to the

main menu, click on the “Site
Pages” option in the scroll menu.
Then in the main screen, click on
“Home” to begin editing. You can
also do this to edit any of your
other pages.

17
Applying a Theme
Step 1

Return to the main menu and

scroll down to “Customize.” Click
the “Themes” button this time
instead of the “Customize” area.
This will bring you to the theme
search page.

18
Applying a Theme

Step 2

Type in “Portfolio” in the search

bar and to the right of the bar,
select the “Free” option. This will
list all the free themes first. You
can pick whatever theme you
like, but for this example we will
be using the “Lodestar” theme.
Click on it once you have located
it and you will be brought to the
store page.
19
Applying a Theme
Step 3

Once you are at the theme page,

click “Activate this design” and
select “Customize site”. This will
return you to the customization
menu, so press the X in the
upper left to exit out. Then press
“My site” to return to the main
menu.

20
Creating the Portfolio Menu

Now that we have the theme

applied, you will notice in the
website viewer that there are
now navigation menus. You will
see across the top of your
website the buttons for “Home,”
“Blog,” and “Contact.” In the
scroll menu, you will also notice
that “Portfolio,” “Testimonials,”
and “Feedback” have also been
added as options.
21
Creating the Portfolio Menu

Step 1

Now we will want to add a tab for

our portfolio. Let’s return to the
customization menu via the
“Customize” button. DO NOT
PRESS “THEMES”.

22
Creating the Portfolio Menu

Step 2

Now that we’re back in the

customization menu, you’ll want
to select “Menus.” This will open
up the Menu Editing interface.
Click on the button that says
“Primary.” Here you will see a list
of menus. For now, you should
only see “Home,” “Blog,” and
“Contact.” You will want to click
the “Add Items” option under the
list of menus. 23
Creating the Portfolio Menu
Step 3

Note how when we applied the

Lodestar theme, there were
already options for the portfolio,
testimonials, and feedback. We
will now be taking advantage of
these features here. Click on the
“Projects” dropdown. Under this
dropdown, you will see an option
called “All Projects.” Click on it to
add it to the list of menus. Your
website preview should change
24
to reflect this.
Creating the Portfolio Menu
Step 4

It doesn’t make much sense to your

menu named “All Projects,” nor does it 1
make sense to have it come after Blog
and Contact. Let’s reorder and rename
it! To reorder, click on the “Reorder”
button next to the “Add Items” button.
Next, click on the arrow that is pointing
up next to the “All Projects” menu. The
higher up this hierarchy it is, the further
to the left it moves. Now, the order that
2
the menu options appear is “Home,”
“All Projects,” “Blog,” and “Contact.”

25
Creating the Portfolio Menu

Step 5

When you are done, click the

“Done” button under the list of
menus. Now to rename our
menu, click on the name.
Under the “Navigation Label,”
we’re going to replace the name
“All Projects” with “Portfolio.”
Press Enter on your keyboard
when you are done.

26
Creating the Portfolio Menu

Step 6

Last but not least, press the

“Publish” button on the upper left
to update your website. Once it
has published, press the X on
the upper left to exit the
customization menu.

27
Add Items to the Portfolio

Step 1

Now that we have a Portfolio up,

let’s add some items to it. On the
left side, find the Portfolio option
under the Manage section. Click
on the “Add” button. You will be
brought to a blank page.

28
Add Items to the Portfolio
Step 2

Let’s give a name to the project.

In grayed out letters should be
the words “Title.” This is where
you will name your project. For
this example, I am naming my
project “Project 1.” Under that,
we can click the “Add” button to
add some media, such as
pictures. If you click the blank
space under the menu you will
be able to input text.
29
Add Items to the Portfolio

Step 3

Once you have finished, press

the “Publish” button on the upper
right to publish your project.
Congratulations! You’ve made
your first project listing! You can
continue to add projects like this
and they will automatically be
added to your website.

30
Add Items to the Portfolio
Step 4

To see your changes, just click

on the “Portfolio” menu in the
website viewer and you will see
that your first project is listed.

31
Making a Resume Page

Step 1
4
You will want to return to the
customization menu with the
“Customize” option from the main
menu. Once you are in the
customization interface, go to Menus > 1 2
Primary > Add Items just like when
3
adding the Portfolio menu. This time,
type “Resume” into the bar and click
add. Reorder your menus so that
Resume ends up after Portfolio and
before Blog and Contact. When you
are finished, don’t forget to Publish it!
32
Making a Resume Page
Step 2

Once you have returned to the main

menu by clicking the X in the upper
left, scroll down until you see “Site
Pages.” Click on that and then click on
the “Resume” page to start editing it.
These steps are the same as with the
static homepage. Once you are on the
page editing menu, click on the “Add”
button under the title to add your
resume. You will want to choose
media.

33
Making a Resume Page
Step 3
1
Once you are prompted to select 2
media, click the “Documents” tab
on the top of the menu. Then
click “Add New” and upload your
resume. Once you are done,
select “Insert” on the bottom
3
right.

34
Making a Resume Page
Step 4

You may continue to add media

and customize your site page. It
might be a good idea to include
screenshots of your resume, as
the download link does not
include a preview. Once you are
done, click “Update” in the upper
right.

35
Making a Resume Page
Step 5

Congratulations! You now have a

website with your resume on it,
as well as a portfolio to hold all of
your projects.

36