Joomla Theme pt. 2

Now, let’s look at the index.php file in your template directory. The file contains a bunch of stuff – mostly php code and some html. You can find the <body> tag, and usually a bunch of <div> tags as well. The most interesting ones right now, are the tags that say something like this:

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

When the page is served, the Joomla engine will use the magic of PHP to replace the tag with “something” from the CMS. From the sample it appears evident that Joomla will pump out the “module” named “top”.

Where do we find “top”?

Open up the file called templateDetails.xml, and locate the “positions” node. Inside that node, you will see <position>top</position> this tells Joomla that we have “something” that we’d like to associate with a position called “top” for this template.

Let’s experiment with a new “position”. We open the templateDetail.xml and add another position node. Let’s call it “underbelly”, once you are done, save the file and go to the Joomla admin.

Locate the Extensions / Module Manager, and pick Breadcrumbs (for example). The configuration for the breadcrumbs will appear and if you pick the “Position” drop down, you will see your newly created position in there.

Screencap showing the underbelly position

Don’t make any changes, instead go make a new menu. Simply go to the menu manager and create a new menu, fill it in like so – pay attention to the module name, since we will need that later.

Screencap, Joomla, Create a new menu

Once you have created your menu, add some items to it. I don’t really care what you put in, anything goes.

The next step is to associate the menu (which is a module) with the position. This is done via the module manager that we touched upon previously. This should be fairly simple. You may recall that the module name of the menu was “thisgoesintheunderbelly”, so we pick that. In the configuration page, we select the “underbelly” position.

So far so good, but where will the underbelly go on the frontend?

Recall the php mumbo-jumbo at the top? I think you can suss out what to do next 🙂

– this was part 2

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: