Creating a custom template for the Page List block

In this tutorial we will learn how to create a custom template for the Page List block. A custom template will change the way that a block is displayed. You can create a custom template for almost any block. In this example we will make the page list block display a thumbnail beside the page title and description. 

Creating a custom template

To create a custom template for a block you need to create a folder with the name of the block in the /blocks directory of the concrete5 installation. In our example I will create one called 'page_list'. Then create a directory named 'templates' in the folder you just made. Next create a folder inside that directory with the name of your custom template. I am going to call mine 'themelist'. You can create as many custom templates for a block as you want to. So your whole path to your custom template should be '/blocks/page_list/templates/themelist/'. Now create a file called view.php, this will contain the actual code to display the block. Note that view.css and view.js are automatically loaded if you want to use css or javascript in your template. For my purposes I am going to include view.php and view.css.

Creating Page Attributes

Next we are going to create a new page attribute, in which the user can select the thumbnail that they want to display in the page list. To do this, go to 'Pages and Themes' in your dashboard, and then click on 'Page Types.'

Then go to the bottom and click on the 'Add Page Attribute' button. Now you need to choose an Attribute type; for our example we are going to use the 'Image/File' attribute. Now you need to select a Handle and a Name. The handle is what we are going to use in our php code later. I am going to use the handle 'theme_thumbnail' and the name 'Theme Thumbnail.' Then click on 'Add Attribute' and you should see it listed in under the rest of the Page Attributes.

Now you need to add your page attribute to the Page Type that you are going to use. I am just using the 'Right Sidebar' page type, so I will click on the 'Edit' button beside it. Then you need to check the attribute, and click on 'Update Page Type' so you can start using it on that page type.

Creating the custom template

Now we are going to make the custom template in the view.php file that we created earlier. In our example we just need to make some changes to the custom template that is already included with conrete5. So I will copy the code from '/concrete/blocks/page_list/templates/custom.php' to my view.php so that I can make my changes. You can see the changes in the following code. In line 18 I add the thumbnail; you can see that I use the attribute handle 'theme_thumbnail' that we created earlier. And in line 16 I am wrapping each section in a 'div' tag to make it easier to style.