Difference between revisions of "Themes and XHTML"

From GeeklogWiki
Jump to: navigation, search
(Themes and XHTML)
 
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Since version 1.5.0, Geeklog supports XHTML compliant themes. This means that Geeklog will automatically create XHTML compliant tags when required.
+
Since version 1.5.0, Geeklog supports [http://en.wikipedia.org/wiki/XHTML XHTML] compliant themes. This means that Geeklog will automatically create XHTML compliant tags when required.
  
 
== Switching to XHTML ==
 
== Switching to XHTML ==
  
Whether Geeklog will switch to XHTML compliant mode or not depends on the definition of a <tt>XHTML</tt> variable in the PHP code. This variable can either be defined by the theme (in the theme's <tt>functions.php</tt> file) or by selecting an XHTML DOCTYPE from the Configuation (since Geeklog 1.6.0):
+
Since Geeklog 2.0, you must specify a doctype for your theme, if you wish for your theme to be XHTML compliant.
 +
This is done in the functions.php file by implementing the function theme_config_yourThemeName() method, for example, for a theme called foobar this would look like:
  
Configuration > Geeklog > Theme > Theme > [http://www.geeklog.net/docs/english/config.html#desc_doctype DOCTYPE Declaration]
+
  function theme_config_foobar()
 +
  {
 +
      return array(
 +
          'doctype' => 'xhtml10strict'
 +
      );
 +
  }
  
Selecting an XHTML DOCTYPE will automatically set the <tt>XHTML</tt> properly (any definition made by the theme still takes preference, though, so make sure the two don't conflict).
+
Valid XHTML doctypes are:
  
== XHTML Constant and Template Variable ==
+
* xhtml10transitional
 +
* xhtml10strict
 +
 
 +
== Switching to XHTML in Geeklog < 2.0 ==
 +
 
 +
Whether Geeklog will switch to XHTML compliant mode or not depends on the definition of an <tt>XHTML</tt> variable in the PHP code. This variable can either be defined by the theme (in the theme's <tt>functions.php</tt> file) or by selecting an XHTML DOCTYPE from the Configuation (since Geeklog 1.6.0):
 +
 
 +
: Configuration > Geeklog > Theme > Theme > [http://www.geeklog.net/docs/english/config.html#desc_doctype DOCTYPE Declaration]
 +
 
 +
Selecting an XHTML DOCTYPE will automatically set the <tt>XHTML</tt> constant properly (any definition made by the theme still takes precedence, though, so make sure the two don't conflict).
 +
 
 +
== XHTML Constant ==
  
 
For an XHTML compliant theme, the <tt>XHTML</tt> constant should be defined like so:
 
For an XHTML compliant theme, the <tt>XHTML</tt> constant should be defined like so:
Line 19: Line 36:
 
<pre>define('XHTML', '');</pre>
 
<pre>define('XHTML', '');</pre>
  
The definition of the <tt>XHTML</tt> constant will also be available as a <tt>{xhtml}</tt> template variable in all template files used by Geeklog. This way, it is possible to create themes that will work both as XHTML and "plain" HTML by using the template variable for tags that have to be closed in XHTML, e.g.
+
Plugins can simply use the <tt>XHTML</tt> constant - Geeklog will take care that is always defined. The same is true for code in <tt>lib-custom.php</tt>, with the exception of code that is not located in a function (since <tt>lib-custom.php</tt> will be included before the theme, and any global code in <tt>lib-custom.php</tt> would therefore be executed before the constant is defined).
 +
 
 +
== Template Variables ==
 +
 
 +
The definition of the <tt>XHTML</tt> constant is also available as a <tt>{xhtml}</tt> template variable in all template files used by Geeklog. This way, it is possible to create themes that will work both as XHTML and "plain" HTML by using the template variable for tags that have to be closed in XHTML, e.g.
  
 
<pre><br{xhtml}>
 
<pre><br{xhtml}>
Line 25: Line 46:
 
<img src="image.png" alt=""{xhtml}></pre>
 
<img src="image.png" alt=""{xhtml}></pre>
  
== Other Template Variables ==
+
=== Other Template Variables ===
  
 
Themes that are written to be both valid HTML and XHTML (as described above) should use the <tt>{doctype}</tt> variable as the first line in <tt>header.thtml</tt> instead of hard-coding the DOCTYPE.
 
Themes that are written to be both valid HTML and XHTML (as described above) should use the <tt>{doctype}</tt> variable as the first line in <tt>header.thtml</tt> instead of hard-coding the DOCTYPE.
Line 37: Line 58:
 
<head></pre>
 
<head></pre>
  
The <tt>{lang_attribute}</tt> will set a <tt>lang</tt> attribute in multi-language setups.
+
The <tt>{lang_attribute}</tt> will set a <tt>lang</tt> attribute in [[Multilingual Support|multi-language setups]].
 +
 
 +
The Professional theme that ships with Geeklog uses the <tt>{doctype}</tt> template variable and is both HTML and XHTML compliant, depending on the DOCTYPE selected in the Configuration.
  
  
 
[[Category:Themes]]
 
[[Category:Themes]]

Latest revision as of 13:40, 15 April 2012

Since version 1.5.0, Geeklog supports XHTML compliant themes. This means that Geeklog will automatically create XHTML compliant tags when required.

Switching to XHTML

Since Geeklog 2.0, you must specify a doctype for your theme, if you wish for your theme to be XHTML compliant. This is done in the functions.php file by implementing the function theme_config_yourThemeName() method, for example, for a theme called foobar this would look like:

 function theme_config_foobar()
 {
     return array(
         'doctype' => 'xhtml10strict'
     );
 }

Valid XHTML doctypes are:

  • xhtml10transitional
  • xhtml10strict

Switching to XHTML in Geeklog < 2.0

Whether Geeklog will switch to XHTML compliant mode or not depends on the definition of an XHTML variable in the PHP code. This variable can either be defined by the theme (in the theme's functions.php file) or by selecting an XHTML DOCTYPE from the Configuation (since Geeklog 1.6.0):

Configuration > Geeklog > Theme > Theme > DOCTYPE Declaration

Selecting an XHTML DOCTYPE will automatically set the XHTML constant properly (any definition made by the theme still takes precedence, though, so make sure the two don't conflict).

XHTML Constant

For an XHTML compliant theme, the XHTML constant should be defined like so:

define('XHTML', ' /');

Otherwise, the constant will be defined as an empty string:

define('XHTML', '');

Plugins can simply use the XHTML constant - Geeklog will take care that is always defined. The same is true for code in lib-custom.php, with the exception of code that is not located in a function (since lib-custom.php will be included before the theme, and any global code in lib-custom.php would therefore be executed before the constant is defined).

Template Variables

The definition of the XHTML constant is also available as a {xhtml} template variable in all template files used by Geeklog. This way, it is possible to create themes that will work both as XHTML and "plain" HTML by using the template variable for tags that have to be closed in XHTML, e.g.

<br{xhtml}>
<input type="submit" name="test"{xhtml}>
<img src="image.png" alt=""{xhtml}>

Other Template Variables

Themes that are written to be both valid HTML and XHTML (as described above) should use the {doctype} variable as the first line in header.thtml instead of hard-coding the DOCTYPE.

In XHTML mode, Geeklog will also provide a {xmlns} variable that will contain the xmlns attribute for the html element.

Putting it all together, the first 3 lines of your theme's header.thtml should look like this:

{doctype}
<html{lang_attribute}{xmlns}>
<head>

The {lang_attribute} will set a lang attribute in multi-language setups.

The Professional theme that ships with Geeklog uses the {doctype} template variable and is both HTML and XHTML compliant, depending on the DOCTYPE selected in the Configuration.