Page 1 of 19 Advertise Here

How to Create Your First Joomla Template
Tarek Farage on Feb 17th 2009 with 333 comments

Tutorial Details
• Difficulty: Beginner • Completion Time: 1-2 hours In this tutorial , you will learn about the basics of a Joomla template, and create one from scratch. We will quickly go through installing a local server and Joomla itself, and then create a basic functioning template.

1. Preparation
Before we get started on our template, there are a few things you need to prepare. Just like most CMSs, Joomla requires a server with PHP and MySQL installed. Installing the above manually can be quite annoying and, to be honest, a waste of time (unless you want to get into how it’s done exactly). What we will be doing is downloading a single installer for all the above that will stick a local server on your system and give you a really nifty control panel too. So head on over to WAMP and download the latest version.( MAMP for Mac)


(note: you can install as many copies of Joomla in here as you want.tutsplus. we can get Joomla and set it up. This is the root of your server setup and this is where we will be installing Joomla. but the one we are interested in is the www folder. Downloading and installing Joomla Now that we have a server installed. You can use this for a number of things.Page 2 of 19 Once the installer is downloaded. Go to Joomla and download the latest 10/04/2011 . Inside you will find a bunch of folders. Before we continue. If all goes to plan you should be looking at a folder named : wamp You should now also have an icon in your notification bar (where the clock is) that gives you access to WAMP’s control panel. 2. or anything else for that matter) http://net. execute it and install WAMP in a place easy to remember. let’s take a look at our wamp folder again. including restarting the server.

Here you will find the your server admin area. You will not be creating a user with password here. Joomla is now on our server. I usually rename it at this point to the name of my site or just shorten it to joomla. instead using the root user details. For this tutorial’s sake we will be calling our database joomla. unpack your Joomla download into the www folder. To create the database.tutsplus. However there is one last thing we need to do before installing. click on phpmyadmin under the Your Aliases section. and that’s to create a 10/04/2011 . It is strongly recommended that you create a user with a strong password in live situations. http://net. Open up your browser and go to http://localhost . this is where we create our database.Page 3 of 19 So.

com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011 . The next screen you see is the Pre-Install checklist. On the next page. Username: root .Page 4 of 19 Now that we have a database. we can start installing Joomla. when ready click next and enter the required details(Host Name: localhost .tutsplus. Fire up your browser and go to http://localhost/joomla (or whatever you called your site when unpacking it. http://net. and press next.) The first screen pretty much speaks for itself. This is a list of the required items and settings Joomla needs to successfully install. no password and joomla as Database name). read the license carefully. Choose a language and press next. and. Make sure you have the necessary configuration and click next.

com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011 . as we want to add the modules one by one to see how our template is coming along later on in the tut. We will not install any sample data right now. This will be the password you will use to log into the admin area of joomla along with the username: admin. but before we can go in and mess around we have to delete the installation folder. and then into the joomla folder and delete the installation folder http://net.tutsplus. Congrats! Joomla is up and running. Click next. an email address and choose a password. enter your site name.Page 5 of 19 Skip the FTP Configuration screen by clicking next and on the next page. So go to your www folder inside wamp.

tutsplus. Inside the templates folder. Joomla comes with three templates: beez. http://net. you will see a folder for every template installed. let’s take a look at the default one. click on preview in the upper right corner of the admin area. Remember this location as this is where you will be installing your new templates in the future. then inside the joomla folder you should see a templates folder. rhuk_milkyway and ja_purity. You can switch between templates in the admin panel.Page 6 of 19 3. The template In order to begin understanding the template 10/04/2011 . Go to your www folder. A closer look at Joomla It’s pretty hard these days to get into any Open Source CMS discussion without the name of Joomla dropping. (wamp/www/joomla/templates). being packed with features that keep thousands of developers busy rolling applications and modules.) To visit your site . 4. This is where all the different templates go. Its installation along with intuitive admin panel makes it very popular with users who are after an easy CMS while. get familiar with the back end ( I recommend this quick Joomla 101 article on the Themeforest blog to get a quick feel. at the same time. If necessary. What you will get is the default template with no content and the most basic of modules loaded.

Page 7 of 19 Although most templates are made up of quite a few files. These are: • index.0</version> <description>Template Tut</description> <files> <filename>index.siteurl. the names of the files used in the template(images etc. 14. 12. 22.xml</filename> <filename>css/template. 18.dtd"> <install version="1.tutsplus. 3. 2. 27. 25.xml.css</filename> </files> <positions> <position>breadcrumb</position> <position>left</position> <position>right</position> <position>top</position> <position>user1</position> <position>user2</position> <position>user3</position> 10/04/2011 http://net. 19. 16. 13. .5" type="template"> <name>template _tut</name> <creationDate>31-01-2009</creationDate> <author>Nettut Fan</author> <authorEmail>your@email. 6.php</filename> <filename>templateDetails. 23. These can be seen as little hooks where joomla hangs up information on. 7. 24. 20.5//DTD template</authorEmail> <authorUrl>http://www.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1. <?xml version="1.5/template-install.php • templateDetails.) and the positions you want to use (the includes mentioned above. You can see this as a list of instructions to Joomla. 9. 10. 8. 11. only two are needed to make a working template. 15.) view plaincopy to clipboardprint? 1.php – is where all the markup goes in which you stick the Joomla includes. 5.0..0//EN" "http://dev. like modules for example The second file is templateDetails.joomla.xml The first one – index. 26. This list must include the name of the</authorUrl> <copyright>You 2009</copyright> <license>GNU/GPL</license> <version>1. 21.

These are the positions we spoke of earlier.Page 8 of 19 28. Some are self explanatory. this is a specific list that tells Joomla about the template.tutsplus. <position>user4</position> 29. Go to your templates folder .php. Beginning the template Lets do some preparation so we have something to work with. and create a new folder.xml (copy/paste the code in the example above inside it). If you put the joomla footer include in the footer area of your design. As you can see. the author. Open up your index.php file in notepad or anything else you use to edit code. and copy/paste the following in: view plaincopy to clipboardprint? http://net. you will be able to control some aspects of the footer using the Joomla back end. Lets try and throw together a simple template. </install> The above is an example of a templateDetails. create a file called 10/04/2011 . Lets call it template_tut. 5. <position>footer</position> 30. like the name. Inside your new folder. the includes. like footer. date created etc… Notice the positions section in the code above. and another called templateDetails.xml file. </positions> 31.

<html xmlns="http://www. Using the template Now that we have the basic files in place. view plaincopy to clipboardprint? 1. 6. </head> We have a DOCTYPE. a PHP code for the language. ?>" lang="<? php echo $this->language. and in the head section our first Joomla include. <body> 8. ?>" lang="<? php echo $this->language. 9. <head> 4. <jdoc:include type="head" /> What this does is include the joomla header code (which includes the page title). let’s add another include. let’s add an article so we have some content. <jdoc:include type="component" /> You should now have this in your index. </head> 6. <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1. ?>" > 3.0 Transitional//EN" "http://www.w3. <html xmlns="" xml:lang="<?php echo $this->language.0 Transitional//EN" "http://www. </body> 12. <jdoc:include type="component" /> 10. 7. Finish up the markup on the page by adding the body tags and closing the html tag. Before we test our template.w3. this time to display the main content of any given page being viewed. 11. <head> 4.w3. ?>" >" xml:lang="<?php echo $this->language.Page 9 of 19 1.w3.tutsplus.dtd"> 2. <jdoc:include type="head" /> 10/04/2011 . Make sure WAMP is running and go to your admin area in Joomla with http://localhost/joomla/administrator http://net. <!DOCTYPE html PUBLIC "//W3C//DTD XHTML This is not in the xml list because it is not a position.php view plaincopy to clipboardprint? 1. and a bunch of other stuff that can probably fill half a tutorial on its own. <jdoc:include type="head" /> 5.dtd"> 2. </html> 13. view plaincopy to clipboardprint? 1.

fill in an 10/04/2011 .tutsplus.Page 10 of 19 Now enter your login details Go to Content on the menu and then to Article Manager in the drop down Click on New to add an article Give your article a title. make sure its published to front page and hit save http://net.

let’s see if the template we made actually works. Click on preview in the upper right corner after saving. and set it as default. Now that we have published content. so go ahead and choose it. Go back to your admin area and click on Extensions and then Template Manager You should see template_tut in the list. You should see the front page of your site with your text.Page 11 of 19 Let’s see what our article looks like on the front page. 10/04/2011 .tutsplus.

Well maybe not so glorious but your first joomla template. let’s take a closer look at the module position includes.tutsplus. http://net. Adding some meat to our template We got our template working.Before we add more includes. YAY! 7. it’s retrieving the header info including the title and displaying content we created in the joomla back end .Page 12 of 19 Hit preview and check out your glorious new template. the ones we named in our xml 10/04/2011 .

<html xmlns="http://www. </head> 6. <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.w3. ?>" > <body> 8. <jdoc:include type="component" /> 10. 9. <position>user3</position> 9.w3.w3. 7. ?>" > 3. <position>top</position> 6. <jdoc:include type="head" /> 5. <jdoc:include type="modules" name="position_name" /> So in order to add . <position>right</position> 5. </positions> They are included in the following way: view plaincopy to clipboardprint? 1. 7. <positions> 2. </body> 12. let’s add the footer position view plaincopy to clipboardprint? 1. 9. <jdoc:include type="head" /> 5.php will look like this: view plaincopy to clipboardprint? 1. <head> ?>" lang="<? php echo $this->language. for example.0 Transitional//EN" "http://www. </head> 6. <position>user1</position> 7. <jdoc:include type="modules" name="left" /> 11. <position>user4</position> 10. <html xmlns="http://www. ?>" lang="<? php echo $this->language. the left position. <jdoc:include type="modules" name="footer" />" xml:lang="<?php echo $this->language. <jdoc:include type="modules" name="left" /> 11. our index. <position>breadcrumb</position> 3. <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.dtd"> 2. </html> While we are at it.dtd"> 2. <position>left</position> 4.tutsplus.w3. <body> 8.Page 13 of 19 view plaincopy to clipboardprint? 1. <head> 4.0 Transitional//EN" "http://www. <position>footer</position> 11. <jdoc:include type="component" /> 10. </body> 10/04/2011 . <position>user2</position>" xml:lang="<?php echo $this->language.

http://net.tutsplus.Page 14 of 19 13. </html> If you go back to your admin area. so let’s see what it looks like. the Main Menu module. and go to the Module Manager you will notice a module already there. The menu is already hooked on to the left position (which we just included in our template). This module gets installed even if we choose to install the simple version of Joomla. we now have a menu with a link to Home. You can add more menu items and link to different content through the Menu 10/04/2011 . Hit preview As you can see.

Then press next. and in the Position dropdown. http://net.tutsplus. select Footer. give the new module the title: Footer. You should now also see footer information on your template. Click save and then preview the page. On the following page. click new and select Footer. Go to the Module Manager.Page 15 of 19 Lets get a footer 10/04/2011 .

dtd"> 10/04/2011 . <div id="container"> 10. 8.0 Transitional//EN" "http://www. </html> and the CSS view plaincopy to clipboardprint? 1. view plaincopy to clipboardprint? 1. <div id="header"> Header and stuff</div> 11.php in some divs and wrap it all in a container div and then link your style sheet like the example. </div> 15. <div id="footer" class="clear"><jdoc:include type="modules" name="footer" /></div> 17. <html xmlns="http://www.css" type="text/css" /> 6. <div id="sidebar_left" class="float"><jdoc:include type="modules" name="left" /></div> 12. </head> 7. Adding more positions and modules Lets style our page a bit so we can see what we are doing. <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1. ?>" lang="<? php echo $this->language. <link rel="stylesheet" href="<?php echo $this->baseurl ? >/templates/template_tut/css/template. </body> 19. Feel free to copy my messy layout if you are not already using one of your own. <jdoc:include type="component" /> 14.w3. ?>" > 3. <div id="content" class="float"> 13. <jdoc:include type="head" /> 5. I did mine real quick for this tutorial. </div> 18.Page 16 of 19 8. In your template_tut folder create a new folder and call it “CSS” . <body>" xml:lang="<?php echo $this->language. and create a file inside it called ‘template.css” Stick the includes in index. <div id="sidebar_right"class="float">Right sidebar</div> 16.w3. <head> 4.

14. width: 150px. 10. You should see Main Menu and the Footer we created earlier. 6.clear { clear: both. Follow the same steps to create two more modules. 38. 10/04/2011 . 13. Add the top position to the header and right position to the right side bar. 18. 22. 17. margin:0. login if necessary. 29.float { float: left. 28. <div id="sidebar_right"class="float"><jdoc:include type="modules" name="right" /></div> Now let’s create the modules for those two positions. 25. view plaincopy to clipboardprint? 1. } #container { width:960px. 20. 30. 4. } . and a Login module that you will place in the right position. } #sidebar_right { background-color:#CCCCCC. text-align:center. 11. } #header { background-color:#999999. 5. Go to the admin area of Joomla. 5. 24. and 4. } ul { list-style:none. } .tutsplus. 3. } #footer { background-color:#999999. *{ padding: 0. 8. 39. } #content { width: 660px. background-color:#CCCCCC. 37. 9. 40. 3. text-align: center. 15. margin: auto. width: 90px. height: 150px. 32. 31. 34. 12. 35. 23. and go to the Module Manager under the Extensions drop down menu. <div id="header"><jdoc:include type="modules" name="top" /> </div> 2.Page 17 of 19 2. 36. 33. 7. } #sidebar_left { text-align: center. 16. A Search module that you will place in the top position. 21. http://net. 19. } Lets hook our right sidebar and header up with positions. 26.

These are pretty much the basics of a Joomla template. Sign Up to see what your friends like. Joomla templates can be made as complex and powerful as you want. 11 Like 129 likes. I hope this has been useful to you guys. which in most cases you create in the back end. • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles. You create positions in your 10/04/2011 .Page 18 of 19 Preview your page. keep in mind that these are the very basics. Find more web development tutorials on Tutsmarketplace • • http://net. you should now have a search bar in your header and a login form in your right sidebar. like little hooks for Joomla to send info to. You can apply this to almost any design using the many positions that Joomla offers.

Page 19 of 19 • • • • • Tags: joomla By Tarek Farage This author has yet to write their bio. 10/04/2011 .

Sign up to vote on this title
UsefulNot useful