Creating and using custom page titles

Posted 16th Nov 2017

#api #fields

With processwire, you have full control over the output, which mean you can use a single or combination of text fields for a page title. Let's dig in.

By default, every page has a 'title' text field. This is just the title of the page as shown in the admin, it doesn't mean you have to use this for you page title meta tag. In some cases it makes sense, but sometimes you want to separate the admin page title with the title that will actually be output on your web pages.

Admin > Setup > Fields

Create a text field called 'altTitle'. If you need a refresher, check out fields and how to create them.

Creating the altTitle field
Creating the altTitle field Zoom

Now you can add this to a template. If you're unsure, you can first read about adding fields to templates.

Adding altTitle field to basic-page template
Adding altTitle field to basic-page template Zoom

Once this is done, you can edit a page created with the 'basic-page' template.

Editing a page with title and altTitle fields
Editing a page with title and altTitle fields Zoom

If you''re wondering how I got these fields lined up next to each other, you can read the creating grids of fields post where this technique is outlined. Enter some data into these fields and save your page. Now we can output one of them, both of them, or some other combination as your page titles.

/site/templates/basic-page.php

For demonstration and for clarity, I'll show the entire head section here.

<?php namespace ProcessWire; ?>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
    <?php
      // OPTION 1: If you want just the 'title' field
      echo $page->title;
    ?>

    <?php
      // OPTION 2: Just the 'altTitle' field:
      echo $page->altTitle;
    ?>

     <?php
      // OPTION 3: The 'altTitle' field OR the 'title' (i.e. if the 'altTitle' is empty
      // or not present on the template, then will just print value of 'title')
      echo $page->get("altTitle|title");
    ?>   

    <?php
      // OPTION 4: The 'title' field with the 'altTitle' appended to it (if 'altTitle'
      // exists on template)
      echo ($page->altTitle) ? $page->title . " - " . $page->altTitle : $page->title;
    ?>

    <?php
      // OPTION 5: Some static text, with the altTitle appended after
      echo "My site name" . " - " . $page->altTitle;
    ?>
  </title>
</head>

Remember that you will only use one of the options above. This technique can also be used for other tags, like the descripion meta tag. For this site, I use:

<!-- Get 'metaDescription' field OR 'summary' field OR 'title' (the fallback) -->
<meta name="description" content="<?= $page->get('metaDescription|summary|title'); ?>">

Try these techniques for other tags. Check out the page source of this page, see the meta tags for Facebook (property="og:") and Twitter (name="twitter:") so when a post here is shared, custom information is used rather than random stuff grabbed from the page. They're all generated by techniques like the ones described on this page.

Remember to experiment, and have fun

Feedback & support

I hope you enjoyed this tutorial. You can support pwtuts by following on @pwtuts.

Related tutorials / See all