How to Set the Joomla Article Title to h1 for Joomlashack Templates

Picture of Joomla logo with the letter H next to it

One of our customers asked us how to wrap the title of a Joomla article in h1 tags. By default, the tag used for Joomla article titles is h2.

In this blog post, I'll show you how to change the tags used for your article titles, thanks to template overrides.

Why Do I Need to Change My Joomla Article Heading Tag to h1?

At the time of this writing, by default, all of your Joomla articles' headings will have the h2 tag. This is not the best SEO for your pages with articles.

Your article heading is the most important part of your site content. It is more important than your site name or logo.

If you would like to rank your articles well in Google, assign your Joomla article heading to the h1 tag.

How can I do it for my Joomlashack template?

You don't have to install any extensions to achieve this goal.

You will use Joomla template overrides technique with a small twist to do the job.

Your change will remain intact next time you update your Joomla or your Joomlashack template.

Let's get started.

For the purpose of this tutorial, I installed the Elan template on a Joomla site with the Learn Joomla English (GB) Sample Data:

01 beginner article heading frontend

If you look at the "Beginners" heading source code, you will see that it is surrounded by the h2 tag. Our goal is to replace it with the h1 tag.

h2 tag surrounding beginners heading

Step #1. Create the /overrides Folder

  • In your Joomla root folder, go to the /templates/js_elan/ folder

js_elan folder inside the templates folder

  • Inside the /js_elan/ folder, create the /overrides/ folder:

Create the overrides folder

Excellent! You just created a container for your future JS Elan template overrides. Next, you will copy the overrides content in it.

Step #2. Copy the /joomla_3.0/ Folder to the /overrides Folder

  • In your /templates/js_elan/ folder, locate the /wright/html/joomla_3.0/ folder:

Find the joomla_3.0 folder

  • Copy the /joomla_3.0/ folder to the /overrides/ folder:

The joomla_3.0 folder inside the overrides folder

Good job! You now are equipped to create your JS Elan template overrides.

From now on, you can change layouts of your Joomla pages without touching Joomla core files.

In this case, we will not change layout per se. You will just get into your Joomla article layout code and replace h2 to h1. 

Step #3. Replace the h2 to h1 

  • In your Joomla backend, go to Extensions > Templates > Templates:

Go to extensions templates templates

  • You will see the Templates: Templates (Site) screen. Click Js_elan Details and Files:

Click js_elan details and files

On the next page Templates: Customise (Js_elan):

  1. Click overrides
  2. Click joomla_3.0
  3. Click com_content
  4. Click article
  5. Click default.php

Click override click joomla_3.0 click com_content click article click default.php

  • You will see the /overrides/joomla_3.0/com_content/article/default.php file open for editing. Around line 64, find the following code:

<div class="page-header"> <h1> <?php echo $this->escape($this->params->get('page_heading')); ?> </h1></div>

Change h1 to h2

  • Replace the h1 with h2.

Ths change ensures that your article page will have only one h1 tag, as it should for the best SEO practice.

  • Next, slightly down the page, around line 93, find the following code:

<h2> <?php if ($params->get('show_title')) : ?> <?php if ($params->get('link_titles') && !empty($this->item->readmore_link)) : ?> <a href="/<?php echo $this->item->readmore_link; ?>"> <?php echo $this->escape($this->item->title); ?></a> <?php else : ?> <?php echo $this->escape($this->item->title); ?> <?php endif; ?> <?php endif; ?> </h2>

Change h2 to h1

  • Replace the h2 to h1

There you have it. Now go to your site and check the change. You will see that your article title now has an h1 tag.

Title with the h1 tag now

What's Next?

Join our Joomlashack Everything Club now. Become a member and find everything you need to build great Joomla websites:

  • 22 powerful extensions
  • 20 beautiful templates
  • 500+ easy to follow training videos
  • 2 best-selling Joomla books.

About the author

Born from a Ukrainian mother and Russian father, Alex lives in the United Kingdom. Alex is a self-taught Microsoft Certified Professional. He enjoys learning Joomla and helping web site administrators make the most of it.