Intro to K2 Templating – Part 1
Ever thought the default Joomla system was a bit plain? You can use the K2 component to create a unique Joomla website. K2 allows you to create sub-templates so each page layout can be different. This tutorial will cover K2 templating basics.
Our assumptions for this tutorial
- You know HTML
- You know CSS
- You know Javascript
- You know some PHP
- You’ve used K2 in the Joomla! administrator
For the Novice (Or Noobs)
Joomla is a MVC (Model-View-Controller) based web application. When we refer to a “view” file in this tutorial, we’re talking about the template file that represents a “view” portion of the MVC. (View = Template File.)
You can always override most of Joomla’s views by placing files in the “html” folder within the Joomla template. If you don’t know how a Joomla template works, I suggest that you look at this: http://docs.joomla.org/Creating_a_basic_Joomla!_template
You can get K2 view override packages here: http://getk2.org/documentation/tutorials/77-k2-template-override-package-comparison
They have template override packages from K2 version 2.2, so make sure to pick the right version (we are using version 2.6.5 for the tutorial). You can unpack the template override files into your /template/YOURTEMPLATE/ folder to get started (obviously, replace that YOURTEMPLATE with your template’s name).
First, the K2 CSS situation
You will notice that within the Joomla “css” folder, there is a K2.css and K2.print.css file. The “K2.css” file is the default K2 stylesheet while the “K2.print.css” file contains print-specific CSS for K2. You can always choose to exclude these stylesheets in the K2 preferences located in the website’s Administrative backend. If you want to have a specific stylesheet for each K2 template, you can install CSS4K2.
Template Files
The folder html/com_k2/ is where you will find the K2 views. You will notice that there is a sub-folder labeled “default” within the “com_k2” folder. This is the default theme. You can copy the “default” folder and rename it within the “com_k2” folder to create other sub-templates.
I will briefly explain each view file in order of importance:
category.php This file is for category views. The most common scenarios is to have the category view list each item with a brief overview. The homepage of Y-Designs is represented with this file.
category_item.php This file contains the item listing that the “category.php” uses in its loop to display a brief overview of an item; a child template for ”category.php”. NOTE: This is not the view for the item itself, but when the item is listed within a category.
item.php This file represents the item itself. This blog post you see here is rendered using ”item.php”.
Below are less used view files:
category_item_links.php This pertains to link listings within the category item view.
item_comments_form.php This file is for the comment system within “item.php”.
itemform.php This file is for item form views. Item forms allow users to submit items from the frontend.
latest_item.php and latest.php Within the Menu Manager in K2, there is an option to create menu items based on latest items from users or categories. This is very helpful if you are creating a blog. Both the “latest_item.php” and “latest.php” files contain code for the latest view. Think of the “latest.php” as being the “category.php” and the “latest_item.php” as being the “category_item.php”.
tag.php Tags allow you to categorize items even if they are in different categories. The tag.php is for tag views (what a user sees when they click into a tag link). Should you choose to use Tags, the tag links can be displayed using the K2 Tools Module within the Module Manager. We’ll be talking about modules in another tutorial soon.
user.php You can have user specific views as well, where you can view items written by a specific user. The user.php file contains code for the user view. This can often contain all of the user’s items and cause trouble for your SEO (too many links on one page). We often suggest adding a nofollow/noindex for this page.
Shared Template Files
You will notice that some of the views are outside of the “default” folder. These are shared between all K2 templates. For example, a search results shouldn’t have different templates. These files are:
generic_search.php This file contains the search results view. If you choose to implement live search and a user types something in the search field, a list of search results will display below the search box. This can be implemented using the K2 Tools Module within the Module Manager.
generic.php this file contains code for the search result and date specific views. These can be implemented using the K2 Tools Module within the Module Manager.
register.php Within the Menu Manager in K2, there is a menu item type called “registration form”. This allows people to register as a user on a website from the frontend. The “register.php” file contains code for the user registration view on a website.
How is K2 structured?
Below is a general diagram that shows you how K2 is organized (default category.php view). Below only covers the category.php view. The item.php view (when you click into an item) is straight in that file and is much less confusing so we won’t go over that.
Category.php – an example
Now if we go into the “category.php” file we can look at how the K2 views are structured.
If statement structure
You will see the below if statement structure throughout the views (line 57 of category.php). This if statement in particular is in reference to category titles. In this case, the if statement determines whether category titles are set to display within the parameters set by the user in the administrator/backend. If they are set to display, the title is displayed as an h2 element. There is another if statement within the h2 element which checks the parameters for the item counter (total paginated).
<?php if($this->params->get('catTitle')): ?> <!-- Category title --> <h2><?php echo $this->category->name; ?><?php
if($this->params->get('catTitleItemCounter')) echo ' ('.$this->pagination->total.')'; ?></h2> <?php endif; ?>
Different Item Lists
Starting at line 134, you will also notice that there are three item lists: leading, secondary, and primary. These allow for greater customization, such as variable image sizes, between different item listings within a category.
Loops
You will notice that on line 141, there is a statement as shown below. This is a loop. A loop will go through all the items specified.
<?php foreach($this->leading as $key=>$item): ?>
Loading views and further customization
On line 154, you will see how the category_item.php view is loaded into the category view. As an example, if you wanted to further customize the view for leading items only, you can create a category_leading.php file and specify to loadTemplate(‘leading’) instead. This again allows for even greater customization.
$this->item=$item; echo $this->loadTemplate('item');
Get creative with it
There is so much you can do with views aside from just displaying content. Below is a link to one of our tutorials that explains how to use the K2 extra fields system (contained within item.php) in order to add a rel=“canonical” to your page.
Conclusion
Overall there are a lot of different ways to customize your Joomla website using K2. Make mistakes, break your site and have fun with it!
If you can’t figure it out, you can always hire us to fix it too 😉
Now that you’ve learned some of the basics of K2 templating, read our Part 2 in our K2 Templating series.
