Theme Templates Integration: Example

Now is the time to see how to make a full theme templates support on the example. We will use free theme called Delicate (available here: wordpress.org/extend/themes/delicate). This is clean and simple template and it will be easy to modify to underline the whole process.

There are two ways to add templates:

  1. Automatically created them from plugin, and after that adjust created templates to the theme templates structure.
  2. Manually create templates by copying the existing theme templates.

First, create product type Phone, for this one templates will be single-gdpccpt_phone.php and archive-gdpccpt_phone.php. And we need single-gdpccmp_brand.php and archive-gdpccmp_brand.php for company type brand and 2 more: gdpc-compare.php and gdpc-products.php. If you choose to use method one, plugin will add 6 templates into the theme folder. To match template structure, here is the list of templates we need and comparable theme templates:

  1. single-gdpccpt_phone.php -> single.php
  2. archive-gdpccpt_phone.php -> archive.php
  3. single-gdpccmp_brand.php -> single.php
  4. archive-gdpccmp_brand.php -> archive.php
  5. gdpc-compare.php -> page.php or template-full.php
  6. gdpc-products.php -> page.php or template-full.php

If you choose manual creation, copy corresponding theme templates into templates we need. If you want to auto create templates, make them based on the TwentyTen theme.

Compare Template

This is one time template modification, same one is used by all product types. We will base this template on a normal page template, and best to use one without sidebars. Delicate theme has such template, in the file called: template-full.php. If theme has no such template, you can use page.php So, open this and gdpc-compare.php files in editor. Goal is to identify layout for the page when content is removed.

Typically content is the PHP code starting with if (have_posts()). For Delicate theme template-full.php template it starts on line 12 and ends on line 27. When that is gone, you will see layout that starts with get_header() has 4 DIV elements, empty space for content, ending DIV’s and get_footer(). Our compare template has similar structure, so in gdpc-compare.php, you need to adjust DIV’s to match ones in the Delicate template-full.php template.

Products Index Template

Same as for compare template, only using different GD Products Center function.

Single Template: Product Type and Company

Single template for phones single-gdpccpt_phone.php should match layout of the standard single template that is called single.php. Open both templates in editor. Again, we need to identify content of the page, and this it starts with on line 4, ends on line 52. Everything we will use to match the layout in our phone template. Similar thing is done for single-gdpccmp_brand.php.

Archive Template: Product Type and Company

Again, same method as before, but this time we need to match our new archive-gdpccpt_phone.php template to default archive.php. Content in this archive.php starts at line 9, ends on line 54. Rest we use to match in our template. If you did everything here, here is how the archive for phones will look like with this theme, with default styling from the plugin. Similar thing is done for archive-gdpccmp_brand.php.

Phone Archive
Phone Archive

So, now that templates are ready, you can make changes to the styling of the rendering made by the plugin. Add all styling you need to style.css of the theme. If you want to see how the finished templates look, you can download all 6 templates I created and compare to your work and use for reference. All templates in archive go into theme folder.

Download: Delicate Theme Integration

Comments

Leave a Reply