GD Products Center plugin has own rendering, but it requires a little help from the theme: it needs few templates added so that theme can make a call to the plugin rendering engine. Plugin makes a job of integration really easy, not only for our xScape based themes, but for any other theme.
Templates needed by the plugin
For each product type you need 2 templates: one for single product and the other for the archive. Beside that, plugin needs another template used for compare pages, and this one is not dependent on product types, one such template will be used with all product types. Compare template can have any name, by default it is called ‘gdpc-compare.php’. So, if you have product type named ‘phone’, for this one custom post type is ‘gdpccpt_phone’, and you need templates:
- archive-gdpccpt_phone.php
- single-gdpccpt_phone.php
Plugin has folder called themes, where you will find two folders, one for TwentyTen and other for TwnetyEleven themes and example files for both based on tempates from these themes. You can manually copy these files and rename them to name of the product type, or you can do it from plugin. These templates can be used with any theme, but you might need to make a changes to some of the classes or styling, important thing is that main part of template remains. Different themes use different elements on the page, different classes for DIV’s or sidebar positions or other things that can be different. Default templates for 2010 and 2011 themes are best example of this layout, and you can use your theme single and archive files as a template to create new templates needed, or you can start with examples provided by the plugin and make changes to fit your theme.
Creating templates automatically
To create templates automatically, once you create the product type, in the product types list you will see Themes Templates option. When you click on it, new page will load and you will see info on the current theme, plugin will search for needed templates. If they are not found, you can create them. If you use default WP themes 2010 or 2011, this is easiest one, plugin will copy exact templates. If you use some other theme (other than our xScape themes), you can choose 2010 or 2011 templates to use. And if you use xScape, plugin will know what to do and will create everything you need. Theme folders must be writable for this to work.
Modify templates for any theme
If you don’t use xScape themes or 2010 and 2011 default WP themes, you need to follow this next part. I still recommend using automatic templates creation. Plugin will offer to use 2010 or 2011 templates. You need to decide what works better for your theme, both default templates are very similar in layout. Also note that 2011 is HTML5 theme, so for most, it’s better to use 2010 templates. To demonstrate the process, I will use Delicate theme (most popular free theme on WordPress.org).
Theme Templates
To start, install the theme, and activate it. Let’s say you have created Phones product type (name: phone). Go to the GD Products Center -> Products panel, in the list of products for product Phones, click on ‘theme templates’ link. A new page will open, like on the image on the right. For this theme, select TwentyTen from the select box and click Create Template button. Plugin will add new templates, and you will get confirmation page with all 3 templates with green found status.
Now we need to adjust all 3 templates to the theme in terms of layout. We will go through all 3 templates for this. Also, if you add more product types, you need to use same method for each one.
1. 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. 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.
2. Single Template
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.
3. Archive Template
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.
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 3 templates I created and compare to your work and use for reference:
Delicate templates for GD Products Center
Working with xScape Theme Framework themes
As with all our plugins, they are directly supported by the xScape Theme Framework and all our themes. To add templates for your product type, use same method described before. But after you create templates, you don’t need to edit anything, everything is already set and ready to use.
xScape Template
What you can do is to adjust templates through layout manager of xScape theme as with any other template. What is great about this is that you can choose plugin rendering templates to use to display the data. So, if you open for edit in Layout Manager single-gdpccpt_phone.php template, switch to custom layout and make sure that Content is set to GDPC Product.In custom layout change what you need in terms of layout, and to select plugin rendering templates, open Special content features editor (icon with two letters i). You will see popup like on the image on the right, and for each product page you can select template to use. Same method will work with the rest of theme templates used for this plugin, all have similar settings. How to change rendering template used by normal theme? Read on…
Change plugin rendering template in the themes
As you can see, with xScape this is very easy and it doesn’t require any coding. With normal themes, you have modified theme templates files, and by default they are set to load default rendering templates by the plugin. All rendering templates by the plugin by default are in plugin folder called ‘tpl’. But, to make it easier to see what is used for what, it’s best to use plugin panel called Template where all rendering templates you can use are listed. Plugin allows for adding custom templates here, but that is not part of this tutorial. Also, this panel is work in progress, and right now only lists templates, it will have more features later including options to edit or create templates.
Right now lists shows rendering template types: archive, single, compare, widget-listing, widget-product. Each one has one or more template. For each template you have title, name (most important, used by functions), description and status. Some templates are empty right now, so don’t use them for now. Description is also missing for most templates at the moment.
If you look at theme templates we created previously, each on uses different rendering functions. Each function corresponds to a rendering template type. So, we have rendering templates types, functions for them, and theme templates where are used. Rendering template name can be specified as a argument to the rendering function to change the output displayed by plugin.
- gdpc-compare.php: comparison template, uses ‘compare’ rendering templates and functions for rendering is gdpc_render_compare. Right now we have only one rendering template for this, so nothing to change here.
- archive-gdpccpt_phone.php: archive template, uses ‘archive’ rendering templates and function for rendering is gdpc_render_archive. By default, this will render Simple Filter List template. To switch to grid template for instance, you need to change function call in archive-gdpccpt_phone.php to this:
gdpc_render_archive('simple-grid'); - single-gdpccpt_phone.php: single product template, uses ‘single’ rendering templates and function for rendering is gdpc_render_single. Since single product can have 5 different pages, each one of them has own templates. So, in the single file you will see array with templates used for each page type. And changing that will change rendering template loaded by the plugin.
Plugin is still under heavy development, and it will change a lot until 1.0.0 is released, and this tutorial will also change to reflect the plugin features.
Minor 1.2.1 is released: Updated readme.txt with FAQ and info....
Millan,Your plugin is wonderful! I'm eagerly awaiting the release of...
Hi, little question, will we be able to selectively delete...
Thanks, very useful!
