UST SHS - Empowerment Technologies
Using infinityfree & Theater Website Activity
I. CREATING A WORDPRESS WEBSITE USING infinityfree
1. Go to http://infinityfree.net/ and click Sign up Now. Accomplish the required fields and activate your
account from the email you had indicated.
2. Go back to the site then click the Client Area.
3. On the login page, provide the necessary details and click Sign in.
UST SHS - Empowerment Technologies
Using infinityfree & Theater Website Activity
4. The accounts page will appear. Click the Create Account.
5. Type a subdomain* name and then click Search Domain. (*use a subdomain name following the
format: emtech12[section#]-GivenName(init).MI-Surname e.g. emtech12stem99-cetupaz)
(Note: subdomain names should only include letters, numbers, and dashes)
6. The following will appear if the indicated subdomain is available. Fill in the password for this
website account then click Create Account.
UST SHS - Empowerment Technologies
Using infinityfree & Theater Website Activity
7. On the Create a new Hosting Account, click Open Control Panel.
8. Once done and approved, the Control Panel will then be displayed.
9. Scroll down up to the Software group and click the Softaculous Apps Installer.
UST SHS - Empowerment Technologies
Using infinityfree & Theater Website Activity
10. On the Softaculous page, hover to the WordPress icon and click Install.
11. The following page for the WordPress CMS will be displayed. Scroll down until you get to the Admin
account section. (Note: select version 5.9.2)
UST SHS - Empowerment Technologies
Using infinityfree & Theater Website Activity
12. On the Admin Account section, provide your preferred Username, Password, and Admin Email.
(You may use your UST gmail for this or your personal email address).
(NOTE: The Admin Username and Admin Password is what you will be using everytime you log-in at
your website. You have to modify and remember this.)
13. Scroll down until you reach the bottom of the page. Click Install.
Note: WordPress installation may take several minutes depending on the internet speed.
UST SHS - Empowerment Technologies
Using infinityfree & Theater Website Activity
14. After successful installation, Click the first URL indicated on this page. (You will be redirected to your
website; the second link will direct you to the log-in page for Admin account)
15. You have now created your first webpage with default settings. (if in case you will not see this page
right away, wait for several minutes and refresh the page.)
(Note: This is the default display of the Twenty Two Theme. This can be changed inside the Dashboard)
UST SHS - Empowerment Technologies
Using infinityfree & Theater Website Activity
16. To go to the Log-in page, go to the address bar of your browser and add the following text to the
end of your url: /wp-admin or /wp.login.php (e.g. emtech12stem99-cetupaz.freecluster.eu/wp-admin)
17. Type the credentials you had indicated in Step 12 then click Log in.
UST SHS - Empowerment Technologies
Using infinityfree & Theater Website Activity
18. After successful log-in, you will get to your WordPress Dashboard. This is the back-end of your
website where all editing on the pages, installation of plug-ins, and setting up of the pages’ content will
be done.
II.
CREATING A THEATER WEBSITE
1. In the dashboard, choose Appearance, select Themes and click Add New.
UST SHS - Empowerment Technologies
2.
Using infinityfree & Theater Website Activity
Type in the Search field “Twenty Seventeen” and click Install. Once installed, click Activate.
3. On the activated theme click Customize.
UST SHS - Empowerment Technologies
Using infinityfree & Theater Website Activity
4. Click Site Identity. Change the Site Title to Theater Stage Club. Change the Tagline into Life's
like a movie, write your own ending, keep believing, keep pretending.
5. Click the Pencil icon found at the upper left corner. At the left pane, scroll down and click the Hide
Image found under Header Image. Click Add Image. Select Select Files. Choose the image
Theater.jpg stored in your computer. Click Select and Crop. Crop the image and select the
button Crop Image. Header image must be changed, as shown below:
6. Click Publish button to save your work. Click the X to go back to Customize.
7. Click on the Pencil icon beside the Menu. At the left pane under Top Menu, click on the hyperlink Edit
Menu.
a. Click the down arrow of About, change its Navigation Label to Calendar of Activities.
Click up arrow when done.
b. Click the down arrow of Blog and click the hyperlink Remove.
c. Click the down arrow of Contact, change its Navigation Label to Members. Click up arrow
when done.
d. Click +Add Items button. Click About twice so that this menu item will be added twice.
Click back to the left pane to close the Add Items pane.
UST SHS - Empowerment Technologies
Using infinityfree & Theater Website Activity
e. Click the down arrow of the first About, change its Navigation Label to Upcoming Plays.
Click up arrow when done.
f. Click the down arrow of the second About, change its Navigation Label to Contact Us.
Click up arrow when done.
g. Click Publish to save your work. If you’ve done this part right, your screen will be like below:
8. Click the X button found at the upper left corner of the left pane.
9. Choose Pages, then All Pages. Inside All Pages, select Home and click the hyperlink Edit.
10. Type the description of Home as provided below.
UST SHS - Empowerment Technologies
Using infinityfree & Theater Website Activity
11. Click the 3-dot menu found on the top portion of the text block and select Insert After. This will add a
new block to the page.
12. Click the (+) sign and select Image block.
13. Click the Upload. Choose the JoinUsImage.jpg. Then click Open.
UST SHS - Empowerment Technologies
Using infinityfree & Theater Website Activity
14. Click Change Alignment and select Align center to center the image. Click the button Update to save
your work. It should look like below:
15.
16.
17.
18.
To see how it appears in your website, click the WordPress logo at the upper left corner.
The dashboard will appear and click the Theater Stage Club found at the status bar on top.
Go back to Dashboard. Choose Pages, then All Pages.
Scroll down until you see the A Homepage Section. Click the Edit hyperlink below it.
a. Change the title of the webpage. Edit Permanent link into: calendar. Type the
webpage description as shown in the screenshot below:
b. Click the 3-dot menu found on the top portion of the text block and select Insert After. Click
the (+) sign and select Image block. Click the Upload. Choose the
Calendar.jpg. Then click Open.
UST SHS - Empowerment Technologies
Using infinityfree & Theater Website Activity
c. Click Change Alignment and select Align center to center the image. At the right pane, click
Block and navigate to image size then select Full Size as size. (See image below)
d. At the right pane, click Document and select Featured image. Click the Remove featured
image below it.
e. Click the hyperlink Set Featured Image. Click the Upload File tab the click Select Files. Set
CalendarOfEventsImage.jpg as the featured image.
f. Click Update button to save your work. To see how it appears in your website, click the
WordPress logo at the upper left corner. The dashboard will appear and click the Theater
Stage Club found at the status bar on top.
g. Go back to Dashboard. Choose Pages, then All Pages.
UST SHS - Empowerment Technologies
Using infinityfree & Theater Website Activity
19. Be guided by the steps provided in #17 and do the following changes in the following webpages:
Webpage
About
Click
Add New
Button
Contact
Permanent
Description
Link
Members members
The faculty sponsor for the club
is Mr. Dan Barth, the drama
coach and theater director. Mr.
Barth has been the head of the
Theater Department for the past
five years.
Upcoming plays
The Theater Club welcomes
Plays
you to browse through our
Webpages and see what is
happening the rest of the year.
Stop by often!
Title
Contact
Us
Add Media
Featured Image
Members.jpg
(center the
image)
MembersImage.jpg
UpcomingPlay.j
pg (center the
image)
UpcomingPlayImage.j
pg
contactus
ContactUsImage.jpg
20. After clicking Update, click the WordPress logo at the upper left corner.
21. Click the Plugins, then select Add New at the right pane. (See image below)
22. Click the button Upload Plug-In. On the Search field, type “wpforms and click the search button.
Select the WPForms (like the image presented below) and install the plug-in.
UST SHS - Empowerment Technologies
Using infinityfree & Theater Website Activity
23. After installation, click Activate Button. Once activated, WP-Forms will be added to your choices at
the left pane.
24. Go to WPForms.
a. Click Add New.
b. Write Contact Form as Form Name.
c. Choose Simple Contact Form as template.
d. Click Save button found on top.
e. Click X button found on top.
25. Go to Pages, then All Pages. Choose Contact Us.
26. Click the (+) to add a new block. Search and Select WPforms block.
UST SHS - Empowerment Technologies
Using infinityfree & Theater Website Activity
27. Select Simple Contact Form from the dropdown box.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
Click the Update button.
To see how it appears in your website, click the WordPress logo at the upper left corner.
The dashboard will appear and click the Theater Stage Club found at the status bar on top.
Scroll down to Contact Us to see the form that you added.
In the website, click Customize found at the upper left corner of your website.
Scroll down and click the Pencil Icon beside Find Us. At the left pane click Remove.
Do the same process for About This Site.
Click Publish.
Click X button to go back to your website and see the changes you made.
In order to make your Menu work, follow the steps below:
a. From the Website, go to the Dashboard.
b. At the left pane, select Appearance, then Menus
c. At the View All tab, check the following:
i. Calendar of Activities
ii. Upcoming Plays
iii. Contact Us
iv. Members
v. Home – Front Page
d. Click the Add to Menu button.
UST SHS - Empowerment Technologies
Using infinityfree & Theater Website Activity
e. When these items were transferred at the Menu Structure, re-arrange them in the
order shown below:
f.
Remove the following Custom Links in the Menu Structure: Yelp, Facebook, Twitter,
Instagram and Email by clicking the down arrow and click Remove hyperlink.
g. In the Menu Settings, click Top Menu as the Display location. Click the button Save
Menu when done.
UST SHS - Empowerment Technologies
Using infinityfree & Theater Website Activity
38. Go to Appearance, then Customize. Select Menus. Get inside Social Links Menu. Under the
Menu Location, uncheck the Social Links Menu. See screenshot below:
39. Click the Publish button to save your work and X button to go back to the Dashboard.
40. To see the changes you made, click Theater Stage Club.
41. Try clicking your Menu Items they must display the corresponding web pages.
Note: Notice that the Upcoming Plays menu has been made available at the Top menu. Explore the
Customize section to have this content available between the Members and Contact Us sections.
42. Log-out to your account found at the upper right side of your website.
Note: Once done, send your subdomain name (website link) to the submission link provided in our
Blackboard course site for checking.