Joomla tempates talk

Creating a Joomla Template

Hi Everyone !Thank you so much for coming I really appreciate you coming out for this talk !We’re going to talk about creating custom Joomla templates. Custom templates are really special in the joomla world, or any cms. Custom templates are unique because they provide an alternative to theme clubs and templates you purchase there. !This allows for some great creativity to be expressed by developers and designers, which results in users really being engaged in your content and your sites. Custom templates give sites a level of professionalism which raise the site above similar sites, creating a better user experience and ultimately a better more useful website.

Table of Contents·Tools & Utilities ·Code Editors ·Localhosts ·Anatomy of Templates ·Index.php - the brain ·Markup - the body ·template.css - look and feel ·templateDetails.xml - Wrapping paper ·Package & Install

I want to go over some tools utilities that we use to build templates. Mostly on the code side, we are not going to talk about design. I’m not a designer I’m a developer. So we’ll specifically focus on code. !I’m going to go over in some pretty deep detail the anatomy of a joomla template. I’ll go over the elements and what they do and how they function. !The last thing I’ll show you is how to package and install a template into your Joomla website.

Tools of the Trade

Tools of the trade !Obviously templates are mostly code, so we are going to look at code editors.

Code Editor

This is a screenshot of a code editor called Sublime text. It’s not my number one editor but its one that I use a lot and enjoy.

Code Editor: Options

Sublime Text Coda PHPStorm Atom Notepad++

Free + Paid Paid Free Free

All Platforms OSX All Platforms All Platforms All Platforms

The first one is sublime text. its capable of editing any form of text like html, css, php, python. It has tons of plugins which make it very powerful. Available for all platforms. !The other one is coda and I’ve used it. I don’t use it anymore - switched to Sublime. Coda 1 is what I used, coda 2 is out. It is a paid app. It’s a very nice interface application, native application has a great UI and amazing tools built into. It’s created by the same developers who built Transmit. !PHP storm is not a regular text editor. It is an IDE, which is a integrated development which includes features like integration with tools like php unit.. This is my number one editor. It is a paid application. It’s more functional than sublime or coda. It has debugging, break points, syntax error highlighting. !$30-40 personal license. It is by far my favorite editor that I love. I will use it forever! !The new editor on the block is called Atom. It’s produced by the developers of Github. It’s in beta form. OSX installer is an app. Windows and Linux requires a build process with the binary. Free, beta status currently. !Notepad++ - Had to put this down because I felt like I had to. It’s a standard, go to editor. Many developers use it, many fans out there. Free, lots of

A few different languages

Languages !Building templates involves using more than one language.

Just to build a template!

(X)HTML CSS PHP XML Javascript

SkillLevel Fluent Fluent Beginner Beginner Beginner

The first language is HTML. Or XHTML in this case. In the HTML world you should be fluent to expert level of understanding markup. You should understand what HTML is what it does and how it functions. !CSS - Other major component of template. You should be fluent in CSS. Understand how selectors work. How an ID is different from a class, chaining, sub class selectors. Understand how this works! !PHP that you will write is mostly copy paste. You won’t have to dream this up or write it from scratch. Copy paste, replace a few things but that’s it. !Same goes for XML. There is a minor XML element - specifically installing your template into a Joomla. You need to use XML to install your template. Nothing crazy or fancy. Many examples of how to do this. !There is javascript, this is mostly optional. You don’t need to write. Most templates do have javascript, beginner level. I have done templates with tons of a javascript and no javascript. Encourage how javascript works so you can debug and work through any issues you encounter.

Apache mySQL PHP

To Power Joomla

What do you need to power Joomla. You need a web server, in this case apache. There are other web servers capable of powering Joomla. You could run Nginx, Litespeed, but Apache is the most popular. !Joomla supports multiple databases. You can run postgres and sql server. Most people use Mysql, mysql has been used in Joomla for the longest time. Most support, least bugs. Use mysql. If you don’t know why you need postgres or sql server don’t use them. !PHP of course. !You need all this just to power joomla.

Localhosts

Homebrew XAMMP MAMP WAMP

Free Free Free+ Free

OSX All Platforms Win / Mac Windows

How can you get mysql and php and a web server on your machine? !A localhost is a great free way to do this. These are your options for doing that. !All of these apps are packaged server tools. They come as a single package which sets up mysql, php, and the web server on your machine. All of these Apache. They are all free, MAMP offers a pro version. !Homebrew is different than these. Homebrew is a package manager that you install on your mac. It allows you use the command line to install many applications. Apache, mysql, and php are all services that you install just like you would on a server. Homebrew allows you to do this on your mac. This is a customized install and a great way to have a customized method. !I’ve used all of these methods, Homebrew is my current tool. If I was not using Homebrew I would xampp.

Anatomy of a Joomla Template

Those are the tools. Lets talk about the anatomy of a joomla template, the different elements.

index.php

template.css images/

templateDetails.xml

We have an index.php file. Images, css and other media. !What are these different elements have in terms of contents. We have javascript and compiled css. Compiled CSS is it’s own topic, but it’s a language which is compiled and the compiler generates a static css. it’s the current trend in the web industry - I use LESS. Joomla as a project has adopted LESS and compiled CSS. There are great features and benefits to doing this. This isn’t required but it’s a great aid and tool for writing css.

index.php


templateDetails.xml


index.php


templateDetails.xml

javascript


index.php


templateDetails.xml

javascript

Compiled CSS

LESS / SCSS


joomla root | templates | | my_template | | | index.php | | | templateDetails.xml | | | favicon.ico | | | images | | | | logo.png | | | css | | | | template.css

The structure here is this !We have Joomla’s root. we have a template directory within that root. Template is adject to other folders like the admin application, the components, modules, and plugins. Inside of templates we have default Joomla templates. Then you will have the template you’re building which I’ve called my_template. !All our template stuff is stored here in a tiny little package.




All our template stuff is here


index.php - responsibilities

Index.php has a few responsibilities and does most of the work. !It is the ENTRY POINT into the template. !It is responsible for doing the following things. Doctype - in HTML is the type document version, that the document will be. !Index.php - even though it has a php suffix / extension it is mostly markup. !The items that are not HTML I will point out. It will define the html document, the head and the body are all defined in this file. The minor bits of php which is copy / pastable into your specific purpose and needs. !There will be XHTML. I point this out specific because HTML and XHTML are different. In this case the xhtml statements are processed and converted from


‧Defines Doctype



‧Defines Doctype

‧Mostly HTML



‧Defines Doctype

‧Mostly HTML

‧Should include <html>, <head> and <body>



‧Defines Doctype

‧Mostly HTML


‧Some bits of PHP



‧Defines Doctype

‧Mostly HTML


‧Some bits of PHP

‧XHTML Keywords / Key-phrases



‧Defines Doctype

‧Mostly HTML


‧Some bits of PHP


‧Modules



‧Defines Doctype

‧Mostly HTML


‧Some bits of PHP


‧Modules

‧Component


index.php - Keywords / phrases

<html> <head> <jdoc:include type=“head” /> </head> <body> <main> <jdoc:include type=“component” /> </main> <aside> <jdoc:include type=“modules” name=“sidebar” /> </aside> </body> </html>

This is a basic entry point - index.php !You can see it is mostly HTML. The elements that aren’t HTML are XHTML - these are the xhtml keywords / placeholders. !Type=header is the header of the html document -File includes like css, javascript -title tag, meta information Inserted by Joomla’s app into the page. !The other xhtml element is the component - the current menu item component that is being loaded by the application. !The final element is the type= modules. Modules is different from component and head - it has a name parameter. this element can be used on the page multiple times. You cannot use component or head multiple times. Modules can be used multiple times.






Will be replaced with HTML










index.php - useful PHP

<?php if($this->countModules(‘sidebar’): ?> <aside> <jdoc:include type=“modules” name=“sidebar” /> </aside> <?php endif; ?>

Here’s where we get in the php. !The very first and last line here are PHP statements. The statement says if the count modules method is true print out the contents. When this is true the module is inserted. !If this is false or any other value that is not true, the entire contents gets skipped and processing starts directly after the end of the php if statement. !There is another relationship between the PHP and the xhtml we should know about here.






If countModules()method is true print this out









The module position name is used in both


index.php

<?php $doc = JFactory::getDocument(); $doc->addStylesheet(JUri::root() . ‘templates/’ . $this->template . ‘/css/template.css’);

css/template.css

body { /* my css selectors */ } !#container { /* selectors */ } etc…

templateDetails.xml

<extension version="3.1" type=“template" client="site"> <name>tmpl_cohesive</name> <author>Chad</author> <authorEmail>[email protected]</authorEmail> <copyright></copyright> <description></description> <files> <filename>index.php</filename> <folder>less</folder> </files> <positions> <position>sidebar</position> </positions> </extension>

This is the template details xml file. Here are the different areas of this file. This is the extension version.

templateDetails.xml



templateDetails.xml


Joomla Version


templateDetails.xml



templateDetails.xml



templateDetails.xml



templateDetails.xml


Extension Type (template)


templateDetails.xml



templateDetails.xml



templateDetails.xml



templateDetails.xml


Can have files & folders - root files required


templateDetails.xml



templateDetails.xml



templateDetails.xml



templateDetails.xml


Module positions - for module manager


templateDetails.xml



templateDetails.xml



Packaging Template

index.php


templateDetails.xml

index.php


templateDetails.xml

index.php


templateDetails.xml

index.php


templateDetails.xml

mytemplate.zip

Questions?

CohesiveWebsites.com

twitter facebook /cohesiveweb

Chad Windnagle

chadwindnagle.com

twitter ! /drmmr763

Thank you!

Design

Joomla tempates talk