Joomla tutorial: Create line breaks in Joomla article titles

In my case, I needed to break the title of an article name when showing the article view.Many titles on this site have a similar pattern, for instance 'Tutorial:'.

I want this pattern to show on the first line, then show the rest of the title.
I don't want it to show like this any other place (blog view, front page etc), so I will have to do the manipulation of the text string on the article view.

What I need to do is to do a PHP string replace to find the pattern in the title text, and then replace the pattern with a the pattern + linebreak code

The original text string could be: 'Tutorial: How to Create Line Breaks in Joomla Article Titles', and I want it to become 'Tutorial:<br /> How to Create Line Breaks in Joomla Article Titles'. Thus, 'Tutorial:' will show on the first line, while the rest of the title will show on the second line.

Edit your template overrides

To acheive this, you need to edit the HTML override for your article view. This file can be found in the directory templates/TEMPLATENAME/html/com_content/article/. The file is called default.php.

Create a copy of the file before starting to edit the original.

Open the file with eXtplorer or your HTML editor of choice.

Then, find the following code (should be near to the start of the file):

<?php if ($this->params->get('show_page_title', 1) && $this->params->get('page_title') != $this->article->title) : ?>
<h1 class="pagetitle">
<?php echo $this->escape($this->params->get('page_title')); ?>
</h1>
<?php endif; ?> 

The code can vary slightly, depending on which template you're using. Just make sure you find the piece of code showing your title.

I insert the following code before the just mentioned code.

<?php
$page_title = str_replace("Tutorial:", "Tutorial:<br />", $this->escape($this->params->get('page_title')));
?> 

In the previous code, we set a variable ($page_title) and replace the occurrence of 'Tutorial:' wth 'Tutorial'<br />', which breaks the line.

I can add as many of these lines as I need, for instance like this:

<?php
$page_title = str_replace("Tutorial:", "Tutorial:<br />", $this->escape($this->params->get('page_title')));
$page_title = str_replace("Tip:", "Tip:<br />", $this->escape($this->params->get('page_title')));
?>

Then, replace all instances of this:

<?php echo $this->escape($this->params->get('page_title')); ?>

with:

<?php echo $page_title; ?>

Now we pick up the new, manipulated text string from the variable $page_title that we just created.

Thus, the resulting code will be:

<?php
$page_title = str_replace("Tutorial:", "Tutorial:<br />", $this->escape($this->params->get('page_title')));
?>


<h1 class="pagetitle">
<?php echo $this->escape($this->params->get('page_title')); ?>
</h1>
<?php endif; ?> 

Now, the article title will break after each occurrence of the text string 'Tutorial:'.

You can do some fun stuff with this. For instance, you can add <span> tags to certain patterns, which makes it possible to style separate parts of the title individually.

Example:

$page_title = str_replace("Tutorial:", "<span>Tutorial:</span><br />", $this->escape($this->params->get('page_title'))); 

By using the span tag as a selector in your CSS file, you can style the text 'Tutorial:' in another font size, color etc.

In my example, this is the styling I applied to my span:

div.joomla h1.title span {
    font-size:22px;
    color:#000;
    letter-spacing:normal;
    line-height:26px;
}

Some restrictions when using this technique

There's no use applying this technique if you don't have patterns that regularly show up in your article titles. You could of course enter a new string replace line to your code for every thinkable combination of words etc. However, this can very quickly produce unwanted and unexpected results.

Another thing to consider is that the string you want to replace should be unique enough to avoid confusion. If you have a string that is to generic, the title may be broken in a strange place. My string is 'Tutorial:', a string I only use in the beginning of article titles on this site.

If you find some fun use for this technique, let me know by commenting below.