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 Thesitewilldisplayadsonyouwebsitefromtimetotime.
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 Mostarearound$10permonthorless.
• 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
Step 1. 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.
Step 2. Create a website at wordpress.com
Go to https://wordpress.com/ and click on the option to Create a Website
Step 3. 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.
Some questions about your new web site will be asked. I suggest you choose Education & Non Profit.
Page 1
Step 4. Specify a theme for your website
You will be asked about which theme you want. I suggest Twenty Sixteen.
It can easily be changed later on.
Warning: the theme Twenty Sixteen will be used in all the screen shots below. Choosing a different theme may confuse you.
Step 5. Specify a domain name
You will be asked about which
domain you wish to use. I would
avoid using one of the paid
alternatives, stick to the free
alternative until you have built a
few websites.
I suggest you use the prefix ‘swin’
followed by the digits of your
student ID.
Step 6. Pick a plan
Choose the Free Plan option.
Step 7. Specify your current email address and a new WordPress password
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.
Page 2
Step 8. 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 at the top left of your web browser.
Step 9. Make changes to your Web site via the Dashboard Menu.
Click on the icon that says My Site near the top left corner of the WordPress page.
A menu appears that enables you to configure many elements of your web site.
This is called the Dashboard.
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.
Page 3
Step 10. Customize your Theme.
Find the Themes option on the menu. Click on the Customize button.
A menu will appear on the left.
There are a number of different categories of settings that you can customize.
Step 11. Avoid Custom Design
The first menu option says Custom Design.
Avoid this option. It costs money to customize your site via this option. Essentially it is an option to upgrade your plan.
There are many other ways to customize your web site without having to pay any money.
Step 12. Customize Site Title etc
Choose the Site Title 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.
Page 4
Step 13. 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.
Step 14. Customize Header Image
Choose the Header Image option from the menu.
WordPress suggest to add an image with dimensions of 1200 x 280.
I have uploaded a number of images to Blackboard of that size, but 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.
Step 15. Save, Publish and View
Click on the Save & Publish button at the top of the page. Then click on the X icon.
Your web site should look similar to this We will continue to customize it…
Page 5
Step 16. 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 Site icon in the top left corner of the page.
Click on the Customize button next to the Themes menu option.
Click on the Static Front Page menu option.
Click on the A Static Page radio button.
Set the Front page to now be the About page.
The About page was automatically created by WordPress when created your web site.
Set the Posts page to be — 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 Save & Publish button.
Page 6
Step 17. Adding Web Pages to your web site.
Return to the Dashboard (by clicking on the My Site icon at top left). Click on the Add button next to the 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 18. 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???
Step 19. Add an image to the page
Click the Visual tag (top right corner of the template). Click on the Add media icon.
Download the dog.jpg file from blackboard and then upload it to WordPress. Resize and reposition the image as you see fit.
Click the Save & Publish button.
Page 8
Step 20. Add a navigation menu to your web site.
Return to the Customize Theme menu and select the Menus option.
Click the Add a 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 Create Menu button
Finally, click the Add Items button.
There should be three pages in your web site. They are named Home, Dogs and About.
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.
Repeat this process for Home, Dogs, About.
Set this to be your Primary Menu.
Save and Publish. View your web site.
Page 9
Step 21. Testing your web site.
Try the menu.
Currently both Home and About both cause the About page to be displayed. We can fix that later.
Try clicking on the Dogs page.
Step 22. 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/
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 an iPhone 6.
Page 10
Step 23. Removing existing 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.
Currently the Sidebar has 5 widgets: Search, Recent Posts …
I suggest that we remove ALL of the existing widgets.
Click on the Search menu item.
At the bottom of the panel there is an option to
Remove | Close
Click on the Remove option.
Repeat this process for all widgets in the Sidebar.
When completed successfully, there shouldn’t be any widgets visible.
Page 11
Step 24. Adding new widgets.
Click on the Add a Widget button.
WordPress has around 30 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. As you can see, you can also add some simple html tags.
Select the Contact Info 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).
Select the Facebook Page Plugin widget.
You can specify the URL of a Facebook page.
This is the URL of a very exciting and much visited web site. https://www.facebook.com/swinburneuniversityoftechnology/
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
All about pets can be published here<br />
Let’s bring all pet-lovers together
Page 12
Step 25. View your web site.
Save and Publish all changes that have been made.
View your web site. The sidebar should contain these widgets:
All about pets can be published here Let’s bring all pet-lovers together
Page 13