Creating Your Own Template Fields

Now that we have created our new custom template, we can begin adding new features and options that can integrate into our new template!

Process 1: Create The Template Field(s)

Template settings can range from the most basic (logo image) to complex sub-form fields that allow you (or your clients) to create automated holiday themes or scheduled website announcements and everything in between.  For this example, we are going to be adding social media fields so we can add social media icons to our new template.

1. 1. Open your template XML file which can be located in this template here:
      templates/mytemplate/templateDetails.xml
   2. If you are using the newly renamed 'Cassiopeia' template we created in the previous article (renamed to 'My Template'), we will need to create a separate social media tab in the settings page to hold all of our social media links. Inside the 'templateDetails.xml' file, we are going to add a new fieldset before the "advanced" fieldset so around line 53, we will add:
      <fieldset name="social">
</fieldset>
   3. Before we start adding social media fields, we must first convert the new tabbed name (which is a language string) into our language by adding it to our template's language file found here:
      language/en-GB/tpl_mytemplate.ini
   4. Add the following line to the bottom of the file shown below:
      COM_TEMPLATES_SOCIAL_FIELDSET_LABEL="Social Media"
   5. Now inside the new 'social' fieldset we created in Step 2 we will update it as shown below:
      <fieldset name="social">
<field name="facebook" type="text" label="TPL_MYTEMPLATE_SOCIAL_FACEBOOK"></field>
<field name="twitter" type="text" label="TPL_MYTEMPLATE_SOCIAL_TWITTER"></field>
<field name="github" type="text" label="TPL_MYTEMPLATE_SOCIAL_GITHUB"></field>
</fieldset>
   6. Going back into the language/en-GB/tpl_mytemplate.ini file, we will now add three more language stings as shown below:
      TPL_MYTEMPLATE_SOCIAL_FACEBOOK="Facebook"
TPL_MYTEMPLATE_SOCIAL_TWITTER="X"
TPL_MYTEMPLATE_SOCIAL_GITHUB="GitHub"
   7. Add the following line to the bottom of the file shown below:
      COM_TEMPLATES_SOCIAL_FIELDSET_LABEL="Social Media"
   8. Now all that is left is to go into our template's settings and add the necessary social media channel links by clicking the new 'Social Media' tab we just created found here at 'System > Site Template Styles'. For this exercise, I am going to simply add 'https://www.facebook.com' into the Facebook field and then hit the 'Save' button.

Process 2: Displaying the Template Fields

Reviewing what's been accomplished so far:

1. We have created a new 'Social Media' tab
2. We created three (3) new social media fields
3. We added a value to the Facebook field

We can now start on this next step to display our social media fields where ever we wish in our new template. Using the newly renamed 'My Template' we notice that everything related to the template layout can be found in one file 'index.php' found here: 'templates/mytemplate/index.php'

1. Around line 40 we are going to add the following lines shown below:
   // Color Theme
$socialFacebook = $this->params->get('facebook');
$socialTwitter = $this->params->get('twitter');
$sociaGetHub = $this->params->get('github');
2. Now that we have established that '$socialFacebook' is going to display the link to our Facebook channel, where do we want to place it (and the other social media links)?
3. Usually the Footer is a good place for Social Media Links so around line 243 in the same 'index.php' file we are going to change it from:
   <?php if ($this->countModules('footer', true)) : ?>
        <footer class="container-footer footer full-width">
<div class="grid-child">
<jdoc:include type="modules" name="footer" style="none" />
            </div>
</footer>
    <?php endif; ?>
   To:
   <footer class="container-footer footer full-width">
<?php if ($this->countModules('footer', true)) : ?>
<div class="grid-child">
<jdoc:include type="modules" name="footer" style="none" />
</div>
<?php endif; ?>
<div class="container">
<?php if($socialFacebook):?>
       <a class="fs-5 px-2 link-dark" href="/<?php echo $socialFacebook;?>" target="_blank" title="Follow us on Facebook"><i class="fa-brands fa-facebook"></i></a>
   <?php endif;?>
<?php if($socialTwitter):?>
       <a class="fs-5 px-2 link-dark" href="/<?php echo $socialTwitter;?>" target="_blank" title="Follow us on X"><i class="fa-brands fa-x-twitter"></i></a>
<?php endif;?>
<?php if($sociaGetHub):?>
       <a class="fs-5 px-2 link-dark" href="/<?php echo $sociaGetHub;?>" target="_blank" title="Find us on GitHub"><i class="fa-brands fa-github"></i></a>
<?php endif;?>
</div>
</footer>

Additional Notes

You can always use $this->params->get('parameterfieldname'); to call any template parameters you create for your template within template files. To display these fields anywhere else within your custom layout overrides found throughout the rest of your site, you must add the following lines to the top of the layout file you wish to include these parameters in:

$app = Joomla\CMS\Factory::getApplication();
$tpl = $app->getTemplate(true);
$socialFacebook = $tpl->params->get('facebook');
$socialTwitter = $tpl->params->get('twitter');
$sociaGetHub = $tpl->params->get('github');

Since you already added the previous code using the variable shortcuts we created, the rest of the html / php code would still work in whatever additional files we wish to place it in. An example of using template parameters in a custom layout override can be found on the Joomla Tips page (under the Follow Us Title to the right of the Additional Joomla! Tips section).