lab 6: wordpress content control - iclassbook – by ... about gladiator fitness page..... 16 2.5.3...
TRANSCRIPT
![Page 1: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/1.jpg)
Lab 6: WordPress Content Control
Armand Poblete (© 2016)
![Page 2: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/2.jpg)
1 | P a g e Armand Poblete © 2016
CONTENTS
1 Background ........................................................................................................................................... 1
2 In-Lab Work ........................................................................................................................................... 1
2.1 files you need ................................................................................................................................ 1
2.2 Setting up ...................................................................................................................................... 1
2.3 Widgets ......................................................................................................................................... 3
2.4 Plugins to control site function and design ................................................................................... 9
2.5 Adding Content to your Pages .................................................................................................... 10
2.5.1 Home Page .......................................................................................................................... 11
2.5.2 About Gladiator Fitness page .............................................................................................. 16
2.5.3 Edit the Services page ......................................................................................................... 22
2.5.4 Affordable Plans page ......................................................................................................... 23
2.5.5 Our Team page .................................................................................................................... 36
3 Out-Lab................................................................................................................................................ 36
3.1 Home Page: ................................................................................................................................. 37
3.2 About us page ............................................................................................................................. 38
3.3 Services Page ............................................................................................................................... 39
3.4 Galleries Page .............................................................................................................................. 40
3.5 Our Team Page ............................................................................................................................ 41
4 Submission .......................................................................................................................................... 41
4.1.1 Grading ................................................................................................................................ 41
![Page 3: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/3.jpg)
1 | P a g e Armand Poblete © 2016
1 BACKGROUND
Now that we have created our WordPress Template we will learn how to control content and layout. Now again there is
no standard way of doing this, since every theme handles content and layout differently. Fortunately, there is some
pattern and basic functionality that is standard from template theme to theme.
Today we will learn to use a typesetting (the way data and text are arranged) method using “Lorem Ipsum” (Latin text
that the publishing industry uses as a text filler or place holder) to create our website.
Scenario
So you have the template up now let us fill it will text and image placeholders.
2 IN-LAB WORK
2.1 FILES YOU NEED 1. Your WordPress account (studentxx) 2. In-Lab Files
2.2 SETTING UP 1. Go to our WordPress Intranet url http://143.207.100.196:8888/studentxx/ and you should see this:
2. Now let’s login to the administrative view of WordPress: http://143.207.100.196:8888/studentxx/wp-admin.
Your username and password should be studentxx
![Page 4: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/4.jpg)
2 | P a g e Armand Poblete © 2016
3. Once logged in you should see the Dashboard:
![Page 5: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/5.jpg)
3 | P a g e Armand Poblete © 2016
2.3 WIDGETS Widgets are small apps that WordPress templates make use for different purposes. So we will need to remove the
existing widgets and add only a blog archive (which we will call Classes) and a Calendar.
![Page 6: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/6.jpg)
4 | P a g e Armand Poblete © 2016
Let’s remove the following widgets: Recent Comments, Archives, Recent Post, and Meta
Enter the title of our search field:
![Page 7: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/7.jpg)
5 | P a g e Armand Poblete © 2016
Now the Categories will display post (not pages) under each of the categories that we will create later.
Add a calendar to your site by clicking on the button.
![Page 8: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/8.jpg)
6 | P a g e Armand Poblete © 2016
Now enter the calendar title:
![Page 9: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/9.jpg)
7 | P a g e Armand Poblete © 2016
So far you should have this widget arrangement:
There is an understood rule in web-development that any dynamic content (content that changes by growing or
reducing) should be placed below static content. In our example our search and calendar are static. They don’t grow or
change information unlike the Announcement category will grow every time we add a new category. So let’s move the
Announcement to the end of the widget list by simply dragging it down.
![Page 10: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/10.jpg)
8 | P a g e Armand Poblete © 2016
![Page 11: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/11.jpg)
9 | P a g e Armand Poblete © 2016
2.4 PLUGINS TO CONTROL SITE FUNCTION AND DESIGN WordPress Plugins help add functionality to your website. Now majority of the available of WordPress are free, but
have no standard way of using each plugin. We will install a plugin called PixGridder to control our content design and
later we will install an image gallery and an email system from our contact page.
1. Add a design controller: type layout on the keyword search:
Look for PixGridder and install.
![Page 12: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/12.jpg)
10 | P a g e Armand Poblete © 2016
2.5 ADDING CONTENT TO YOUR PAGES In this lab we will not work on the content pages under Services and Affordable Plans. We will do that in the next lab.
We need to change the site’s theme so that it looks a little cooler and would been the Responsive quality that Google is
looking for:
![Page 13: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/13.jpg)
11 | P a g e Armand Poblete © 2016
2.5.1 Home Page
![Page 14: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/14.jpg)
12 | P a g e Armand Poblete © 2016
Create a two column layout
On the left column we will add some Lorem Ipsum:
Then go to http://www.lipsum.com/ and scroll down
![Page 15: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/15.jpg)
13 | P a g e Armand Poblete © 2016
![Page 16: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/16.jpg)
14 | P a g e Armand Poblete © 2016
![Page 17: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/17.jpg)
15 | P a g e Armand Poblete © 2016
Let’s just copy the first two paragraphs and go back to your site. Paste the paragraphs into the content area:
Delete the circled sentences:
![Page 18: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/18.jpg)
16 | P a g e Armand Poblete © 2016
On the right column add another set of Lorem Ipsums:
2.5.2 About Gladiator Fitness page
Then update the page:
![Page 19: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/19.jpg)
17 | P a g e Armand Poblete © 2016
This should take us back to the default. So we will need to add a video and some text.
To add a video from YouTube, open a new tab on your browser and go to youtube.com and type CrossFit on the on the
search:
Find and search for this video:
![Page 20: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/20.jpg)
18 | P a g e Armand Poblete © 2016
Click and open it and copy the URL: https://www.youtube.com/watch?v=GimrZbS-390
Go back to your page and change the view to text:
![Page 21: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/21.jpg)
19 | P a g e Armand Poblete © 2016
And paste the URL in the main content.
Now why in text view. WordPress will automatically embed the video if the URL is not converted to link. Unfortunately,
if we were in Visual view WordPress will automatically convert the URL into a link.
Once you have pasted the URL go back to Visual view and you should see this:
![Page 22: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/22.jpg)
20 | P a g e Armand Poblete © 2016
If the URL has an underline you did it wrong
Below the URL add a few paragraphs of the Lorem Ipsums:
Update the page
![Page 23: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/23.jpg)
21 | P a g e Armand Poblete © 2016
Or in preview mode
![Page 24: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/24.jpg)
22 | P a g e Armand Poblete © 2016
2.5.3 Edit the Services page
Create a two column using our plugin: On the left column add a bullet list and on the right add a numbered list
Left Column:
Right Column
![Page 25: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/25.jpg)
23 | P a g e Armand Poblete © 2016
2.5.4 Affordable Plans page
We will insert an image, modify the image, and create two other rows with links
To start open Affordable Plans page for editing:
![Page 26: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/26.jpg)
24 | P a g e Armand Poblete © 2016
Upload and insert this image:
![Page 27: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/27.jpg)
25 | P a g e Armand Poblete © 2016
But the image is too small so we will need to edit it to make a bit larger so that we can see the text in the image. Click on
the image
![Page 28: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/28.jpg)
26 | P a g e Armand Poblete © 2016
Update the page before we continue
![Page 29: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/29.jpg)
27 | P a g e Armand Poblete © 2016
Add a row:
![Page 30: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/30.jpg)
28 | P a g e Armand Poblete © 2016
On the left column upload this image:
On the right column add this set of text:
![Page 31: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/31.jpg)
29 | P a g e Armand Poblete © 2016
At the end of the paragraph we will insert a link called View Monthly Plans
![Page 32: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/32.jpg)
30 | P a g e Armand Poblete © 2016
Highlight it and click on the link icon
Click on the link Options:
![Page 33: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/33.jpg)
31 | P a g e Armand Poblete © 2016
Once you select the correct page it should show up in the URL above:
![Page 34: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/34.jpg)
32 | P a g e Armand Poblete © 2016
Go ahead and add the link
![Page 35: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/35.jpg)
33 | P a g e Armand Poblete © 2016
Create another row and repeat the process except put the image to the right. Make sure
that you set the image size to medium. Add the following text on the left column and a link called View Annual Plans
that point to Annual Plans
![Page 36: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/36.jpg)
34 | P a g e Armand Poblete © 2016
Once completed it should like the example below:
![Page 37: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/37.jpg)
35 | P a g e Armand Poblete © 2016
![Page 38: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/38.jpg)
36 | P a g e Armand Poblete © 2016
2.5.5 Our Team page
Open Our Team page and let’s try to recreate this page : http://143.207.100.196:8888/teacher_example01/our-team/
3 OUT-LAB
Go to your out-lab site Otis Bakery & Catering Inc. site and install the following plugin – PixGridder to control the
content. Add some widgets:
Now recreate these pages:
![Page 39: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/39.jpg)
37 | P a g e Armand Poblete © 2016
3.1 HOME PAGE: Replicate this page http://143.207.100.196:8888/out-lab-example/
![Page 40: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/40.jpg)
38 | P a g e Armand Poblete © 2016
3.2 ABOUT US PAGE Visit http://143.207.100.196:8888/out-lab-example/about-us/ and recreate it.
![Page 41: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/41.jpg)
39 | P a g e Armand Poblete © 2016
3.3 SERVICES PAGE Replicate the design and behavior of this page: http://143.207.100.196:8888/out-lab-example/services/
![Page 42: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/42.jpg)
40 | P a g e Armand Poblete © 2016
3.4 GALLERIES PAGE Replicate the design and behavior of this page: http://143.207.100.196:8888/out-lab-example/galleries/
![Page 43: Lab 6: WordPress Content Control - iClassBook – by ... About Gladiator Fitness page..... 16 2.5.3 Edit the Services page ..... 22 2.5.4 Affordable Plans page ..... 23](https://reader031.vdocuments.net/reader031/viewer/2022022512/5ae88d2e7f8b9a6d4f8fa490/html5/thumbnails/43.jpg)
41 | P a g e Armand Poblete © 2016
3.5 OUR TEAM PAGE Replicate the design of this page: http://143.207.100.196:8888/out-lab-example/our-team/
4 SUBMISSION
Open a new Microsoft Document and type your URL and save the document as Firstname_Lastname_WordPress2.docx.
Submit the document to the class site.
4.1.1 Grading
Scoring Points
Step 3.1-3.2 20 Step 3.3-3.4 20 Step 3.5 20 Total 60