LuckyMarble / i3dthemes: Wordpress 'Theme' Tutorials

Tutorial Index

 

Section 4: Working with Pages

Exercise 4-2: Adding New Pages

Adding a page

You can quickly and easily add as many new pages to your website as you need! When adding a page, you can also decide if you want this new page to be listed in the main level of navigation, or listed under anther page ( such as a Parent / child ) relationship in the drop / flyout menu's.

  • click on the 'Pages' menu
  • click on 'Add New'

Naming your page

When you create a New Page, Wordpress will switch the main panel to display the 'Add New Page' panel.  When it does this, your mouse cursor will automatically be 'positioned' inside to the 'Title' field at the top of the Add New Page panel. Naming your new page should be the first thing you do.

  • once you click on 'Add New' you'll see the 'Add New Page' display panel
  • if your cursor is not already in the 'Title' field box, click inside this box now

  • with your mouse inside the 'Title' field text box, type a name for your page

  • when you add a new page, Wordpress will assign a 'Permalink' to this page, learn more about Permalinks here
  • unless you're familiar with Permalinks and know how to change them, leave the Permalink with it default setting

 

Selecting a layout and columns

The first thing we recommend you do after creating a page, is selecting a layout and columns.. you can change this at any time using the 'Edit' page panel.

There are several types of layouts to choose from, each layout contains different types of components. If you've worked with Wordpress themes in the past, you may be familiar with 'Widget's', and adding 'Widgets' to specific pages... with your theme configuration, we've taken a lot of the 'work' out of configuring your widgets for you... Often times, a 'Widget' such as a photo gallery, will look out of place, if placed into a section of the page that wasn't really designed for a 'Photo Gallery' widget or component. So we've designed 'template' pages, pages specifically designed with 'Widgets' pre-installed. From an 'esthetic' viewpoint, all the components were designed to fit into each of the template type layouts, so it 'looks' like it should, not like something was 'jammed' into the page just to display 'media' or 'photos'. The other main advantage of this method over the 'Widget' method, is Widgets need to be 'installed' first, then added to the 'page', by providing a template page that includes the widgets designed to fit into that page, no need for installing and lining things up, just select your 'layout' and the number of columns you want in that page.

  • to select a 'layout' scroll down to the 'Layout' section, and click on the layout you would like for your new page
  • when you select a 'Page Layout:' the selected layout will display a 'blue' border to confirm your selection
  • there are typically 3-4 types of layout to choose from....
  • Primary: most often used for the 'home page', the header is a bit taller than the other pages and it includes the Portfolio component in the header
  • Secondary: most often used for the regular web pages, the header is shorter than the Primary page, and it also includes a smaller 'split image rotator' component
  • Minimized: most often used for pages not requiring any image components, the header is very short so the content is much closer to the top of the page
  • Alternate: is a modified version of the Primary page, this page displays the 'split image rotator' component in place of the 'Portfolio' component

  • to select the number of columns you would like for your new page, scroll down to the next section 'Select Your Column Layout:'
  • click on the column layout that will work best for this page
  • typically you'll be able to choose from:
  • 1 Column: this layout has 1 content area in the center of the page
  • 2 Columns (Left): this layout has 1 narrower fixed width column on the left, and 1 center content area
  • 2 Columns (Right): this layout has 1 narrower fixed column on the right, and 1 center content area
  • 3 Columns: this layout has 1 fixed width left column, 1 fixed width right column, and 1 center column

Adding Sidebars

Sidebars allow you to add content to your pages, content that is consistent from page to page such as a 'menu bars'.

Sidebar selection changes depending on which 'column' layout you select. For example, if you want to display the 'Side menu' in your web page, you will need to select a column layout that includes the left or right column. For complete details on working with Sidebars, check out our 'Video Demo'. This is one video tutorial that you can really benefit from by 'watching' opposed to 'reading'.

  • to add a sidebar to your page, scroll down to the 'Sidebars' section, and using the options available, select which sidebars to place into the corresponding areas of the page diagram

SEO Properties

The Properties section allows for a Page Title and Page Description. The Page Title is 'text' on your page, wrapped by the H1 tag. The Page Description is text on your page wrapped in the H2 tag.

"H" tags are special 'tags' that search engines use to determine the importance or relevance of the information on your page, compared to a search engines 'search term'. The Title should best describe what your page is about, and the description should 'add' to the title with as few words as possible. This could be a slogan, or some sort of term you think your web site visitors would use to find your site using a search engine. You can always leave these fields bank.

  • scroll down to the 'Properties' section
  • Page Title - place your cursor into the text box and enter your 'Page Title'
  • Page Description - place your cursor into the text box and enter your 'Page Description'
  • your 'Page' title can be the same name you used when you first created your page

Allowing Discussions

Allowing Discussions is a cool little feature of Wordpress that places a 'discussion' box into your new page, which allows your visitors to submit a question or comment about this page, or it's contents.

  • to allow discussions on this page, click the 'Allow Comments' box

  • to see what this looks like in an actual web page, take a look here.. the following image is a snapshot of a 'comment' left by a visitor, and the comment box itself.

 

Allowing Comments / Allow 'trackbacks and pingbacks'

Trackbacks and pingbacks are a way of allowing someone from another 'blog' to post the information or comments from your page or blog, into there's and visa versa. Here's a link to some information on using Trackbacks and Pingbacks if you're interested.

Page Revisions

Page revisions simply list the last time this page was revised, changed, or updated. It also tells you 'who' did the revising.

Good to know if you have multiple users editing the web site. This is a handy little box though. If you click on a 'Revision' date, you will link to the 'Post Revision for .. Panel' which enables you to scroll through previous revisions and restore them if need be, or just compare revisions if you find that helpful.

 

What do Page Attributes do? **important to know if you plan on using 'sub menu's'

Page Attributes allow you to arrange your pages in a hierarchy. You can set 'no parent', or select any one of the pages listed under the 'Parent' menu, as the 'Parent' page. This is VERY important if you want your new page to be listed under another page in your Navigation and menu components that use 'sub menu's.

  • in the following example, we've selected the 'Services' page to be the 'Parent' page as we want our new page to be displayed as a 'sub page or child page' under the Services menu in our website.

  • Once you've selected a 'Parent' page, you'll need to do 2 more things before you see your page listed in your website
  • Publish the page ( more on that at the end of this Exercise )
  • Add the page to your 'Navigation' components such as the Side menu, Drop Down menu or the Zoom Menu

 

  •  in the following screenshot, we've published the new page and now we are working in the Navigation 'Manage Side Menu' panel
  • just click on the "Navigation' menu >> Side menu ( or menu component of your choice )
  • click on the 'checkbox' beside your new page name

  • The example image directly above shows what happens when we switch to the 'Navigation >> Side Menu' page. Our new page is displayed in the 'List' and we just need to check the box to enable this new page to be viewable by our visitors. You can do this at any time, so if the content of your page isn't ready, do this as the 'Final' step.
  • Here's a screenshot of 'where' our new page is displayed in the 'Side menu' component

 

Parent / Order  **important to know if you plan on using 'sub menu's'

Parent Order is used if you have multiple web pages under the Parent page. This selects which page is listed first, then second, third and so on. If a number is not assigned, the child pages will simply be listed alphabetically.

Publishing your page

When you add a new page to your website, it is not automatically 'added' to the Navigation, or even your live site. The page is left in Draft until you publish it. You can edit a 'Draft' page at any time, by clicking on the 'Page' menu, then the 'Edit' button, this will bring up a list of pages in your site, select and open the 'draft' page you wish to edit.

Publishing your page enables you to be viewed by your web site visitors. In order for them to find this page, you will want to add it to your Navigation menu's, or link to it through the content in your web pages using a hyperlink. Most people will be using the 'Navigation' option as it's easy, and consistent.

Let's take a look at the "Publishing" options now.

  • to 'Publish' a page, click on the 'Publish' button

  • Before you go ahead and publish your page, there are some other important 'publish' settings you may be interested in.
  • Save Draft: this allows you to save your page, but not publish the changes up to your website.
  • Preview: allows you to preview the Live web page, to see what it will look like in your website, but not actually allow anyone to see it besides you.
  • Status: a nice little option if more than one person is editing the site, and you want someone to set the Status to 'Pending Review'
  • Visibility: you can make your pages 'Public' 'Password protected' or 'Private' to learn more about these options click here
  • Publish 'Immediately': one of the neatest options. You can schedule a 'date' to publish your page. If content for your is page it 'time sensitive' you can delay publishing your page, and select a Date and 'Time' to publish the page .. unless your publishing lottery numbers, we'd like to know that ahead of time please.
  • Publish (BUTTON): the button that sets your page 'LIVE', click and upload the new page to your site.
  • Trash: not happy with this page, just 'Trash' it, to remove it from the Edit page and Navigation lists.
Removing a page
  • To remove a page from your site, click on the 'Page'  >> Edit menu
  • in the 'list' .. locate the page you wish to remove
  • hover over the page name with your mouse
  • and click on the 'Trash' link

Continue to Exercise 4-3: Including a Product Catalog (optional)