How to create a FAQ just with Joomla? #JOC

How to create a FAQ just with Joomla? #JOC

In the year 1319, the Lord of Hornshadow decided that his city needed a website to showcase the city council and all the activities in his city. Let me tell you the amazing story of this website that is not quite like any other.

A new request

In September 1320, the Lord of Hornshadow summoned the city council to validate the add a FAQ to the city's website. Everyone thought it was a great idea because it could help the residents of the city and the visitors.

The city council also wanted that the Frequently Asked Questions section should cover all the questions that the end users may have now but also in the future. For this reason, this section should be easy to manage.

After this meeting, the members of the city council started to collect the questions asked by the people. Few weeks later, they had received many questions (oftenly the same) about the city, the districts and the activities.

Previously in the #JoomlaOverrideChallenge

The Frequently Asked Question section

Basically, a Frequently Asked Questions section is composed with... questions and answers. There are many ways to present this on a website but the best is to keep this section as simple as possible with less clicks as possible for the end user. Who wants to click on a question just to read the answer?

If you want to be SEO compliant, you also should consider adding the Schema markup to your Frequently Asked Questions section.

So, the guideline for the Frequently Asked Questions section were fixed like this:

  • Simple as possible: one or two clicks max to read an answer.
  • Easy to manage for the web-master: adding or deleting questions should be as simple as possible.
  • SEO compliant: this section should include the Schema markup.

All the collected questions were divided into three categories: the questions about the city council, the questions about the districts and the questions relatives to the city activities.

I. The categories

All the FAQ section is powered with the Joomla native component: com_content. First, I've created a parent category Frequently Asked Questions and then, three child categories:

  • The City Council
  • The Districts
  • The activities
Hornshadow FAQ categories

For each child category, I've added a short description and an image.

II. The Questions (and their answers)

You've understood, a question is an article title and its answer is the content of the article.

Simply, add your articles in the right categories and you're done.

Hornshadow FAQ article

III. The FAQ menu item

To display the categories, I've used the menu link List All Categories and I've selected the parent category.
Here are the parameters I've setup:

Hornshadow city categories menu item

Tab categories

Hornshadow city category menu item

Tab category

Hornshadow city page title

Tab page title

IV. The categories menu item

The last step is to create a Category Blog menu item for each category of your FAQ.
Here are the parameters I've setup here:

Hornshadow city categories menu item

Tab Details

Hornshadow city category menu item

Tab Category

Hornshadow menu item tab options

Tab Options

Hornshadow menu item tab links type

Tab Link Type

The FAQ Schema markup

Of course, it's not mandatory but if SEO is an important matter for you, I suggest you to read this part carefuly.

There is a specific markup for Frequently Asked Questions pages created by Schema. All you need to know about this is perfectly described and explained here: https://developers.google.com/search/docs/data-types/faqpage.

Here is the markup you have to apply to your FAQ page and your FAQ articles:

<!-- Markup for the page -->
<html itemscope itemtype="https://schema.org/FAQPage">
	<body>
	
		<!-- Markup for each question -->
		<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
			<h3 itemprop="name">Curabitur in felis in nunc?</h3>
			
			<!-- Markup for each answer -->
			<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
				<div itemprop="text">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis massa felis, feugiat in facilisis quis, eleifend eget sapien. Praesent et molestie orci, consectetur lobortis tortor. Phasellus facilisis, arcu ac tincidunt placerat, ligula nibh vestibulum nibh, eu volutpat libero enim sed lorem. Suspendisse nec ultrices odio.</p>
				</div>
			</div>			
		</div>
	</body>	
</html>

To implement this specific markup into your website, you have to create an override for the following files:

  • /html/com_content/category/blog.php which displays the page with all the articles of a category.

    Replace:

    <div class="blog<?php echo $this->pageclass_sfx; ?>" itemscope itemtype="https://schema.org/Blog">

    by

    <div class="blog<?php echo $this->pageclass_sfx; ?>" itemscope itemtype="https://schema.org/FAQPage">
  • Replace:

    <div class="leading-<?php echo $leadingcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?>" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">

    by

    <div class="leading-<?php echo $leadingcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?>" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
  • /html/com_content/category/blog_item.php

    Replace:

    <?php echo $this->item->introtext; ?>

    by

    <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">	
    <?php echo $this->item->introtext; ?>
    </div>

Now you can apply this override to get the specific Schema markup in your FAQ pages.

Hornshadow Schema FAQpage markup

How your source code looks like now

Let's display our Frequently Asked Questions page

Ok let's have fun and create the override to display the FAQ categories!

I've decided to display the title (the page title) with a tagline text below (the category alternative description) centered (the Page class). Then, the categories of articles with for each of them: the image, the title and the description.

To acheive this, I only need to override /html/com_content/categories/default_items.php with these modifications:

  • Adding the Bootstrap class col-md-4 to generate the 3 columns
  • Moving up the image above the title
  • Adding a link on the image

Here is the final code:

<?php foreach ($this->items[$this->parent->id] as $id => $item) : ?>
<div class="col-md-4">
	<?php
		if ($this->params->get('show_empty_categories_cat') || $item->numitems || count($item->getChildren())) :
		if (!isset($this->items[$this->parent->id][$id + 1]))
		{
			$class = ' class="last"';
		}
	?>
	<div <?php echo $class; ?> >
		<?php $class = ''; ?>
		<?php if ($this->params->get('show_description_image') && $item->getParams()->get('image')) : ?>
		<a href="<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($item->id, $item->language)); ?>"><img src="<?php echo $item->getParams()->get('image'); ?>" alt="<?php echo htmlspecialchars($item->getParams()->get('image_alt'), ENT_COMPAT, 'UTF-8'); ?>" /></a>
		<?php endif; ?>
		<h3 class="page-header item-title">
			<a href="<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($item->id, $item->language)); ?>">
			<?php echo $this->escape($item->title); ?></a>
		</h3>
		<?php if ($this->params->get('show_cat_num_articles_cat') == 1) :?>
		<span class="" title="<?php echo JHtml::_('tooltipText', 'COM_CONTENT_NUM_ITEMS_TIP'); ?>">
			<?php echo JText::_('COM_CONTENT_NUM_ITEMS'); ?>&nbsp;<?php echo $item->numitems; ?>
		</span>
		<?php endif; ?>
		<?php if (count($item->getChildren()) > 0 && $this->maxLevelcat > 1) : ?>
		<a id="category-btn-<?php echo $item->id; ?>" href="#category-<?php echo $item->id; ?>"
		data-toggle="collapse" data-toggle="button" class="btn btn-mini pull-right" aria-label="<?php echo JText::_('JGLOBAL_EXPAND_CATEGORIES'); ?>"><span class="icon-plus" aria-hidden="true"></span></a>
		<?php endif; ?>          
		
		<?php if ($this->params->get('show_subcat_desc_cat') == 1) : ?>
		<?php if ($item->description) : ?>
		<div class="category-desc ++">
			<?php echo JHtml::_('content.prepare', $item->description, '', 'com_content.categories'); ?>
		</div><br />
		<?php endif; ?>
		<?php endif; ?>
		
		<?php if (count($item->getChildren()) > 0 && $this->maxLevelcat > 1) : ?>
		<div class="collapse fade" id="category-<?php echo $item->id; ?>">
			<?php
				$this->items[$item->id] = $item->getChildren();
				$this->parent = $item;
				$this->maxLevelcat--;
				echo $this->loadTemplate('items');
				$this->parent = $item->getParent();
				$this->maxLevelcat++;
			?>
		</div>
		<?php endif; ?>
	</div>
	<?php endif; ?>
</div>
<?php endforeach; ?>

This should gives you this frontend display:

Hornshadow FAQ categories

See this page

Now, when you click on the image or on the title of a category, you open the page where are displayed all the articles of this category.

If needed, you can also customize this view in /html/com_content/article/default.php so each question / answer is more identifiable by the end user.

Don't forget to add a contact solution (form or button) in your FAQ page if your end users have questions not listed in your page.

Hornshadow category FAQ page

See this page

Conclusion

Et voilà!
This Frequently Asked Questions section is pretty simple but efficient. Users can access the answers in one click only and they can navigate to the others FAQ categories if needed. The management of this section is also very easy if you want to add / delete a question in a category.

Feel free to copy, improve and use this FAQ in your Joomla website.

The Joomla Override Challenge

In association with Viviana Menzel, we've created the unofficial Joomla Override Challenge. The goal is to create each month an override based on an extension or on an project. If you want to participate, feel free to contact Viviana or me :)

See Viviana's FAQ: https://www.dr-menzel-it.de/blog/override-challenge-f-a-q

Daniel Dubois

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.