Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The index.php file contains the HTML that controls your site, along with some specific Joomla! code that specifies where articles and modules will appear. Let's take a closer at an index.php file. And if you open that, you'll open it in Design View here in Dreamweaver. You can switch to Code View. Now I am using Dreamweaver to take a look at this file just because it's a handy editor that I am very familiar with. You can use whatever editor you wish to take a look at this code. There are plenty of editors that you can download for free, or you can use a program like Dreamweaver to look at these. Even something as simple as Notepad or TextEdit will work.
Let's scroll up to the top of the document here and you'll see three kinds of code that appear here in the index.php file. So between lines 1 and 14 we just have a simple PHP statement that is asking to find out if there is a particular variable present with in Joomla!. So if it's present run Joomla! and if it is not as they say in PHP 'die,' the program will not run. We also have regular old HTML. As you see here in line 15, there is a DOCTYPE statement, stating that this document is written in an XHTML 1.0 Transitional and the third type of code that we have present here is actual Joomla! code.
So, here on line 18 we have a statement called Jdoc:include. These Jdoc:include statements will occur throughout the template document. This particular one is calling for the head code in the Joomla! document. So, there are something that will show up as a result of that piece of code. Let see what those things are. Let's take a look at this page in the browser as it corresponds here. So I am going to open up my Firefox web browser with all of the text and so forth are installed and I am just going to use my Firefox Web Developer toolbar up here, to go to View Source and here is all the code, which is actually what comes out of your Joomla! template with all the modules installed and all of the content. Once all of the PHP processing has been done, this is the final result that is sent to the browser and is actually displayed and you can see that this is quite different than what we actually saw in Dreamweaver.
Those first 14 lines that don't even appear here in the document; we just start with the DOCTYPE. And we also in the Joomla! template we called Jdoc:include to include the head content. That includes all of the stuff here the metatags the various Robots, Keywords, Title, Author and Description metatags, as well as the page title. The favicon is also included. The other pieces that are included here, such as the stylesheet declarations further down on the page, were actually already in the Joomla! template. So, we can compare these side-by-side. Just looking at the code this way, you can see that this one line here, the Jdoc: include, does correspond to all of this information over here in this side. And you c an go through the template like this, line-by-line.
In part two of this video here, we'll show you step-by-step how to create this index.php file yourself. We'll also give you a cheat sheet with some of these commonly use Joomla! codes, so that you can make your own template, and we'll give you all the PHP that you need, to copy and paste. You won't be expected to write PHP yourself.
Get unlimited access to all courses for just $25/month.Become a member