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 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


3. Once logged in you should see the Dashboard:


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.


Let’s remove the following widgets: Recent Comments, Archives, Recent Post, and Meta

Enter the title of our search field:


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.


Now enter the calendar title:


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.


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.


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:


2.5.1 Home Page


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

http://www.lipsum.com/


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:


On the right column add another set of Lorem Ipsums:

2.5.2 About Gladiator Fitness page

Then update the page:


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:


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:


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:


If the URL has an underline you did it wrong

Below the URL add a few paragraphs of the Lorem Ipsums:

Update the page


Or in preview mode


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


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:


Upload and insert this image:


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


Update the page before we continue


Add a row:


On the left column upload this image:

On the right column add this set of text:


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


Highlight it and click on the link icon

Click on the link Options:


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


Go ahead and add the link


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


Once completed it should like the example below:


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:

http://143.207.100.196:8888/teacher_example01/our-team/


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

http://143.207.100.196:8888/out-lab-example/


3.2 ABOUT US PAGE Visit http://143.207.100.196:8888/out-lab-example/about-us/ and recreate it.

http://143.207.100.196:8888/out-lab-example/about-us/


3.3 SERVICES PAGE Replicate the design and behavior of this page: http://143.207.100.196:8888/out-lab-example/services/

http://143.207.100.196:8888/out-lab-example/services/


3.4 GALLERIES PAGE Replicate the design and behavior of this page: http://143.207.100.196:8888/out-lab-example/galleries/

http://143.207.100.196:8888/out-lab-example/galleries/


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

http://143.207.100.196:8888/out-lab-example/our-team/

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

Documents