- 00 how to create your first joomla template

8/7/2019 - 00 HOW TO CREATE YOUR FIRST JOOMLA TEMPLATE

1/19

Advertise Here

How to Create Your First JoomlaTemplateTarek Farage on Feb 17th 2009 with 333 comments

Tutorial DetailsDifficulty: BeginnerCompletion 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 ghrough 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 bquite annoying and, to be honest, a waste of time (unless you want to get into how its done exactly).What we will be doing is downloading a single installer for all the above that will stick a local server on your systemand give you a really nifty control panel too.

So head on over to WAMP and download the latest version.( MAMP for Mac)

Page 1

10/04/tp://net.tutsplus.com/tutorials/other/creating-your-first- oomla-template/


2/19

Once the installer is downloaded, execute it and install WAMP in a place easy to remember. If all goes to plan youshould 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 WAMPscontrol panel. You can use this for a number of things, including restarting the server.

2. Downloading and installing Joomla

Now that we have a server installed, we can get Joomla and set it up. Go to Joomla and download the latest release.

Before we continue, lets take a look at our wamp folder again. Inside you will find a bunch of folders, but the one ware interested in is the www folder.This is the root of your server setup and this is where we will be installing Joomla. (note: you can install as manycopies of Joomla in here as you want, or anything else for that matter)

Page 2



3/19


4/19

Now that we have a database, we can start installing Joomla. Fire up your browser and go to http://localhost/joomlawhatever you called your site when unpacking it.)

The first screen pretty much speaks for itself. Choose a language and press next.

The next screen you see is the Pre-Install checklist. This is a list of the required items and settings Joomla needs tosuccessfully install. Make sure you have the necessary configuration and click next.

On the next page, read the license carefully, and, when ready click next and enter the required details(Host Name:ocalhost , Username: root , no password and joomla as Database name), and press next.

Page 4



5/19


6/19

3. A closer look at Joomla

Its pretty hard these days to get into any Open Source CMS discussion without the name of Joomla dropping.Its installation along with intuitive admin panel makes it very popular with users who are after an easy CMS while, he same time, being packed with features that keephousands of developers busy rolling applications and modules. If necessary, get familiar with the back end ( I

recommend this quickJoomla 101 article on the Themeforest blog to get a quick feel.)

To visit your site , click on preview in the upper right corner of the admin area. What you will get is the defaultemplate with no content and the most basic of modules loaded.

4. The template

In order to begin understanding the template structure, lets take a look at the default one. Go to your www folder, thnside the joomla folder you should see a templates folder.(wamp/www/joomla/templates). This is where all the different templates go. You can switch between templates in tadmin panel.

Inside the templates folder, you will see a folder for every template installed. Joomla comes with three templates: berhuk_milkyway and ja_purity. Remember this location as this is where you will be installing your new templates infuture.

Page 6



7/19

Although most templates are made up of quite a few files, only two are needed to make a working template. These a

index.phptemplateDetails.xml

The first one index.php is where all the markup goes in which you stick the Joomla includes. These can be seen ittle hooks where joomla hangs up information on, like modules for example

The second file is templateDetails.xml. You can see this as a list of instructions to Joomla. This list must include thename of the template, the names of the files used in the template(images etc..) and the positions you want to use (thncludes mentioned above.)

view plaincopy to clipboardprint?

1.3.

4. template _tut5. 31-01-20096. Nettut Fan7. [email protected]. http://www.siteurl.com9. You 200910. GNU/GPL11. 1.0.012. Template Tut13. 14. index.php15.

templateDetails.xml16. css/template.css17. 18.19. 20. breadcrumb21. left22. right23. top24. user125. user226.

user327.

Page 7



8/19

user428. footer29. 30.31.

The above is an example of a templateDetails.xml file. As you can see, this is a specific list that tells Joomla about template, like the name, the author, date created etc

Notice the positions section in the code above. These are the positions we spoke of earlier, the includes.Some are self explanatory, like footer.If you put the joomla footer include in the footer area of your design, you will be able to control some aspects of thefooter using the Joomla back end. Lets try and throw together a simple template.

5. Beginning the template

Lets do some preparation so we have something to work with. Go to your templates folder , and create a new folderLets call it template_tut.

Inside your new folder, create a file called index.php, and another called templateDetails.xml (copy/paste the code ihe example above inside it).

Open up your index.php file in notepad or anything else you use to edit code, and copy/paste the following in:


Page 8



9/19

1.


10/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, fill in an alias, make sure its published to front page and hit save

Page 10



11/19

Lets see what our article looks like on the front page. Click on preview in the upper right corner after saving. Youshould see the front page of your site with your text.

Now that we have published content, lets see if the template we made actually works. Go back to your admin area click on Extensions and then Template Manager

You should see template_tut in the list, so go ahead and choose it, and set it as default.

Page 11



12/19

Hit preview and check out your glorious new template. Well maybe not so glorious but your first joomla template.YAY!

7. Adding some meat to our template

We got our template working, its retrieving the header info including the title and displaying content we created inoomla back end .Before we add more includes, lets take a closer look at the module position includes; the ones we

named in our xml file.

Page 12



13/19


1. breadcrumb2. left3. right4. top5. user16. user27. user38. user49. footer10.11.

They are included in the following way:


1.

So in order to add , for example, the left position, our index.php will look like this:


1.


14/19

13.

If you go back to your admin area, and go to the Module Manager you will notice a module already there, the MainMenu module. This module gets installed even if we choose to install the simple version of Joomla.

The menu is already hooked on to the left position (which we just included in our template), so lets see what it lookike. Hit preview

As you can see, we now have a menu with a link to Home. You can add more menu items and link to different conthrough the Menu Manager.

Page 14



15/19

Lets get a footer working. Go to the Module Manager, click new and select Footer. Then press next.

On the following page, give the new module the title: Footer, and in the Position dropdown, select Footer.

Click save and then preview the page.You should now also see footer information on your template.

Page 15



16/19

8. Adding more positions and modules

Lets style our page a bit so we can see what we are doing. In your template_tut folder create a new folder and call itCSS , and create a file inside it called template.css

Stick the includes in index.php in some divs and wrap it all in a container div and then link your style sheet like theexample. Feel free to copy my messy layout if you are not already using one of your own. I did mine real quick for utorial.


1.


17/19

* {2.padding: 0;3.margin:0;4.}5.

ul {6.list-style:none;7.}8.

.float {9.float: left;10.}11.

.clear {12.clear: both;13.}14.

#container {15.width:960px;16.margin: auto;17.}18.

#header {19.background-color:#999999;20.height: 150px;21.}22.

#content {23.width: 660px;24.text-align: center;25.

26.}27.

#sidebar_left {28.text-align: center;29.background-color:#CCCCCC;30.width: 150px;31.}32.

#sidebar_right {33.background-color:#CCCCCC;34.width: 90px;35.}36.

#footer {37.background-color:#999999;38.text-align:center;39.}40.

Lets hook our right sidebar and header up with positions. Add the top position to the header and right position to theright side bar.


1.2.and3.4.5.

Now lets create the modules for those two positions. Go to the admin area of Joomla, login if necessary, and go to Module Manager under the Extensions drop down menu. You should see Main Menu and the Footer we createdearlier. Follow the same steps to create two more modules. A Search module that you will place in the top position,and a Login module that you will place in the right position.

Page 17



18/19


19/19

- 00 how to create your first joomla template

Documents