lab 6: wordpress content control - iclassbook – by ... about gladiator fitness page..... 16 2.5.3...

Lab 6: WordPress Content Control

Armand Poblete (© 2016)

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

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

2 | P a g e Armand Poblete © 2016

3. Once logged in you should see the Dashboard:

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.

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:

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.

6 | P a g e Armand Poblete © 2016

Now enter the calendar title:

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.

8 | P a g e Armand Poblete © 2016

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.

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:

11 | P a g e Armand Poblete © 2016

2.5.1 Home Page

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

13 | P a g e Armand Poblete © 2016

14 | P a g e Armand Poblete © 2016

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:

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:

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:

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:

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:

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

21 | P a g e Armand Poblete © 2016

Or in preview mode

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

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:

24 | P a g e Armand Poblete © 2016

Upload and insert this image:

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

26 | P a g e Armand Poblete © 2016

Update the page before we continue

27 | P a g e Armand Poblete © 2016

Add a row:

28 | P a g e Armand Poblete © 2016

On the left column upload this image:

On the right column add this set of text:

29 | P a g e Armand Poblete © 2016

At the end of the paragraph we will insert a link called View Monthly Plans

30 | P a g e Armand Poblete © 2016

Highlight it and click on the link icon

Click on the link Options:

31 | P a g e Armand Poblete © 2016

Once you select the correct page it should show up in the URL above:

32 | P a g e Armand Poblete © 2016

Go ahead and add the link

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

34 | P a g e Armand Poblete © 2016

Once completed it should like the example below:

35 | P a g e Armand Poblete © 2016

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:

37 | P a g e Armand Poblete © 2016

3.1 HOME PAGE: Replicate this page http://143.207.100.196:8888/out-lab-example/

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.

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/

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/

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