Setup

We will be using the following fields in this template. You can add them through your ProcessWire administration interface. The following is a list of field names (Field Types). The default options will suffice for this tutorial.

  • title (PageTitle)
  • heading (Text)
  • body (TextArea)

Now that we have our fields, we need to create a template and add our fields to that template.

  1. In Setup -> Templates, Add a new Template.
  2. We will start by creating a new template without a file.
  3. Name the template, "page".
  4. Click Add Templates. the page template should now be listed in your Templates section.
  5. Click the page template to view it's fields/options.
  6. Add all 3 fields we created above to the page template. Save.

We now need to apply the page template to our home page.

  1. View Pages
  2. At your Page root (Home), click on the edit link.
  3. Choose Settings and make sure the Home page has the "page" Template selected. Save.

Adding Content

Go ahead and edit your Home page, you should see the 3 fields we created earlier. We can now fill in the following information.

  • Title - Home
  • Heading - My Heading
  • Body - My Body

Save the page. You now have basic content in your CMS and are ready to start developing your template files.

Creating the template file

Within your site/templates folder, create a new template and call it "page.php". Insert the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>     <title></title>     <meta http-equiv="content-type" content="text/html; charset=utf-8" />     <style type="text/css">         @import "<?php echo $config->urls->templates; ?>styles/bluebox.css";     </style> </head> <body id="home">     <div id="bg_container">         <div id="container">             <div id="masthead">                 <a id="logo" href="./">Blue Box Consultants</a>                            </div>             <div id="content">                 <div id="bodycopy">                                                </div>                 <div id="sidebar">                                                 </div><!--sidebar-->             </div><!--content-->         </div><!--container-->     </div><!--bg_container-->

    <div id="footer">         <div id="footer_container">             <div id="footer_right"></div>         </div>     </div>

</body> </html>

This will serve as our basic site layout through these tutorials.

ProcessWire gives us many ways to use the field information we created in the administration interface. The first variable we will be working with is $page. The $page variable is provided to every template, and it contains all the fields specific to the page being viewed. This includes both built-in fields, which are common to all pages, as well as the custom fields. The custom fields are those that you define in Admin > Setup > Fields and then assign to your template in Admin > Setup > Templates. $page also has several functions/methods that enable you to perform other tasks with it. The built-in fields and functions/methods are documented on this page -- link.....

First we will want to display the title:

<title><?php echo $page->get("title"); ?></title>

This will display the title of the page using this template (Home). We use the get method to get the field we would like to use. Another way to write this would be:

<title><?php echo $page->title; ?></title>

Go ahead and view the page in your browser.  You should see an empty page layout with the Title, "Home" as the browser title. Very simple. We will impliment the remaining two fields the same way.

<div id="bodycopy">                <h1><?php echo $page->heading; ?></h1> <?php echo $page->body; ?> </div>

Save your work and view the live site. You should have all the fields show up properly on your home page. What if you want your heading area to display the title instead? Or maybe display the title but only if the heading field is empty? I usually keep the heading the same as the title, but occasionally the heading needs to be a bit longer than the title. I keep the title nice and short so it will show up properly in the navigation (covered later).

Let's try the following code and see how it works.

<h1><?php echo $page->get("heading|title"); ?></h1>

If you reload the page, you will get the same excact result you had before. This time go into the admin interface and edit the Home page. Remove all text in the Heading field and save. Reload the page. Notice that it is displaying the title now? We are using the get method and giving it the selector "heading|title". This will get the heading field or the title if there the heading field is empty. See the API for more examples of selectors. These will be covered more through the tutorials.

Comments

No comments yet. Be the first to post!

Post a Comment

Your e-mail is kept confidential and not included with your comment. Website is optional.