OpenSourceVarsity

pdf icons

Creating Page(s) In WordPress

FOCUS: WordPress has a really simple, consistent work flow, for creating a web page. In this chapter we are focused on this work flow. Once you’ve grasped this you can build any page you want using the WordPress editor. In this material we are focused on creating a HOME page.

NOTE: Having said that All Pages are created in WordPress using an identical workflow.

Open your favorite Browser and Login to your WordPress Admin Dashboard normally.
 
After logging in successfully, the WordPress Admin Dashboard page opens as shown in diagram 1. The Dashboard provides access to many default WordPress functions and features.

Locate Pages in the left hand side vertical menu items as shown in diagram 1.

diagram1.png
Diagram 1

In the pop over menu that appears, click Add New as shown in diagram 2.

diagram2.png
Diagram 2

The WordPress page creation UI is displayed in your Browser as shown in diagram 3.

diagram3.png
Diagram 3

The Add New Page UI has two sections, the topmost being the one where you enter the Page Name in our case we will enter HOME.

The section immediately below has two tabs at top right hand corner as shown in diagram 4.

diagram4.png
Diagram 4

The tabs are labeled Visual and Text.

Working With The Text Tab Active

When the tab Text is active, (click it and it turns White indicating that it’s active), the WordPress editor works just like a code editor.

One needs to know HTML coding to add text, images, video, and audio within webpage content when the WordPress webpage editor is in Text mode.

Working With The Visual Tab Active

When the tab Visual is active, (click it and it turns White indicating that its active), the WordPress editor works just like the M.S. Word editor.

One can add text, images, video and audio to webpage content without really knowing any HTML code, using simple drag and drop.

NOTE: In this chapter we are assuming that the reader does not have HTML coding skills, hence we are going to create our HOME page keeping the WordPress editor’s Visual tab active.

We have the WordPress Editor in Visual mode as shown in diagram 5, i.e. The Visual tab is white.

diagram5.png
Diagram 5

Pre-planning For The Home Page

Whenever we create a webpage we first create all its textual content in a Text editor, like Notepad, and save this to hard disk in a file named eg. home.txt. We have done the same in this case as well. We created a pure text file (download it from here) which we are going to use when creating our HOME page.

NOTE: Our file consists of Ipsum lorem text, has a few paragraphs with an appropriate page headline and a few paragraph headlines as well. Similar to what any textual based HOME page would be.

Now there are two ways that one can add page content:

  • Copy and paste the content from a pre-created text file

OR

  • Simply type the content in using the WordPress editing section as though it is the M.S. Word editor

We’ve chosen to go the Copy and Paste way. We are going to use this technique to help us quickly stream the content of our HOME page.

Creating The Page Title

Right at the top of the WordPress Add New Page UI, there is a text box that prompts Enter title here. In this text box we will enter HOME as shown in diagram 6.

diagram6.png
Diagram 6

Once the page title has been entered move your mouse cursor into the editing area below, while ensuring that the Editing Tab is set to Visual.

NOTE: If Visual is grey and Text is white, simply click on Visual to activate it.

Next open home.txt created earlier and select all its contents. Copy and Paste the content within the Home Page editing area as shown in diagram 7.

diagram7.png
Diagram 7

NOTE: The nifty little word count value displayed at the bottom of the page.

Next you can do one of two things:

Click Preview on the right hand side of the page.
OR
Click Publish on the right hand side of the page.

Both buttons are displayed in diagram 7.

Clicking On Preview

When Preview is clicked on, WordPress displays the HOME page created in a new Browser tab.

This gives you the opportunity to have a look at the page and tweak its look and feel if you are dissatisfied with it. The Home page preview is displayed in diagram 8.

diagram8.png
Diagram 8

A Brief Recap On Page Creation

  • Get to the Admin Dashboard
  • In the left hand side menu system hover on Pages
  • In the pop out menu click Add New
  • In the Pages UI add the page name in the text box uppermost
  • Check that the WordPress editor is in Visual mode
  • Stream the textual content of the page within the editing area either by:
  • Typing it in

OR

  • Copy / Paste content from a pre-created text file
  • In the right hand side of the Editor click Save Draft
  • Finally click Preview to see what you’ve done in a new tab in the Browser
October 14, 2016
Design by Ivan Bayross and Meher Bala © 2016 All Rights Reserved
X