By default, Joomla doesn’t allow use of any special styles or syntax in its post and module titles; instead, we’re limited to using boring old plain text only. Thankfully, it’s fairly easy to work around this restriction when you know how.
What can we do with enhanced title syntax in Joomla?
If you haven’t considered adding unique styles to your post or module titles before, you might not be aware of the range of possible modifications available. Here’s a few typical cases of what this simple method can help you achieve:
- Add a tag that breaks the line at a given point in the title.
- Divide the title, e.g. apply two different headers, such as <h1> and <h2> to two different parts of the title text.
- Add emphasis or distinctive styling to a specific word or character in the title.
- Add additional HTML tags in selected titles.
- Stylize the first first word or letter in the title.
All of above cases may be achieve just by using our own syntax, and the last one can also be made using CSS if we’re not fussed about the extra HTML tags around the first word/letter of the title.
How to apply our custom syntax
We can add the unique stylizations discussed above using a very simple solution; first, we create a unique string that we will use to wrap the title content we wish to modify, then use some additional PHP code to parse this string into the HTML content we need.
For example, let’s say we want to add line breaks to the title text. We’ll start by adding a string, such as “[BR]”, in the text where we want the line breaks to appear:
Lorem [BR]ipsum dolor [BR]sit amet
Then, by adding code that parses instances of “[BR]” to the standard HTML line break tag, our title content will be changed on the live site to:
Lorem <br>
ipsum dolor <br>
sit amet
Spreading the title across multiple lines:
Lorem
ipsum dolor
sit amet
Now, since our code will be modify a particular text string and change it accordingly, it’s important that we ensure that the placeholder string we add to our title text is totally unique to avoid any compatibility issues; if we use something too simple then there’s a risk that site admins will inadvertently use the string in their standard title content and it will be parsed like the others, making their title look different to how they intended. Personally, I like to use strings such as this:
- **word**
- First heading–Second heading
- __word__
- {{word}}
- [[word]]
- ##word##
- %%word%%
These character sequences are strange enough that there’s a very low risk of anyone using one in their content by mistake, whilst still keeping it simple enough to remember without having to keep notes!
Adding support for the custom syntax in the Joomla template code
Once we’ve decided what character string we’ll use as your indicator, we’ll need to take care of the override in the code that will handle the changes. How we apply this override depends on whether we want to modify the title of an article or of a module, as we’ll see.
If we’re overriding the posts’ titles, then we need to override virtually all of the files from the
components/com_content/views/tmpl/ folder in our theme; if we don’t do this, then on some subpages, e.g. category listings, strange characters will appear in the post titles that won’t look too good on a professional site!
For module titles it’s a bit easier – we’ll only need to create one additional theme file, html/modules.php, which will include a dedicated module style via
<jdoc: include> inserts.
For most of the common modifications, we’ll need a little knowledge of some of the basic PHP features such as:
- str_replace
- explode
- join
- preg_replace
And knowledge of regular expressions and their functionality, particularly:
- using regular expression flags,
- greedy/non-greedy quantifiers,
- capture groups.
Code examples of custom title content
Let’s start applying these principles to create our code; for this tutorial we’ll be focusing on creating examples that modify module titles only, but modifying them to support post titles instead should not present any major problems even for novice PHP programmers. Since our code will support module titles, let’s assume that the variable $title contains the previously assigned value:
$title = $module->title;
Where $module is a module object, taken from the first argument of the function defining the module style in the modules.php file.
Support for line breaks
In the following example any instances of the
[br] string will be replaced by
<br>, which will add the line breaks as needed.
$title = str_replace('[br]', '<br>', $title);
Dividing the title into two blocks
The below code checks the title text for a double-hyphen
(–), and if found, separates the text into two. It then wraps any text found before the separator with a set of
<h2> header tags, and text found after the separator with a set of
<h3> header tags, allowing a module title to contain two different text styles that can, for example, be used to create a title and subtitle from the module title field.
$title = explode('--', $title);
echo '<h2>' . $title[0] . '<h2>';
if(count($title) > 1) {
echo '<h3>' . $title[1] . '<h3>';
}
Bolding a selected text fragment
In the following case we’re using capture groups – the fragment
$ {1} will be replaced with the content of the string placed in
(. *?) – her we’re also using greedy quantifiers to ensure proper operation of regular expressions that have more tags.
$title = preg_replace('/__(.*?)__/mis', '<strong>${1}</strong>', $title);
Things to remember when using this custom solution
The above examples will get you started with the basics, but as you progress things might get a little tougher. First off, remember that overriding the titles of entries rather than modules is a little more difficult; this is because the titles of posts might also be displayed via modules as well as on the article page or category list itself, and each of these instances need to be properly overwritten in the template. Alternatively, instead of overwriting many files, we may modify the titles via plugins.
In the case of a method based on the buffer of a website available when an event
onAfterRender is called, we need to keep in mind that our syntax does not contain sequences that may occur in the HTML code of our website – otherwise we run the risk of hard to debug issues.
Our biggest limitation of using this method is the maximum length of the post title (255 characters) and a module title (100 characters). It’s quite severely limits the range of our capabilities, so use of special tags should be limited to keep the title text as short as possible.
In the case of specific installations, we can simply change the type of column with the title in the table of posts / modules from VARCHAR to TEXT, but in the case of templates dedicated to a wider range of customers such a solution, unfortunately, is not possible, unless they can provide customers a unique script that will carry such a modification automatically – but it’s still a change that could pose a problem when upgrading to future versions of Joomla!, for example.
In addition, it is worth remembering one more important thing – the user of the template may decide in the future to switch to a different template, which won’t include the code to parse the text strings and will instead display the plain text strings, which will look very strange on the live site. That’s why we need to take care to make sure our use and application of the modified tags and the code used to parse them is as minimally invasive and unique as possible, so that if necessary it will be easy to automatically remove them from the database, for example using a special script or component.
Summary
At GavickPro we often use the methods described above to provide our customers a richer typography in our template’s module titles and thus offer them more diverse, interesting content. As long as we keep the limitations of the described solutions in mind when creating our
template, we can fairly easily implement really interesting headlines and titles in posts and modules that offer a unique look that stands out from the crowd.