Templates

Template files are the PHP files that determine layout of pages. The current templates used in the Bridge School theme are outlined below. As a note, any template prefaced with tpl- is a custom template. All the others are the Bridge School theme versions of core Wordpress templates (visit Wordpress Template Hierarchy for more info).

Template	Description
404.php	404 page
category.php	List posts belonging to category
front-page.php	Homepage
home.php	Blog index page
index.php	Default template if none other is used
page.php	Renders a singe page (not post)
search.php	The search results page
searchform.php	Partial that renders the search form
single.php	Renders a single blog post
tag.php	List posts with specified tag
tpl-page-blank.php	Blank page with no sidebars
tpl-section-home.php	Section home page with carousel (e.g. /about)
tp-user-reg.php	User registration page

Creating a Template

The templates that exist now should cover most use cases. However, if a new template needs to be created, simply create the file (make sure to preface the filename with tpl-). At the very top of the file, add the following code:

<?php
/*
Template Name: Template title goes here
*/
?>

As long as that comment is in place in the file, Wordpress will find that file, recognize it as a template file and add it to the dropdown box for selecting a template when creating/editing a page. The template name you define in the code will be what appears in the dropdown list.

Custom admin elements

Once you create a template, you may want to add additional functionality to it. For example, the tpl-section-home.php template includes a carousel at the top of the page. Therefore, when editing a page that uses that template, we need a form element available that allows us to select the images for the carousel. To create these custom form elements in the admin view, we're using a plugin called Custom Field Suite. Using this plugin, you can create new admin elements. Once the elements are created, you can select what pages they shoud appear on. One of the ways to do this is to tell the custom element that is should appear on any page using a certain template. In the tpl-section-home example, we simply set the carousel to appear when editing any page that uses that template.

Once your custom admin form is in place, you can edit your pages. You will then need to make use of the custom fields in the template file. You can do this by accessing the object returned when calling the CFS() function. which will hold references to all of the fields you set up for the template using Custom Field Suite (referenced by the name you provided when setting up the forms). Again, using the tpl-section-home.php template as an example, we set up our form element to allow the user to create any number of panels for the carousel. Each panel then has multiple properties (title, text, and image). We can output all the elements by looping through the panels and outputing the properties as appropriate. Here is an overly simplified example:

<?php foreach(CFS()->get('panels') as $panel) : ?>
  <div class="hero-panel">
    <?php if($panel['title'] || $panel['text']): ?>
      <div class="hero-content" class="hero-content">
        <h1 class="hero-title"><?php echo $panel['title']; ?></h1>
        <div class="hero-text"><?php echo $panel['text']; ?></div>
      </div>
    <?php endif; ?>

    <img src="<?php echo $panel['image']; ?>" width="100%" class="hero-image" />
  </div>
<?php endforeach; ?>