Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer

2,365 views

Published on

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.

Published in: Education, Technology
  • Be the first to comment

Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer

  1. 1. TEMPLATING THE RIGHT WAY by Jonathan Shroyer Twitter: @learncss Email: jonathan@corephp.com by Jonathan Shroyer
  2. 2. TEMPLATE BASICS
  3. 3. DID YOU KNOW?
  4. 4. DID YOU KNOW?Tables are for tabulardata... not for layouts
  5. 5. PROPER HEADINGS
  6. 6. PROPER HEADINGS• H tags are possibly most important for SEOs
  7. 7. PROPER HEADINGS• H tags are possibly most important for SEOs• One H1 per page
  8. 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. 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. 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. 11. LOGO CODE FOR YOUR TEMPLATE
  12. 12. LOGO CODE FOR YOUR TEMPLATEif( JURI::current() == JURI::base() ) { ?> <h1 id="company-logo"> <a href="<?php echo JURI::base(); ?>"> Company Name </a> </h1>
  13. 13. LOGO CODE FOR YOUR TEMPLATE
  14. 14. LOGO CODE FOR YOUR TEMPLATE} else { <p id="company-logo"> <a href="<?php echo JURI::base(); ?>"> Company Name </a> </p>}
  15. 15. HEADINGS INSIDE OF YOUR TEMPLATE
  16. 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. 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. 18. IMAGES
  19. 19. IMAGES• Use alt tags on images which you want people to know what it is. (ie. If image wasnt there, would the description add to the content?)
  20. 20. IMAGES• Use alt tags on images which you want people to know what it is. (ie. If image wasnt 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. 21. WHAT ABOUT HTML5?
  22. 22. WHAT ABOUT HTML5?• No SEO advantage at this time
  23. 23. WHAT ABOUT HTML5?• No SEO advantage at this time• Personally don’t recommend it as support is less than HTML4.
  24. 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. 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. 26. NOT-SO-BASICTEMPLATE BASICS
  27. 27. LEARN THE JOOMLA LANGUAGE
  28. 28. LEARN THE JOOMLA LANGUAGE• Why should you learn the Joomla! library for template development?
  29. 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. 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. 31. LEARN THE JOOMLA LANGUAGE
  32. 32. LEARN THE JOOMLA LANGUAGE• JHTML
  33. 33. LEARN THE JOOMLA LANGUAGE• JHTML • link, image, iframe, date, tooltip, calendar, etc.
  34. 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. 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. 36. ADDING EXTERNALCSS STYLESHEETS (JOOMLA 1.6+)
  37. 37. ADDING EXTERNALCSS STYLESHEETS (JOOMLA 1.6+)• $doc = JFactory::getDocument(); $path = templates/ . $this->template . /css/mystylesheet.css; $doc->addStyleSheet( $path, , ‘text/css’, “screen, projection” );
  38. 38. ADDING EXTERNALCSS 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. 39. ADDING CSS STYLES FOR ONLY IE
  40. 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. 41. MAKE YOUR TEMPLATE UPGRADABLEIn 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. 42. BUILDING BLOCKS USING CSS
  43. 43. SIZE BOX
  44. 44. SIZE BOXgrid_size boxes are used for width, height and overallpositioning of box.
  45. 45. SIZE BOXgrid_size boxes are used for width, height and overallpositioning of box.
  46. 46. SIZE BOXgrid_size boxes are used for width, height and overallpositioning of box..grid_size { width: 100%; height: auto; float: left; display: inline; position: relative; }
  47. 47. SIZE BOXgrid_size boxes are used for width, height and overallpositioning of box..grid_size { width: 100%; height: auto; float: left; display: inline; position: relative; }
  48. 48. STYLE BOX
  49. 49. STYLE BOXgrid_style boxes are used for padding, borders andpositioning of content within box.
  50. 50. STYLE BOXgrid_style boxes are used for padding, borders andpositioning of content within box.
  51. 51. STYLE BOXgrid_style boxes are used for padding, borders andpositioning of content within box..grid_style { width: auto; height: auto; display: block; top: 0; left: 0; clear: both; }
  52. 52. STYLE BOXgrid_style boxes are used for padding, borders andpositioning of content within box..grid_style { width: auto; height: auto; display: block; top: 0; left: 0; clear: both; }
  53. 53. EXAMPLE BOX
  54. 54. EXAMPLE BOX<div class=”grid_size”>
  55. 55. EXAMPLE BOX<div class=”grid_size”> <div class=”grid_style”>
  56. 56. EXAMPLE BOX<div class=”grid_size”> <div class=”grid_style”> CSS Box
  57. 57. EXAMPLE BOX<div class=”grid_size”> <div class=”grid_style”> CSS Box </div>
  58. 58. EXAMPLE BOX<div class=”grid_size”> <div class=”grid_style”> CSS Box </div> </div>
  59. 59. EXAMPLE BOX<div class=”grid_size”> <div class=”grid_style”> CSS Box </div> </div>
  60. 60. GETTING CONTROLOF YOUR TEMPLATE
  61. 61. ADD AS MANY VARIABLES ASPOSSIBLE TO BODY TAG CLASS
  62. 62. ADD AS MANY VARIABLES ASPOSSIBLE 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. 63. ADD AS MANY VARIABLES ASPOSSIBLE TO BODY TAG CLASS
  64. 64. ADD AS MANY VARIABLES ASPOSSIBLE TO BODY TAG CLASSif( 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. 65. ADD AS MANY VARIABLES ASPOSSIBLE TO BODY TAG CLASS
  66. 66. ADD AS MANY VARIABLES ASPOSSIBLE TO BODY TAG CLASS$body .= lang- . $this->language;$body .= direction- . $this->direction;if( JURI::current() == JURI::base() ) { $body .= frontpage’;}
  67. 67. 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;
  68. 68. $user =& JFactory::getUser();$userGroups = $user->groups;foreach($userGroups as $key => $value){ $replace = array(".", " "); $body .= group- .strtolower( str_replace( $replace, _, $key ) );}
  69. 69. HOW THE VARIABLES OUTPUT
  70. 70. 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 frontpagemenu_parent-1 group-super_users”>
  71. 71. HOW WOULD YOU USE THE MENU_PARENT CODE?
  72. 72. HOW WOULD YOU USE THE MENU_PARENT CODE?In the CSS you could use it to change thesidebar color for each parent menu and inheritinto each child..menu_parent-1 #sidebar { background: #ccc;}You can stack body classes safely:.view-article.menu_parent-1 #sidebar
  73. 73. DOING DYNAMIC THE RIGHT WAY
  74. 74. LOAD DYNAMIC CSS INTO THE HEAD
  75. 75. LOAD DYNAMIC CSS INTO THE HEADDon’t create external php css files. Insteaddo this...
  76. 76. LOAD DYNAMIC CSS INTO THE HEADDon’t create external php css files. Insteaddo this...$doc =& JFactory::getDocument();$style = BODY { . background: #00ff00; . color: rgb(0,0,255); . };$doc->addStyleDeclaration( $style );
  77. 77. A FEW NOTES ABOUTCREATING JOOMLA! 1.7+ TEMPLATES
  78. 78. CREATING A NEW TEMPLATE
  79. 79. CREATING A NEW TEMPLATE• Templates will not show up in Template Manager without being installed
  80. 80. 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
  81. 81. SETTING/REMOVING SCRIPTS
  82. 82. SETTING/REMOVING SCRIPTSAdd this above your DOCTYPE
  83. 83. SETTING/REMOVING SCRIPTS Add this above your DOCTYPE• JHtml::_(behavior.framework, false);
  84. 84. SETTING/REMOVING SCRIPTS Add this above your DOCTYPE• JHtml::_(behavior.framework, false); • FALSE = just mootools core (89KB)
  85. 85. 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!)
  86. 86. 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:
  87. 87. 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();
  88. 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!) To remove all scripts:• $doc =& JFactory::getDocument(); $doc->_scripts = array(); This is not recommended!
  89. 89. REMOVING MOOTOOLS IN 1.7
  90. 90. 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 );}
  91. 91. MAKE IT SMALLER... AND FASTER!
  92. 92. KEY POINTS FOR SPEEDING UP YOUR TEMPLATE
  93. 93. KEY POINTS FOR SPEEDING UP YOUR TEMPLATE• Optimize your images
  94. 94. KEY POINTS FOR SPEEDING UP YOUR TEMPLATE• Optimize your images• Make sprites with your images
  95. 95. KEY POINTS FOR SPEEDING UP YOUR TEMPLATE• Optimize your images• Make sprites with your images• Combine CSS and JavaScript into one file for each
  96. 96. KEY POINTS FOR SPEEDING UP YOUR TEMPLATE• Optimize your images• Make sprites with your images• Combine CSS and JavaScript into one file for each• Dont use "on the fly" compression plugins
  97. 97. KEY POINTS FOR SPEEDING UP YOUR TEMPLATE• Optimize your images• Make sprites with your images• Combine CSS and JavaScript into one file for each• Dont 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.
  98. 98. KEY POINTS FOR SPEEDING UP YOUR TEMPLATE
  99. 99. KEY POINTS FOR SPEEDING UP YOUR TEMPLATE• Use a CDN for your template resources
  100. 100. 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.
  101. 101. A FEW EXTENSIONS TO HELP
  102. 102. EXTENSIONS WE USE FOR DEVELOPMENT
  103. 103. EXTENSIONS WE USE FOR DEVELOPMENT• Advanced Module Manager (www.nonumber.nl)
  104. 104. EXTENSIONS WE USE FOR DEVELOPMENT• Advanced Module Manager (www.nonumber.nl)• CSS3 Automated Generator (www.corephp.com)
  105. 105. EXTENSIONS WE USE FOR DEVELOPMENT• Advanced Module Manager (www.nonumber.nl)• CSS3 Automated Generator (www.corephp.com)• JCE (www.joomlacontenteditor.net/)
  106. 106. 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)
  107. 107. ADVANCED MODULE MANAGER CODE
  108. 108. ADVANCED MODULE MANAGER CODEHow to assign to only articles:
  109. 109. 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;
  110. 110. ADVANCED MODULE MANAGER CODE
  111. 111. ADVANCED MODULE MANAGER CODEHow to assign to Wordpress homepage:
  112. 112. ADVANCED MODULE MANAGER CODE How to assign to Wordpress homepage:• if ( defined( ABSPATH ) && is_home() ) { $pass = 1; } else { $pass = 0; } return $pass;
  113. 113. ADVANCED MODULE MANAGER CODE
  114. 114. ADVANCED MODULE MANAGER CODEHow to assign to Wordpress single blog:
  115. 115. ADVANCED MODULE MANAGER CODE How to assign to Wordpress single blog:• if ( is_single() ) { $pass = 1; } else { $pass = 0; } return $pass;
  116. 116. AUTOMATED CSS3 GENERATOR
  117. 117. AUTOMATED CSS3 GENERATORAutomatically creates many cross-browser CSS3styles for you.
  118. 118. AUTOMATED CSS3 GENERATOR Automatically creates many cross-browser CSS3 styles for you.• Dropshadow, Text Shadow, Rounded Corners, Opacity, Gradient, RGBA, Rotate, Border Image
  119. 119. 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};
  120. 120. MASS CONTENT
  121. 121. MASS CONTENTMass Content allows you to enter severalarticles, categories, tags, etc. at once, includingassigning to menu item.
  122. 122. Q&A“If we would have newknowledge, we must get awhole world of newquestions.” - Susanne K. Langer

×