Lab 6: WordPress Content Control

Size: px

Start display at page:

Download "Lab 6: WordPress Content Control"

Henry Hensley
5 years ago
Views:

1 Lab 6: WordPress Content Control ()

2 CONTENTS 1 Background In-Lab Work files you need Setting up Widgets Plugins to control site function and design Adding Content to your Pages Home Page About Gladiator Fitness page Edit the Services page Affordable Plans page Our Team page Out-Lab Home Page: About us page Services Page Galleries Page Our Team Page Submission Grading P a g e

3 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 and you should see this: 2. Now let s login to the administrative view of WordPress: Your username and password should be studentxx 1 P a g e

4 3. Once logged in you should see the Dashboard: 2 P a g e

So we will need to remove the existing widgets and add

5 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. 3 P a g e

6 Let s remove the following widgets: Recent Comments, Archives, Recent Post, and Meta Enter the title of our search field: 4 P a g e

7 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. 5 P a g e

8 Now enter the calendar title: 6 P a g e

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

9 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. 7 P a g e

10 8 P a g e

We will install a plugin called PixGridder to control our content design and later we will install an image gallery

11 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 system from our contact page. 1. Add a design controller: type layout on the keyword search: Look for PixGridder and install. 9 P a g e

12 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: 10 P a g e

13 2.5.1 Home Page 11 P a g e

14 Create a two column layout On the left column we will add some Lorem Ipsum: Then go to and scroll down 12 P a g e

15 13 P a g e

16 14 P a g e

17 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: 15 P a g e

18 On the right column add another set of Lorem Ipsums: About Gladiator Fitness page Then update the page: 16 P a g e

19 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: 17 P a g e

Click and open it and copy the URL: https://www.youtube.com/watch?

20 Click and open it and copy the URL: Go back to your page and change the view to text: 18 P a g e

21 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: 19 P a g e

22 If the URL has an underline you did it wrong Below the URL add a few paragraphs of the Lorem Ipsums: Update the page 20 P a g e

23 Or in preview mode 21 P a g e

24 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 22 P a g e

25 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: 23 P a g e

26 Upload and insert this image: 24 P a g e

27 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 25 P a g e

28 Update the page before we continue 26 P a g e

29 Add a row: 27 P a g e

30 On the left column upload this image: On the right column add this set of text: 28 P a g e

31 At the end of the paragraph we will insert a link called View Monthly Plans 29 P a g e

32 Highlight it and click on the link icon Click on the link Options: 30 P a g e

33 Once you select the correct page it should show up in the URL above: 31 P a g e

34 Go ahead and add the link 32 P a g e

35 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 33 P a g e

36 Once completed it should like the example below: 34 P a g e

37 35 P a g e

2.5.5 Our Team page Open Our Team page and let s try to recreate this page : http://143.207.100.

38 2.5.5 Our Team page Open Our Team page and let s try to recreate this page : 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: 36 P a g e

39 3.1 HOME PAGE: Replicate this page 37 P a g e

40 3.2 ABOUT US PAGE Visit and recreate it. 38 P a g e

41 3.3 SERVICES PAGE Replicate the design and behavior of this page: 39 P a g e

42 3.4 GALLERIES PAGE Replicate the design and behavior of this page: 40 P a g e

3.5 OUR TEAM PAGE Replicate the design of this page: http://143.207.100.

43 3.5 OUR TEAM PAGE Replicate the design of this page: 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 Grading Scoring Points Step Step Step Total P a g e

Welcome to you user manual for your website

Welcome to you user manual for your website Your website is unique to you. We build our websites on the Wordpress platform. and each of our websites are designed to be different. To achieve this we use