Tutorials

Creating custom profile fields in SMF

One of the most important things about running a good forum is customization.  And, a large part of proper customization is making it possible for your members to enter information about themselves in their profiles - not just any information, but information that matters to them and to the other people using your forum.  Because of this, SMF has been deisgned to more easily handle doing this yourself - and doing it the way you want to.

It should be noted that this tutorial has been written for SMF, and won't work with other forum software.

What is it that you want?

Planning, as you all know, is the key to everything.  For this, you need to know a few things - what type of thing you want, how you want it to look, where you want it, and what options they should have.  In this tutorial, we'll look at a few different examples to wet your whistle - text, selection from a list, checkboxes, and larger areas of text.  Even more is possible, but these are just examples to get you started.

So, with these choices, the next step is to choose what it is you want.  For example, if you have an option that will only have a few very specific answers, you probably just want them to choose from a list.  However, if it's something more like, "What's your significant other's name?", you will more than likely opt for a text box.  If you want to add a small biography to their profile, you will be more interested in giving them a larger text box to type in.  Then, you'll need to know where you want this to appear - for example, you wouldn't want biographies to appear with every post they make, but you would want them to show in their profiles.  And, you likely won't need to require them to enter their biography when they register, because it can be filled in later.

It's all about the template system...

The way of adding custom profile options we're going to use is done through SMF's powerful template system.  With it, you won't need to make a single change in the database, or worry about where things are stored.  While these fields could be, possibly, added through an administration interface, this method gives you much more control over where things go and how they look than any abstraction done by an administration interface ever could.  Even more, it's not as if you really need to learn PHP - you just have to know how to copy and paste ;).

That said, there is one thing to remember - because of the nature of the template system, you will need to escape any ' (single quote or apostrophe) characters you use - for example, if you say "significant other's name".  Escaping that character means using a \ (slash) before it, like so - "significant other\'s name".  Aside from this, it also helps to know a little HTML and or CSS - both of which you can learn from the tutorials at http://www.w3schools.com/.

When making these modifications, it's possible to make them "available" to just the current theme, or multiple themes.  For profile options, you will almost always want them available for all themes, so that is what we will be using.  However, when using multiple themes the templates in each may need to be changed - and if you change the default theme, you will need to do it again next time you upgrade.  If possible, make a copy of the default theme, edit it, and turn off selection of the default theme - it will make things easier, especially upgrading.

You will need a text editor to make these modifications.  You can use Notepad, ConTEXT, or any editor of your choice.

Adding a simple text field

This is probably the simplest and most common type of option to add.  For this option, we're going to add "Real name" to the profile.

  1. Open Themes/yourtheme/Profile.template.php in a text editor.  If you don't have that file, make a copy of it from the default theme into yourtheme.

  2. Look for the following in that file:

    <td><input type="text" name="websiteUrl" size="50" value="', $context['member']['website']['url'], '" /></td>

    Note: this may be a little different if you've changed your theme.

    Add the following just after it:
    </tr><tr>
    <td><b>Real name: </b></td>
    <td><input type="text" name="default_options[profile_real_name]" size="50" value="', @$context['member']['options']['profile_real_name'], '" /></td>

    Note: The "default_options" part makes this field global to all themes.  Use just "options" for only the current theme.

  3. This option should probably show up when people view a person's profile.  To make this happen, look for:

    <td><a href="', $context['member']['website']['url'], '" target="_blank">', $context['member']['website']['title'], '</a></td>


    After that, you might add:
    </tr><tr>
    <td><b>Real name: </b></td>
    <td>', @$context['member']['options']['profile_real_name'], '</td>


    But, we want to omit it in case they didn't enter anything.  To do that, use:
    ', !empty($context['member']['options']['profile_real_name']) ? '</tr><tr>
    <td><b>Real name: </b></td>
    <td>' . $context['member']['options']['profile_real_name'] . '</td>' : '', '

  4. And now, you may wish to show the poster's real name along with every post they make, and every personal message they send.  This isn't any more complicated - just go to Themes/yourtheme/Display.template.php, and look for:

    // Show the member's gender icon?


    Above that line, add:
    if (!empty($message['member']['options']['profile_real_name']))
    echo 'Real name: ', $message['member']['options']['profile_real_name'], '<br />';


    The same thing can be done in the InstantMessage.template.php file.

To add more than just one, or different options than a real name, simply change profile_real_name and Real name in the code sections above to whatever you'd like.

Selecting your choice from a list

If you want a list, the process is similar.  Follow the directions above, but for the first step in Profile template, use this instead:

</tr><tr>
<td><b>Favorite animal: </b></td>
<td><select name="default_options[profile_favorite_animal]">
<option', @$context['member']['options']['profile_favorite_animal'] == 'Bird' ? ' selected="selected"' : '', '>Bird</option>
<option', @$context['member']['options']['profile_favorite_animal'] == 'Horse' ? ' selected="selected"' : '', '>Horse</option>
<option', @$context['member']['options']['profile_favorite_animal'] == 'Elephant' ? ' selected="selected"' : '', '>Elephant</option>
<option', @$context['member']['options']['profile_favorite_animal'] == 'Giraffe' ? ' selected="selected"' : '', '>Giraffe</option>
</select></td>

And, in the remaining steps, use profile_favorite_animal and Favorite animal in place of profile_real_name and Real name.

Adding a checkbox

Checkboxes are often very useful for theme options.  For example, the option to show or not show a box.  To do this is similar to the above examples.  In the Profile template, use:

</tr><tr>
<td><b>Real name: </b></td>
<td><input type="checkbox" name="default_options[show_some_option]" value="1"', @$context['member']['options']['show_some_option'] ? ' checked="checked"' : '', ' class="check" /></td>

To show something only when this option is selected by the current user, you can use one of two methods:

', !empty($options['show_some_option']) ? 'Hello!' : '', '

';

if (!empty($options['show_some_option'])
{
echo 'Hello!';
}

echo '

You can also get to the current user's other options that way - such as their real name.  In that case (assuming they entered it), it would be $options['profile_real_name'].  Similarly, you can get to the poster's options (in templates like Display and InstantMessage) with $message['member']['options']['show_some_option'].

Showing a larger area to enter text in

One last option many want is a "biography" style field.  This is also possible - just follow the same steps for the text box above, put for the first one, use this:

</tr><tr>
<td><b>Autobiography: </b></td>
<td><textarea name="default_options[profile_biography]" rows="4" cols="80" class="editor">', @$context['member']['options']['profile_biography'], '</textarea></td>

If you have any questions, please feel free to post on the support forum.