Joomla! Day Chicago 2011 presentation on building Joomla! templates with an emphasis on PHP code you can use to gain more control of your templates.

1. TEMPLATING THE RIGHT WAY
by Jonathan Shroyer
Twitter: @learncss
Email: jonathan@corephp.com
by Jonathan Shroyer

2. TEMPLATE
BASICS

3. DID YOU KNOW?

4. DID YOU KNOW?
Tables are for tabular
data... not for layouts

5. PROPER HEADINGS

6. PROPER HEADINGS
• H tags are possibly most important for SEOs

7. PROPER HEADINGS
• H tags are possibly most important for SEOs
• One H1 per page

8. PROPER HEADINGS
• H tags are possibly most important for SEOs
• One H1 per page
• Opening page H1 should be company name
and tagline/short description.

9. PROPER HEADINGS
• H tags are possibly most important for SEOs
• One H1 per page
• Opening page H1 should be company name
and tagline/short description.
• H1 tags on all inner pages should be article
title.

10. PROPER HEADINGS
• H tags are possibly most important for SEOs
• One H1 per page
• Opening page H1 should be company name
and tagline/short description.
• H1 tags on all inner pages should be article
title.
• NEVER skip a tag! (ie. H2 to H4)

11. LOGO CODE FOR YOUR
TEMPLATE

12. LOGO CODE FOR YOUR
TEMPLATE
if( JURI::current() == JURI::base() ) { ?>
<h1 id="company-logo">
<a href="<?php echo JURI::base(); ?>">
Company Name
</a>
</h1>

13. LOGO CODE FOR YOUR
TEMPLATE

14. LOGO CODE FOR YOUR
TEMPLATE
} else {
<p id="company-logo">
<a href="<?php echo JURI::base(); ?>">
Company Name
</a>
</p>
}

15. HEADINGS INSIDE OF YOUR
TEMPLATE

16. HEADINGS INSIDE OF YOUR
TEMPLATE
• In your overrides you should use the same logic:
if( JURI::current() == JURI::base() ) {
$h = 2;
} else {
$h = 1;
}
<h<?php echo $h; ?>>Title</h<?php echo $h; ?>}

17. HEADINGS INSIDE OF YOUR
TEMPLATE
• In your overrides you should use the same logic:
if( JURI::current() == JURI::base() ) {
$h = 2;
} else {
$h = 1;
}
<h<?php echo $h; ?>>Title</h<?php echo $h; ?>}
• Module titles are virtually always H2

18. IMAGES

19. IMAGES
• Use alt tags on images which you want people to
know what it is. (ie. If image wasn't there, would
the description add to the content?)

20. IMAGES
• Use alt tags on images which you want people to
know what it is. (ie. If image wasn't there, would
the description add to the content?)
• Learn how to size images properly and how to
compress them. Extra size slows down site and
can lower SEO value.

21. WHAT ABOUT HTML5?

22. WHAT ABOUT HTML5?
• No SEO advantage at this time

23. WHAT ABOUT HTML5?
• No SEO advantage at this time
• Personally don’t recommend it as support is
less than HTML4.

24. WHAT ABOUT HTML5?
• No SEO advantage at this time
• Personally don’t recommend it as support is
less than HTML4.
• Only use if you have a specific market that you
know has the capability to properly display it.

25. WHAT ABOUT HTML5?
• No SEO advantage at this time
• Personally don’t recommend it as support is
less than HTML4.
• Only use if you have a specific market that you
know has the capability to properly display it.
• It’s a great movement, but it’s really still the
Wild Wild West.

26. NOT-SO-BASIC
TEMPLATE BASICS

27. LEARN THE JOOMLA LANGUAGE

28. LEARN THE JOOMLA LANGUAGE
• Why should you learn the Joomla! library for
template development?

29. LEARN THE JOOMLA LANGUAGE
• Why should you learn the Joomla! library for
template development?
• Allows you to do advanced logic with your
template.

30. LEARN THE JOOMLA LANGUAGE
• Why should you learn the Joomla! library for
template development?
• Allows you to do advanced logic with your
template.
• Gives you options you never had before

31. LEARN THE JOOMLA LANGUAGE

32. LEARN THE JOOMLA LANGUAGE
• JHTML

33. LEARN THE JOOMLA LANGUAGE
• JHTML
• link, image, iframe, date, tooltip, calendar, etc.

34. LEARN THE JOOMLA LANGUAGE
• JHTML
• link, image, iframe, date, tooltip, calendar, etc.
• Example:
$link = JHTML::_('image', 'images/stories/clock.jpg',
null);
echo $link;

35. LEARN THE JOOMLA LANGUAGE
• JHTML
• link, image, iframe, date, tooltip, calendar, etc.
• Example:
$link = JHTML::_('image', 'images/stories/clock.jpg',
null);
echo $link;
• http://api.joomla.org/__filesource/fsource_Joomla-
Framework_HTML_joomlahtmlhtml.php.html#a191

36. ADDING EXTERNAL
CSS STYLESHEETS (JOOMLA 1.6+)

37. ADDING EXTERNAL
CSS STYLESHEETS (JOOMLA 1.6+)
• $doc = JFactory::getDocument();
$path = 'templates/' .
$this->template . '/css/mystylesheet.css';
$doc->addStyleSheet( $path,
, ‘text/css’, “screen, projection” );

38. ADDING EXTERNAL
CSS STYLESHEETS (JOOMLA 1.6+)
• $doc = JFactory::getDocument();
$path = 'templates/' .
$this->template . '/css/mystylesheet.css';
$doc->addStyleSheet( $path,
, ‘text/css’, “screen, projection” );
• You can also use:
JHTML::stylesheet( $path,
array('media'=>'screen, projection' ) );

39. ADDING CSS STYLES
FOR ONLY IE

40. ADDING CSS STYLES
FOR ONLY IE
$stylelink = '<!--[if lte IE 6]>' ."n";
$stylelink .= '<link rel="stylesheet"
href="../css/IEonly.css" />' ."n";
$stylelink .= '<![endif]-->' ."n";
$doc =& JFactory::getDocument();
$doc->addCustomTag($stylelink);

41. MAKE YOUR TEMPLATE
UPGRADABLE
In templateDetails.xml the opening is:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//
DTD template 1.0//EN" "http://
www.joomla.org/xml/dtd/1.6/template-
install.dtd">
<extension version="1.7" type="template"
client="site" method=”upgrade”>

42. BUILDING BLOCKS
USING CSS

43. SIZE BOX

44. SIZE BOX
grid_size boxes are used for width, height and overall
positioning of box.

45. SIZE BOX
grid_size boxes are used for width, height and overall
positioning of box.

46. SIZE BOX
grid_size boxes are used for width, height and overall
positioning of box.
.grid_size {
width: 100%;
height: auto;
float: left;
display: inline;
position: relative; }

47. SIZE BOX
grid_size boxes are used for width, height and overall
positioning of box.
.grid_size {
width: 100%;
height: auto;
float: left;
display: inline;
position: relative; }

48. STYLE BOX

49. STYLE BOX
grid_style boxes are used for padding, borders and
positioning of content within box.

50. STYLE BOX
grid_style boxes are used for padding, borders and
positioning of content within box.

51. STYLE BOX
grid_style boxes are used for padding, borders and
positioning of content within box.
.grid_style {
width: auto;
height: auto;
display: block;
top: 0;
left: 0;
clear: both; }

52. STYLE BOX
grid_style boxes are used for padding, borders and
positioning of content within box.
.grid_style {
width: auto;
height: auto;
display: block;
top: 0;
left: 0;
clear: both; }

53. EXAMPLE BOX

54. EXAMPLE BOX
<div class=”grid_size”>

55. EXAMPLE BOX
<div class=”grid_size”>
<div class=”grid_style”>

56. EXAMPLE BOX
<div class=”grid_size”>
<div class=”grid_style”>
CSS Box

57. EXAMPLE BOX
<div class=”grid_size”>
<div class=”grid_style”>
CSS Box
</div>

58. EXAMPLE BOX
<div class=”grid_size”>
<div class=”grid_style”>
CSS Box
</div>
</div>

59. EXAMPLE BOX
<div class=”grid_size”>
<div class=”grid_style”>
CSS Box
</div>
</div>

60. GETTING CONTROL
OF YOUR TEMPLATE

61. ADD AS MANY VARIABLES AS
POSSIBLE TO BODY TAG CLASS

62. ADD AS MANY VARIABLES AS
POSSIBLE TO BODY TAG CLASS
<?php
$body = '';
if( JRequest::getInt( 'Itemid' ) ) {
$body .= 'itemid-'.JRequest::getInt( 'Itemid' );
}
if( JRequest::getInt( 'id' ) ) {
$body .= ' id-'.JRequest::getInt( 'id' );
}
if( JRequest::getVar( 'task' ) ) {
$body .= ' task-'.JRequest::getVar( 'task' );
}

63. ADD AS MANY VARIABLES AS
POSSIBLE TO BODY TAG CLASS

64. ADD AS MANY VARIABLES AS
POSSIBLE TO BODY TAG CLASS
if( JRequest::getVar( 'view' ) ) {
$body .= ' view-'.JRequest::getVar( 'view' );
}
if( JRequest::getVar( 'layout' ) ) {
$body .= ' layout-'.JRequest::getVar( 'layout' );
}
if( JRequest::getVar( 'option' ) ) {
$body .= ' option-'.JRequest::getVar( 'option' );
}

65. ADD AS MANY VARIABLES AS
POSSIBLE TO BODY TAG CLASS

66. ADD AS MANY VARIABLES AS
POSSIBLE TO BODY TAG CLASS
$body .= ' lang-' . $this->language;
$body .= ' direction-' . $this->direction;
if( JURI::current() == JURI::base() ) {
$body .= ' frontpage’;
}

68. global $mainframe;
$menu = @$mainframe->getMenu();
$active = @$menu->getActive();
while ( $active->parent > 0 ) {
$parent = $menu->getItem(
$active->parent );
if ( 0 == $parent->parent ) {
$top_level = $parent;
break;
} else {
$active = $parent;
}
}
$body .= ' menu_parent-' . $active->id;

70. $user =& JFactory::getUser();
$userGroups = $user->groups;
foreach($userGroups as $key => $value){
$replace = array(".", " ");
$body .= ' group-' .
strtolower( str_replace( $replace, '_', $key ) );
}

71. HOW THE VARIABLES OUTPUT

72. HOW THE VARIABLES OUTPUT
<body class=”<?php echo $body; ?>”>
Outputs:
<body class=”itemid-257 id-6 view-article option-
com_content lang-en-gb direction-ltr frontpage
menu_parent-1 group-super_users”>

73. HOW WOULD YOU USE THE
MENU_PARENT CODE?

74. HOW WOULD YOU USE THE
MENU_PARENT CODE?
In the CSS you could use it to change the
sidebar color for each parent menu and inherit
into each child.
.menu_parent-1 #sidebar {
background: #ccc;
}
You can stack body classes safely:
.view-article.menu_parent-1 #sidebar

75. DOING DYNAMIC
THE RIGHT WAY

76. LOAD DYNAMIC CSS
INTO THE HEAD

77. LOAD DYNAMIC CSS
INTO THE HEAD
Don’t create external php css files. Instead
do this...

78. LOAD DYNAMIC CSS
INTO THE HEAD
Don’t create external php css files. Instead
do this...
$doc =& JFactory::getDocument();
$style = 'BODY {'
. 'background: #00ff00;'
. 'color: rgb(0,0,255);'
. '}';
$doc->addStyleDeclaration( $style );

79. A FEW NOTES ABOUT
CREATING JOOMLA!
1.7+ TEMPLATES

80. CREATING A NEW TEMPLATE

81. CREATING A NEW TEMPLATE
• Templates will not show up in Template
Manager without being installed

82. CREATING A NEW TEMPLATE
• Templates will not show up in Template
Manager without being installed
• Clicking Discover in Extension Manager
will make templates show in Templates tab
in Template Manager, but not in Styles

84. SETTING/REMOVING SCRIPTS

85. SETTING/REMOVING SCRIPTS
Add this above your DOCTYPE

86. SETTING/REMOVING SCRIPTS
Add this above your DOCTYPE
• JHtml::_('behavior.framework', false);

87. SETTING/REMOVING SCRIPTS
Add this above your DOCTYPE
• JHtml::_('behavior.framework', false);
• FALSE = just mootools core (89KB)

88. SETTING/REMOVING SCRIPTS
Add this above your DOCTYPE
• JHtml::_('behavior.framework', false);
• FALSE = just mootools core (89KB)
• TRUE = mootools-core + mootools-more (89KB +
238KB = 327KB!)

89. SETTING/REMOVING SCRIPTS
Add this above your DOCTYPE
• JHtml::_('behavior.framework', false);
• FALSE = just mootools core (89KB)
• TRUE = mootools-core + mootools-more (89KB +
238KB = 327KB!)
To remove all scripts:

90. SETTING/REMOVING SCRIPTS
Add this above your DOCTYPE
• JHtml::_('behavior.framework', false);
• FALSE = just mootools core (89KB)
• TRUE = mootools-core + mootools-more (89KB +
238KB = 327KB!)
To remove all scripts:
• $doc =& JFactory::getDocument();
$doc->_scripts = array();

91. SETTING/REMOVING SCRIPTS
Add this above your DOCTYPE
• JHtml::_('behavior.framework', false);
• FALSE = just mootools core (89KB)
• TRUE = mootools-core + mootools-more (89KB +
238KB = 327KB!)
To remove all scripts:
• $doc =& JFactory::getDocument();
$doc->_scripts = array();
This is not recommended!

92. REMOVING MOOTOOLS IN 1.7

93. REMOVING MOOTOOLS IN 1.7
$user =& JFactory::getUser();
if ( $user->get( 'guest' ) == 1 ) {
$document =& JFactory::getDocument();
$headerstuff = $document->getHeadData();
reset($headerstuff['scripts']);
foreach ($headerstuff['scripts'] as $key=>$value){
if (substr_count($key, 'mootools') > 0)
unset($headerstuff['scripts'][$key]);
}
$document->setHeadData( $headerstuff );
}

94. MAKE IT SMALLER...
AND FASTER!

95. KEY POINTS FOR SPEEDING
UP YOUR TEMPLATE

96. KEY POINTS FOR SPEEDING
UP YOUR TEMPLATE
• Optimize your images

97. KEY POINTS FOR SPEEDING
UP YOUR TEMPLATE
• Optimize your images
• Make sprites with your images

98. KEY POINTS FOR SPEEDING
UP YOUR TEMPLATE
• Optimize your images
• Make sprites with your images
• Combine CSS and JavaScript into one file for
each

99. KEY POINTS FOR SPEEDING
UP YOUR TEMPLATE
• Optimize your images
• Make sprites with your images
• Combine CSS and JavaScript into one file for
each
• Don't use "on the fly" compression plugins

100. KEY POINTS FOR SPEEDING
UP YOUR TEMPLATE
• Optimize your images
• Make sprites with your images
• Combine CSS and JavaScript into one file for
each
• Don't use "on the fly" compression plugins
• If you use a CSS and/or JavaScript compression
plugin then make sure it stores it somehow
instead of compressing on each load.

101. KEY POINTS FOR SPEEDING
UP YOUR TEMPLATE

102. KEY POINTS FOR SPEEDING
UP YOUR TEMPLATE
• Use a CDN for your template resources

103. KEY POINTS FOR SPEEDING
UP YOUR TEMPLATE
• Use a CDN for your template resources
• If possible, remove calls in component or
modules for library’s if they are already used so
you don’t have them loading twice.

104. A FEW EXTENSIONS
TO HELP

105. EXTENSIONS WE USE FOR
DEVELOPMENT

106. EXTENSIONS WE USE FOR
DEVELOPMENT
• Advanced Module Manager (www.nonumber.nl)

107. EXTENSIONS WE USE FOR
DEVELOPMENT
• Advanced Module Manager (www.nonumber.nl)
• CSS3 Automated Generator (www.corephp.com)

108. EXTENSIONS WE USE FOR
DEVELOPMENT
• Advanced Module Manager (www.nonumber.nl)
• CSS3 Automated Generator (www.corephp.com)
• JCE (www.joomlacontenteditor.net/)

109. EXTENSIONS WE USE FOR
DEVELOPMENT
• Advanced Module Manager (www.nonumber.nl)
• CSS3 Automated Generator (www.corephp.com)
• JCE (www.joomlacontenteditor.net/)
• Mass Content (www.baticore.com)

113. ADVANCED MODULE
MANAGER CODE

114. ADVANCED MODULE
MANAGER CODE
How to assign to only articles:

115. ADVANCED MODULE
MANAGER CODE
How to assign to only articles:
• $view = 'article';
/* --- DO NOT EDIT BELOW --- */
if ( JRequest::getCmd( 'view' ) == $view ) {
$pass = 1;
} else {
$pass = 0;
}
return $pass;

116. ADVANCED MODULE
MANAGER CODE

117. ADVANCED MODULE
MANAGER CODE
How to assign to Wordpress homepage:

118. ADVANCED MODULE
MANAGER CODE
How to assign to Wordpress homepage:
• if ( defined( 'ABSPATH' ) && is_home() ) {
$pass = 1;
} else {
$pass = 0;
}
return $pass;

119. ADVANCED MODULE
MANAGER CODE

120. ADVANCED MODULE
MANAGER CODE
How to assign to Wordpress single blog:

121. ADVANCED MODULE
MANAGER CODE
How to assign to Wordpress single blog:
• if ( is_single() ) {
$pass = 1;
} else {
$pass = 0;
}
return $pass;

122. AUTOMATED CSS3
GENERATOR

123. AUTOMATED CSS3
GENERATOR
Automatically creates many cross-browser CSS3
styles for you.

124. AUTOMATED CSS3
GENERATOR
Automatically creates many cross-browser CSS3
styles for you.
• Dropshadow, Text Shadow, Rounded Corners,
Opacity, Gradient, RGBA, Rotate, Border Image

125. AUTOMATED CSS3
GENERATOR
Automatically creates many cross-browser CSS3
styles for you.
• Dropshadow, Text Shadow, Rounded Corners,
Opacity, Gradient, RGBA, Rotate, Border Image
• Rounded Corner Example:
.rounded {topleft_radius:8, topright_radius:8,
bottomright_radius:8, bottomleft_radius:8,
support_ie:yes};

127. MASS CONTENT

128. MASS CONTENT
Mass Content allows you to enter several
articles, categories, tags, etc. at once, including
assigning to menu item.

130. Q&A
“If we would have new
knowledge, we must get a
whole world of new
questions.”
- Susanne K. Langer