Joomla - How to add a custom field

Within this tutotial I will show you the nessecary steps required to add a custom field named 'Version' to your Joomla site. This field will be displayed within both the administrator console and the published article.

1. Configure Database

Within phpmyadmin run the following SQL command

ALTER TABLE `jos_content` ADD `vers` VARCHAR( 255 ) NOT NULL

2. Edit PHP

Next we will edit the core Joomla files (php) so that the field is displayed in both the admin console and the article itself.

2.1 Change Directory

cd /var/www/html/[webroot]/

2.2 libraries/joomla/database/table/content.php

At line 88 add the following line,

var $vers                             = null;

2.3 administrator/components/com_content/controller.php

At line 327 add the following line,

$row->vers           =$item->version;

2.4 administrator/components/com_content/admin.content.html.php

At line 835 add the following. This will add the new field to the administration console when creating a new article.

      <table  class="adminform">
                        <td class="customfieldtd">
                                <label for="Version">
                                        <?php echo JText::_( 'Version' ); ?>
                                <label for="Version">
                                        <input class="inputbox" type="text" name="vers" id="vers" size="40" maxlength="55" value="<?php echo $row->vers; ?>" />

2.5 components/com_content/views/article/tmpl/default.php

At line 61 add the following. This will display the new field within the article.

  $db =& JFactory::getDBO();
  $thisArticle=JRequest::getInt( 'id');

  $query1 = 'SELECT vers FROM #__content WHERE id = ' . $thisArticle;
  $db->setQuery($query1, 0, 1);
  $field1 = $db->loadResult();
  if (!$field1=="") {
    echo "<table class="vertable">";
    echo "<tr class="vertr">";
    echo "<td class="vercol1">Version</td>";
    echo "<td class="vercol2">$field1</td>";
    echo "</tr>";
    echo "</table>";

3. Edit CSS

In order to keep your new field aligned within the article manager the following CSS entry is added to your templates CSS.

.customfieldtd {
    width: 10.8%;

4. Example

Below shows you the changes should look once you have made the changes above.

About the Author


R Donato

Rick Donato is the Founder and Chief Editor of He currently works as a Principal Network Security Engineer and has a keen interest in automation and the cloud.

You can find Rick on Twitter @f3lix001