Actions

Difference between revisions of "Creating a basic index file"

From Joomla! Documentation

m
(Updated contents)
Line 1: Line 1:
The index.php file becomes the core of every page that Joomla! delivers. Essentially, you make a page (like any html page) but place PHP code where the content of your site should go. Here is the bare-bones code ready for you to cut and paste.
+
The <tt>index.php</tt> file becomes the core of every page that Joomla! delivers. Essentially, you make a page (like any HTML page) but place [[PHP]] code where the content of your site should go. Here is the bare-bones code ready for you to cut and paste.
  
Lets start at the top:
+
Let's start at the top:
  
 
<source lang="php">
 
<source lang="php">
Line 10: Line 10:
 
   xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
 
   xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
 
</source>
 
</source>
The first line stops naughty people looking at your coding and getting up to bad things. The second tells the browser (and webbots) what sort of page it is. The third line says what language the site is in.
+
The first line stops naughty people looking at your coding and getting up to bad things. The second tells the browser (and [[wikipedia:Web crawler|web crawlers]]) what sort of page it is. The third line says what language the site is in.
  
 
Now the header for real:
 
Now the header for real:
Line 19: Line 19:
 
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
 
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
 
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
 
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/template.css" type="text/css" />
+
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
 
</head>
 
</head>
 
</source>
 
</source>
  
 
The first line gets Joomla to put the correct header information in. This includes the page title, meta information as well as system JavaScript.  
 
The first line gets Joomla to put the correct header information in. This includes the page title, meta information as well as system JavaScript.  
The rest creates links to two system style sheets and to your own style sheet (if it's named template.css and is located in the css folder).
+
The rest creates links to two system style sheets and to your own style sheet (if it's named <tt>template.css</tt> and is located in the <tt>''css''</tt> folder).
 
+
  
 
Now for the main body:
 
Now for the main body:
Line 39: Line 38:
  
 
Finish it off - one last bit:
 
Finish it off - one last bit:
<pre>
+
<source lang="php">
 
</html>
 
</html>
</pre>
+
</source>
 
<noinclude>View the [[Testing the template|full source code]] of this template.</noinclude>
 
<noinclude>View the [[Testing the template|full source code]] of this template.</noinclude>
 
[[Category:Tutorials]][[Category:Template Development]]
 
[[Category:Tutorials]][[Category:Template Development]]

Revision as of 09:47, 17 July 2011

The index.php file becomes the core of every page that Joomla! delivers. Essentially, you make a page (like any HTML page) but place PHP code where the content of your site should go. Here is the bare-bones code ready for you to cut and paste.

Let's start at the top:

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
   xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

The first line stops naughty people looking at your coding and getting up to bad things. The second tells the browser (and web crawlers) what sort of page it is. The third line says what language the site is in.

Now the header for real:

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>

The first line gets Joomla to put the correct header information in. This includes the page title, meta information as well as system JavaScript. The rest creates links to two system style sheets and to your own style sheet (if it's named template.css and is located in the css folder).

Now for the main body:

<body>
<jdoc:include type="modules" name="top" /> 
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>

Amazingly, this will suffice! Yes, its a very basic layout, but it will do the job. Everything else will be done by Joomla!. Note: you will need to ensure your menu is set to go into the "top" module position.

Finish it off - one last bit:

</html>

View the full source code of this template.