Follow

Creating a Custom Theme

In this tutorial we will:

  1. Create a theme
  2. Add template.php
  3. Create your template

CO-EXISTING WITH A WEBSITE / HAVING MORE THAN ONE THEME

By default, the template used for the index.html pages is /node/<node_id>. However, you may already have a website using another theme on your instance. In this case, you can configure the module to render the equivalent of /node/<node_id>?template=<yourtemplate>.

This is configured in Pugpig Settings > Default Template

THEME'S ANATOMY

WordPress themes live in sites/yoursitename/themes/ by default. The themes subdirectory holds

  • Stylesheet files
  • JavaScript files
  • Template files
  • Fonts
  • Images

TEMPLATE FILES

Templates are PHP source files used to generate the pages requested by visitors.

The most important templates we will be dealing with is template.php.

We can also create as many custom templates as we need.

OTHER FILES

You can add other files such as to your theme such as javasript files or default images can be added to your theme. 

A useful file to add is function.php. This can hold common function called by different template files.

STEP 1: CREATE A THEME

A theme is defined in a yourtheme.info file. This file can contain information about your theme including:

  • name - theme name
  • description - description to appear in Drupal
  • base theme - define you base theme if any
  • core
  • package
  • version
  • engine
  • project 
  • datestamp
  • screenshot - default is screenshot.php if not defined

Open a new info file and copy the below into the top of the file. The rest of the file can remain blank.

name = mytheme
description = My Theme created for Pugpig apps.
version = "7.x-0.0_0"
core = 7.x
engine = phptemplate

Save the file in to your .../sites/mysite/theme/my-new-custom-theme folder.

In the same folder save an image as screenshot.png. This will be the display image for your theme in Drupal.

STEP 2: Add template.php

Open a new php file and copy the below into the top of the file. The rest of the file can remain blank.

<?php

function mytheme_preprocess_page(&$variables, $hook) {
pugpig_template_preprocess($variables, $hook);
}

This function does the following:

  • It will redirect the view of an edition page to the Edition Flatplan Administration page
  • It will redirect the home page to the Pugpig Flatplan page if the Redirect home page to Pugpig admin setting is enabled
  • It will redirect the user to the Pugpig Flatplan if viewing a node directly after a save from the flatplan
  • It will set a variable called pugpig_template and add a theme suggestion if a Default Template is supplied in the Pugpig Settings.

Save the file in to your .../sites/mysite/theme/my-new-custom-theme folder.

You should be able to enable your theme under the Appearance tab on Drupal.

STEP 3: Creating a template

Pugpig is designed to allow you to use standard Drupal templating, although there are a few things you need to be aware of:

  • All local URLs (to assets or other pages) need to be generated using the Pugpig helper functions described below to ensure they exist in the manifest
  • A Pugpig setting is provided if you need a Pugpig set of templates to co-exist with a different template, for example your website.

Your custom template should output some html to structure our data. This will use fields from our module. Some additional helper functions exist to help with Pugpig specific items:

LINKS TO INTERNAL PAGES

function pugpig_get_index_relative_page_url($nid);

URLS TO THEME ASSETS

function pugpig_theme_item_url($file_name); 

URLS TO IMAGES (INCLUDING IMAGE STYLES)

function pugpig_get_index_relative_image_path($image_node, $image_field, $index = 0);

For example, to show the third image in the field field_image_gallery:

<img src="<?php print pugpig_get_index_relative_image_path($node, 'field_image_gallery', 2); ?>">

FIGURES

If you wish to enable touch-for-full-screen and galleries, you need to wrap your images in a figure. Pugpig provides a helper function for this.

Note: that this takes the caption from the alt text and the copyright from the title.

function pugpig_print_figure($node, $field_name, $index, $group_name, $figure_class='');

For example:

pugpig_print_figure($node, 'field_image_intro', 0, 'main_gallery', 'my_figure_class');

INDEX PAGES AND TABLE OF CONTENTS

Pugpig provides some helper functions that makes it easier for you to access the node of child or sibling pages from anywhere as long as you're in the same edition.

For example:

$edition_id = pugpig_get_node_edition_id($node->nid);
$edition = node_load($edition_id);
$sections = pugpig_get_nested_section_array($edition);
pugpig_print_toc($sections);

HANDLING INLINE IMAGES (FOR EXAMPLE FROM IMCE)

If you have inline images inside a rich text field, you need to do two things two ensure they work properly offline in a Pugpig app:

  • Ensure the images are included in the manifest.
  • Ensure the paths to the images are pugpig relative paths, and match the manifests.

For example, to include the images from the body field in the manifest, implement the hook pugpig_get_extra_manifest_attachments as follows:

function mymodule_pugpig_get_extra_manifest_attachments($node) {   
  return pugpig_extract_manifest_from_field($node, 'body');
}

To ensure you are outputting the correct paths, in your template you need to use pugpig_rewrite_html() :

// Get the text from the field as normal
$fixed_markup = pugpig_rewrite_html($markup);

NEXT STEPS

Have a look at the How To Guides (Drupal) and How To Guides SDKs

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk