Creating a WordPress site

There are many ways to create a WordPress site.

• You can create it on a local computer/server. You actually install WordPress software on
your computer.
o Cost is free
o You need to install server software such as Apache, MySQL, Python, Perl (usually
fairly simple procedure, but can be confusing)
o The site cannot be accessed by other internet users.

• You can create it on a restricted free website at WordPress.com (that's what we are doing in
this task).
o One click setup. You provide your email address and click install
o The site can be visited by other internet users
o The site will display ads on you web site from time to time.
o You cannot fully customize your site. However, many useful features and tools are
available.
o Some tools (such as FTP access to files) are unavailable
o You can upload your web site created to a web hosting service that does offer
unrestricted customizations.

• You can create your site at via shared hosting service (pay per month)
o Most are around $10 per month or less.
• You can create your site via shared hosting service (free)
o Same as above, but there may be restrictions on storage space, support, speed.

This document discusses how to create a simple web site using wordpress.com

Email Address
Ensure that you have an email address that
wordpress.com can send emails to for authentication
purposes. You need to be able to respond to emails
sent to this address.

Create a website at wordpress.com

Go to https://wordpress.com/ and click on the option
to Create a Website (Get Started button)

Step 1. Specify some very general details

about your website
All of the options that you choose here can easily be
modified later. So don’t waste time trying to be
accurate. Make sure you use your name in the site
name, e.g. Tanya’s Favourite Pets

Some questions about your new web site will be asked.

I suggest you choose Education & Non Profit.

Page 1
Step 2. Specify a domain name
You will be asked about which domain you
wish to use. Use your name as part of
domain name.

Wordpress will offer options to pay and

keep a proper domain name. I would
avoid using one of the paid alternatives,
stick to the free alternative until you have
built a few websites.

Step 3. Pick a plan

Choose the Free Plan option.

Step 4. Create an account with Wordpress

Provide your email address and other required information. You need to be able to respond to
emails sent to the address you specify.

The password must contain

• At least 8 characters
• Digits and letters
• Upper and lower case characters
• Not be the same as your user name

I suggest that you keep a record of your WordPress password.

Step 5. View your new WordPress web site

If all has gone well, your new WordPress site should be visible.

The URL for the website can be seen

in the address bar of your web
browser.

Step 6. Make changes to

your Web site via the
Dashboard Menu.

You should be able to see your

Dashboard in the left pane.

To access it later click on the icon that

says My Site near the top left corner
of the WordPress page.

Page 2
Menu options enable you to configure many elements of your web site.

Note: The Dashboard that you typically see on WordPress.com is a cut-down version of the standard
WordPress dashboard. A number of menu options and settings are missing.

This is a good thing. Fewer options means less chance of being overwhelmed.

Step 7. Specify a theme for your website

Scroll down your Dashboard pane to Personalize section and click on the Themes
button.

You will be presented with the long list of themes.

I suggest Twenty Sixteen.

It can easily be changed later on.

Enter Twenty Sixteen in the Search field (unless you want to

explore other themes first.

Warning: the theme Twenty Sixteen will be used in all the

screen shots below. Choosing a different theme may confuse
you.

Page 3
Click on Activate this design

A pop-up will appear with a button “Customize site”. You will something similar to below

Step 8. Customize your Theme.

A menu on the left will present a number of different categories of

settings that you can customize.

Page 4
Step 9. Customize Site Title etc

Choose the Site Identity option from the menu.

Add text to the Site Title and Tagline (a sub heading).

I did not change other settings.

You can always come back later and modify these settings.

Return to the Dashboard menu.

Step 10. Customize Fonts

Choose the Fonts option from the menu.

Change the Headings and/or Base font if you want to.

Don't go overboard on the size of the font. I suggest keep the font
size normal for the moment.

Return to the Dashboard menu.

Step 11. Customize Header Image

Choose the Header Image option from the menu.

WordPress suggest to add an image with dimensions of 1200 x 280.

There are images available through the Wordpress site, or you can choose from a
number of images of that size from Canvas, or you are welcome to use your own.

Download one of these images from Blackboard and then upload it to WordPress by
clicking the Add New Image button.

Page 5
Step 12. Save, Publish and View

Click on Publish button at the top of the page.

Then click on the X icon.

We will continue to customize your website.

Step 13. Remove the Blog

We are about to remove the blog from your web site.

(A blog can be loaded again later if you wish).

Click on the My Sites button in the top left corner of the page.

Click on the Customize menu option next to the Themes button.

Click on the Home Page Settings menu option.

Click on the A Static Page radio button.

Set the Front page to now be the Contact page.

The Contact page was automatically created by WordPress when

created your web site. Note: after you create more pages you will
be able to set another page as a home page.

Leave the Posts page as -- Select --

Your WordPress site will now behave like a typical web site with no
hint of a blog. (A blog page is easily created if you want one).

Click the Publish button.

Page 6
Click on the Cross to return to Dashboard.

Step 14. Adding Web Pages to your web site.

Click on the Add button next to the Site Pages menu item.

A template appears.

This template is a GUI (graphical user interface) that generates HTML similar to the HTML pages your
created earlier in the course.

Click the 3 dots

to expand the
menu ribbon

Modify the Title. (The word Title is actually the name of the html page e.g. dogs.html). However, you
don't really interact with .html file using WordPress at the beginners’ level. You simply use the GUI
editor.

Add some data…

Page 7
Step 15. View the HTML code
Click on the HTML tag on the top right of the template.

Most of the html code should be familiar to you.

You could even add your own html code if you wanted to – but why would you bother???

Step 16. Add an image to the page

Click the Add button (top right corner of the template).

Click on the Media or Media from Google or Free photo library.

Find a dog image you like and then upload it to WordPress. Resize and
reposition the image as you see fit.

Click the Save button.

Page 8
Step 17. Add a navigation menu to your web site.

Return to the Customize Theme menu and select the Menus

option.

Click the Create New Menu button.

Type the name Menu1.

The name of the menu isn't very important (unless you create multiple menus – but this is seldom
required).

Click the Next button.

Finally, click the Add Items button.

There should be three pages in your web site.

They are named Home, Dogs and Contact.

Click each of these items. A tick will appear next to the item.

The item will also appear on the left of the page. These are the items that will appear in the menu.

Set this to be your Primary Menu.

Click on Publish.

View your web site.

Page 9
Step 18. Testing your web site.

Try the menu.

Currently both Home and Contact menus cause the Contact page to be displayed. We can fix that
later.

Try clicking on the Dogs page.

Step 19. Checking the responsiveness of your web site.

Responsive Web design is the approach that suggests that design and development should respond
to the user's behaviour and environment based on screen size, platform and orientation. The
practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media
queries.
https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/

You can choose the testing screen size from the drop-down menu.

Try resizing your web browser by making it narrower.

Notice that the menu and the positioning of the sidebar change.

Many web browsers have a developer option that allows you to emulate the
view of the page on a tablet or phone.

This example shows how this page would appear on a phone.

Page 10
Step 20. Adding widgets

Widgets are small tools or controls that appear is sidebars of your web page.

A search tool or a Facebook plugin are examples of widgets.

Go to the Customize menu for your Theme. (This can be done via the Dashboard).

Click on the Widgets menu

Click on the Sidebar option.

Click on the Add a Widget button.

WordPress has around 45 widgets that you can access from

wordpress.com. There are thousands of widgets to choose
from if you use an upgraded site.

Select the Text widget.

This widget isn't very exciting. It simply allows you to type your own text into a small panel that
appears in the sidebar.

Add some text and note how your webpage gets automatically updated with the sidebar.

Click on Done.

Click on the Add a Widget button again.

Page 11
Select the Contact Information & Map widget.

The exciting part of this widget is that if you type an address, the location of the address will be
displayed on a Google map (if you check the Show Map box).

Click on Done.

Click on the Add a Widget button again.

Select the Facebook Page Plugin widget.

You can specify the URL of a Facebook page.

This is the URL of Swinburne Facebook page

https://www.facebook.com/swinburneuniversityoftechnology/

However, use your own Facebook page if you have one.

Click on Done.
Page 12
Click on the Add a Widget button again.

Select the Flickr Photos widget.

You can specify the URL of a flcikr group.

This is a sample URL that you can use.

http://api.flickr.com/services/feeds/photos_public.gne?tags=flower%2CBerkeley&format=rss2&lang=fr-fr

Click on Done.

Step 21. View your web site.

Publish all changes that have been made.

View your web site. The sidebar should contain

these widgets.

Page 13