Adding custom fields to an article in Joomla 1.7

[AvdMeulen]

For my own reference, and for those who probably are figuring out how to do this, i wrote a small walk-trough for how to add custom fields to an article in Joomla 1.7.

Note!! This is done trough changing some core-files from Joomla. So applying this method will prevent you from updating your version of Joomla because the changed files will probably be overwritten!


Step 1:
Change the database to support the new fields.
Probably using phpMyAdmin, go to the website database (as configured in your Joomla setup), to the table yyy_content (where yyy represents the configured prefix of your joomla setup). Go to "structure", and add the columns to this table.
For my setup i've added the columns "spotlight" of type Boolean, "largeimagesource" of type varchar(512) and "smallimagesource" of type varchar(512).
(Boolean was converted to tinyint(1) by phpMyAdmin)

Step 2
Implement retrieving the data from the database.
Here is where the core hacking begins.
In the following file you need to add the new fields to the SQL-statement.
/components/com_content/models/article.php
In line 84 (approximately) there is a statement

Code: Select all

$query->select($this->getState(...));

where the dots represent the query. In that query add the new fields.
For my setup i've changed

Code: Select all

'item.select', 'a.id, a.asset_id, a.title, a.alias, a.title_alias, a.introtext, a.fulltext, ' .

to

Code: Select all

'item.select', 'a.id, a.asset_id, a.title, a.alias, a.title_alias, a.introtext, a.fulltext, a.spotlight, a.largeimagesource, a.smallimagesource, ' .

Step 3
Change the article form definition for front end.
In Joomla 1.7 forms are defined by an XML-file. For an article there are 2 definitions. One for the front end, and one for the back end (the administration part).
First we'll change the front end.
In the following file you need to add the new fields.
/components/com_content/models/forms/article.xml
Somewhere in this XML file you need to add the the new field elements.

Code: Select all

<field
	id="[Name of your field]"
	name="[Name of your field]"
	type="[See below for what types are available for you]"
	label="[The text shown in the edit form]"
	description="[The text inside the tooltip hovering this field]"
	class="[HTML CSS-class of your input element]"
	size="[HTML-size of your input element]">
</field>

The available types (for as I can tell) are defined here in the Joomla API http://docs.joomla.org/Standard_form_field_types.

I've placed them around line 85, just after the "featured" field.

Code: Select all

<field
	id="spotlight"
	name="spotlight"
	type="list"
	label="Spotlight"
	description="Of dit artikel getoond wordt in de spotlight op de voorpagina."
	class="inputbox"
	default="0">
	<option value="0">JNO</option>
	<option value="1">JYES</option>
</field>

<field
	id="smallimagesource"
	name="smallimagesource"
	type="media"
	label="Kleine afbeelding"
	description="Kleine afbeelding dat gebruikt wordt op de voorpagina (238*140)."
	class="inputbox"
	size="50">
</field>

<field
	id="largeimagesource"
	name="largeimagesource"
	type="media"
	label="Grote afbeelding"
	description="Grote afbeelding dat gebruikt wordt op de voorpagina en boven het artikel(492*140)."
	class="inputbox"
	size="50">
</field>

Step 4:
Add the fields to the editor in the front end
Now that you've defined the new fields, you have to show them in the editor.
For this you add some elements to the following file:
/components/com_content/views/form/tmpl/edit.php
Somewhere inside you have to add a getLabel and a getInput for you new fields. It is wise to sustain the layout of the editor thus placing it inside a similar container as the other fields.
Find yourself a fieldset and place:

Code: Select all

<div class="formelm">
<?php echo $this->form->getLabel('[Name of your field]'); ?>
<?php echo $this->form->getInput('[Name of your field]'); ?>
</div>

For my setup I've added the the new fields inside a new fieldset where I've also moved the existing 'featured' field to:

Code: Select all

<fieldset>
	<legend><?php echo JText::_('JGLOBAL_FIELD_FEATURED_LABEL'); ?></legend>

	<div class="formelm">
	<?php echo $this->form->getLabel('featured'); ?>
	<?php echo $this->form->getInput('featured'); ?>
	</div>

	<div class="formelm">
	<?php echo $this->form->getLabel('spotlight'); ?>
	<?php echo $this->form->getInput('spotlight'); ?>
	</div>

	<div class="formelm" style="clear:both;">
	<?php echo $this->form->getLabel('smallimagesource'); ?>
	<?php echo $this->form->getInput('smallimagesource'); ?>
	</div>

	<div class="formelm" style="clear:both;">
	<?php echo $this->form->getLabel('largeimagesource'); ?>
	<?php echo $this->form->getInput('largeimagesource'); ?>
	</div>
</fieldset>

Step 5:
Change the article form definition for back end.
With finishing step 4 you are able to read and write the new fields through the article-edit functionality directly in the front end side of your website.
I (and i think most other users) edit our articles through the back end side (or the administrator part) of the website.
For this we have to repeat step 3 and 4, for a different part of Joomla.
First we change the form definition of the article. The XML-file for this is found at:
/administrator/components/com_content/models/form/article.xml
Depending on where you want these new fields to be shown, you can find the corresponding fields element inside the XML for where you want to add them.
The elements are defined the same way as in step 3.

I wanted them on the main part of the editor, so I've added these new fields just after "featured" on line 121.

Code: Select all

<field
	id="spotlight"
	name="spotlight"
	type="list"
	label="Spotlight"
	description="Of dit artikel getoond wordt in de spotlight op de voorpagina."
	default="0">
	<option value="0">JNO</option>
	<option value="1">JYES</option>
</field>

<field
	id="smallimagesource"
	name="smallimagesource"
	type="media"
	label="Kleine afbeelding"
	description="Kleine afbeelding dat gebruikt wordt op de voorpagina (238*140)."
	size="50">
</field>

<field
	id="largeimagesource"
	name="largeimagesource"
	type="media"
	label="Grote afbeelding"
	description="Grote afbeelding dat gebruikt wordt op de voorpagina en boven het artikel(492*140)."
	size="50">
</field>

Step 6:
Add the fields to the editor in the back end
Final step is to show these new fields in the administrator editor for an article. This is pretty much the same as in step 4, only in a different file.
This file can be found at:
/administrator/components/com_content/views/article/tmpl/edit.php
By reusing the current layout, i've added the following PHP & HTML on line 66, just after the "featured".

Code: Select all

<li><?php echo $this->form->getLabel('spotlight'); ?>
<?php echo $this->form->getInput('spotlight'); ?></li>

<li><?php echo $this->form->getLabel('smallimagesource'); ?>
<?php echo $this->form->getInput('smallimagesource'); ?></li>

<li><?php echo $this->form->getLabel('largeimagesource'); ?>
<?php echo $this->form->getInput('largeimagesource'); ?></li>

That's it.

[AvdMeulen]

If you want to use these new fields, you can can access them inside your default article view found at
/components/com_content/views/article/tmpl/default.php
or in the overwritten article view from the template.
/templates/[name of the template]/html/com_content/article/default.php

To access it's value use

Code: Select all

$this->item->[name of your field]

In my setup they can be used like this:

Code: Select all

<?php if ($this->item->spotlight) : ?>
<p><img src="<?php echo new JURI($this->item->smallimagesource); ?>" /></p>
<p><img src="<?php echo new JURI($this->item->largeimagesource); ?>" /></p>
<?php endif; ?>

[AvdMeulen]

If you want to use the new custom fields in the frontpage or other overview pages, you also have to add these fields in the query in
/components/com_content/models/articles.php

Around line 162 just add them to the querystring

Code: Select all

$query->select(
	$this->getState(
		'list.select',
		'a.id, a.title, a.subtitle, a.alias, a.title_alias, a.introtext, a.spotlight, a.largeimagesource, a.smallimagesource, ' .
		'a.checked_out, a.checked_out_time, ' .
		'a.catid, a.created, a.created_by, a.created_by_alias, ' .
		// use created if modified is 0
		'CASE WHEN a.modified = 0 THEN a.created ELSE a.modified END as modified, ' .
			'a.modified_by, uam.name as modified_by_name,' .
		// use created if publish_up is 0
		'CASE WHEN a.publish_up = 0 THEN a.created ELSE a.publish_up END as publish_up, ' .
			'a.publish_down, a.attribs, a.metadata, a.metakey, a.metadesc, a.access, '.
			'a.hits, a.xreference, a.featured,'.' LENGTH(a.fulltext) AS readmore '
	)
);

[Olinad]

Thank you for this. I used these instructions to add a sql field that lets me select one or more elements from sobipro, and I will then use this data to add connections in the article view. Anyway, even though everything is saved properly, when I edit an article the field doesn't display the previously selected articles properly. I believe this has to be addressed editing the sql field file, or creating a new field type based on it, but first I wanted to ask you if there was another solution. Thanks

[AvdMeulen]

Thank you for this. I used these instructions to add a sql field that lets me select one or more elements from sobipro, and I will then use this data to add connections in the article view. Anyway, even though everything is saved properly, when I edit an article the field doesn't display the previously selected articles properly. I believe this has to be addressed editing the sql field file, or creating a new field type based on it, but first I wanted to ask you if there was another solution. Thanks

The best way to add custom fields is to work with plugins. Although I'm not familiar with these, they will keep the Joomla core intact.
I'm not able to tell you how to write these plugins, but if you found out, please let me know. That's something I would like to know too!

[reytercero]

is there a way to set categoríes whith diferent fields?

so many good article

[Rolandmo]

You are my hero...
This was exactly what I was looking for a title above main title... So clean and nice tutorial.
I know that I shouldn't update joomla now, which is a bummer, but at least my client will get what it wants.
Custom form fields in administration are always a pain to do with CCK, but this is great..
THANK YOU VERY MUCH FOR THIS...

[mazenwrq]

thank you alot

[chrisyanky86]

i follow this instruction, but dosent work for me.