Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating a new index.php file

From: Joomla! 1.5: Creating and Editing Custom Templates

Video: Creating a new index.php file

Now that we have created our thumbnail PNG file and we also have our index.html file as well as our CSS and our Images file, it's time to create the index.php file. This again is the file that will contain all of the code to actually run the Joomla! template itself. So we are going to start by opening up index.html and we simply going to do a File > Save As to convert this to PHP. So File > Save As and we are going to call this index.php. You do have to call it index.php. Don't call it default.PHP or any of those other names, just index. php and Save. You can close the old index.html because we don't need it anymore at this point.

Creating a new index.php file

Now that we have created our thumbnail PNG file and we also have our index.html file as well as our CSS and our Images file, it's time to create the index.php file. This again is the file that will contain all of the code to actually run the Joomla! template itself. So we are going to start by opening up index.html and we simply going to do a File > Save As to convert this to PHP. So File > Save As and we are going to call this index.php. You do have to call it index.php. Don't call it default.PHP or any of those other names, just index. php and Save. You can close the old index.html because we don't need it anymore at this point.

Now we are going to flip over to Code View and we are going to start thinking about which pieces of this document are going to be come modules and where are the actual content is going to live as well. So of course we have a menu module up here at the top. This is our main navigation for the website and what we have here is obviously just placeholder text that's going to need to come out and be replaced with some module code. We also have div here on line 20 with an ID of content and some lorem ipsum in here. That's going to come out and that is where the articles from your Joomla! site will live, right here in the content area. On line 25 we have div with an ID of Left. This again is some secondary navigation. Again it's just placeholder text for the point. And down at the very bottom of this page we have a footer and the footer we are also going to make a module and that's because modules can be edited by your clients, because there is nice user friendly HTML editor inside of Joomla!. That's where your client can update the copyright date when the year changes.

If we hard code the copyright date into the templates itself then your client will have to know how to read and edit your template. You really don't want your client in there doing that. You could also of course put in some JavaScript or something to update the year automatically but we are trying to keep this simple as possible So what I am going to do now is I am going to open up my cheat sheet over here and here in the cheat sheet we have three pieces of code that we are going each one install in these places in the document. The first piece from lines one to eleven is the head code and I will show you how to install that in just a moment. On line 17 we have our component code this is the piece of code we will need for where are the articles are going to go and on line 21 we have a little sample line of code for our modules and I will show you how to install that and modify it.

Let's start by highlighting lines one through eleven and saying Edit > Copy and back on index.php, lines one through seven are the head of your document. None of that is going to be used in your Joomla! template. So let's just delete that and then we are going to say Edit > Paste and we pasted in our head code here. Now the quick word about style sheets in this head code. You will see on line eight that we are calling in a style sheet from the actual Joomla! system itself called system.css and on line nine we are calling an another style sheet from the Joomla! to system itself called general.css. These are some default styling style sheets that contain styling for things like error messages, balloons and so forth. It's handy to include these because they style things that you would not think otherwise to style.

On line ten we have the call to the style sheet that's being used in this template. As I showed you before we have one style sheet being used in this template, default.css. Line ten as you can see calls specifically for default.css. If we had additional style sheet in using our template we would need to copy and paste the line ten as many times as possible to match however many style sheets we have and change default.css to the names of those style sheet files you have to match.

Now let's think about where our content code is going to go as we had identified earlier in line 24, we started a div with an id of content. We are going to get rid of lorem ipsum text and we are going to make a note to ourselves via an HTML comment. That the content is going to go right there. Let's switch back to our cheat sheet and on line 17 we have a jdoc include statement that calls for the actual component which is also the content for the website. So I am going to paste that in. That's all we need to call in be actual articles associated with the given page. It's just that one line of code.

That will pull out the correct article for the page. Now we will need to put in our modules. We have identified this top navigation area. The unordered list that we talked about earlier is going to be where our module is going to reside. So we are going to get rid of this code and we will make a note to ourselves that this is where our top navigation is going to go. Likewise in the left side of the page we had some secondary navigation, another unordered list and potentially some more things underneath. Everything on the left side of the page is going to be driven by some kind of module because the article itself is going to live in the area here on line 18 where the component is.

So let's get rid of this placeholder text and we will make a note to ourselves that the left information we will go here. And finally here in the footer we wanted to get rid of the copyright statement and make a footer module go here. So let's switch back to our cheat sheet and let's talk about this module code on line 21. This Jdoc include statement is little bit more complicated then some of others that we have seen. So first of all its type of module. That's a pretty straight forward. The name in this case is called top. Name can be anything you want you can call this George, Sally, and Mary if you prefer but I like to call it with names that correspond to regions of template itself.

It serves to the self documenting type of thing. Finally the Style is something that you may want to change. The Style field indicates what type of style to display in the module code. For our purposes we are going to use XHTML through this video series. A style of XHTML means that the div will be wrapped around the module before it's displayed. One single div. But there are other options that you can have. If you had say table this will wrap the table around your module in the display. If you said horizontal or horiz this will display each module next to each other in a horizontal manner, again using a table.

A style of rounded will actually put four divs around your module content and the idea here is that you can make this into rounded corners using those four divs. Raw will wrap no divs around your content at all. However, the module title, if you choose to display it, will not display in the raw output. Even if it's turned on to display within the module itself. So it's not terribly useful in most cases. And finally there is an interesting one for debugging purposes called outline. This will show on the template page itself and on your website an outline of where all of the modules live within your web page. So it's very useful for debugging but it's not terribly useful for the production website.

This is why I am recommending that we are going to stick with XHTML, which again will wrap a single div around the module content. You could use rounded if you are going to do a lot of things with the rounded corners as well. But in general I would recommend you stay away from the other module options. So let's copy this piece of code, Edit > Copy, and we are going to flip back over to our index.php page. Where we have our note that our top nav is going to go there. We are going to Edit > Paste and this is all set up correctly. It's a module that's going to be at the top of the page in the style of XHTML. Now we are going to go down to the left and we are going to paste in the module code again, but this time this is where a module will be but its name is going to be left.

Instead of top. And finally down here on the footer once again we are going to paste in our module code and its name will be footer. Try to make your module location names meaningful and you may also want to make them location independent. For example, a module position called search clearly applies to a location where a search box might go on the side. However these positions called left or right of footer, which are frequently used to on Joomla! sites, are to specific location in the template. It's hard to switch the column locations if you decide to do that at a later point in time if your old right column is now going be on the left sid. You are welcome to use these location specific module position names, just like I did, but beware of this down side going it forward. The Joomla! code is fairly easy to copy and paste these right locations. Once you understand what this code is doing you are going to find it very easy to customize.

Show transcript

This video is part of

Image for Joomla! 1.5: Creating and Editing Custom Templates
Joomla! 1.5: Creating and Editing Custom Templates

25 video lessons · 23021 viewers

Jen Kramer
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Joomla! 1.5: Creating and Editing Custom Templates.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.