Joomla Article Tutorials | Joomla Templates and Extensions Provider

Joomla Article Tutorials

Detailed guide to create and display Joomla Articles

What is Joomla articles ?

Joomla Article is a piece of content consisting of text, links to other resources, image, media, ect. Articles are the basic units of information in the content system and the bottom level in the content hierarchy.

How to create new article

Access your site back-end, go to: Content → Article Manager and hit the "New" button to create new article.

create joomla article

In the adding new article page, add article title, article content and assign it to a category.

joomla article edit page

To add intro images and full article image for the article, open the tab Images and Links then browse image for intro image and full article image. The image size depends on your site layout, we suggest you to optimize the images to make the page performance better, check out the tutorial to create optimized images

add image for joomla article

The intro image is to display in article listing page, the full article image is to display in article detail page.

You can embed image in any position in article content, use the format below. But please note that, you have to disable the editor so you can add HTML markup to your article.

<img src="/image_url" alt="" />

Back to the article management page, all the created articles will be listed in this page. In the header, you can see list of options to manage articles, select articles and hit the option. To search and filter article, click on the "Search Tool" to open all filtering options.

joomla options

Display Articles in Front-end

To display an article in front-page of your Joomla site, the standard way is link it in the menu of your website. To do this, we will create new menu item. Go to Menus → Main menu → Add New Menu Item.

create new menu item

In the adding new menu item, add title for the menu and select menu type, there are lots of menu type, to show article in front-page, we suggest to select menu type: Articles → Single Article

edit menu item

Next, assign article you created, configure other fields and save the menu item.

edit menu item

Done, open your site front-end to see how the article is displayed.

Joomla article tags

Tags is new feature represented in Joomla 3, Joomla Tags provides a flexible way of organizing content, the same tag can be used for different articles (Tag is applied for other content types: Categories, Weblink, Contacts, Newsfeeds). Once an item is tagged with a specific tag, browsing to the link for that tag will give a list of all items that have been tagged with that tag. Once an item is tagged with a specific tag, browsing to the link for that tag will give a list of all items that have been tagged with that tag.

Manage Joomla tags

You can browse to the Tags manager (link on the Components menu). There you can create detailed tags in a way similar to creating an article. Besides a name, tags can include a description, images, meta data and other items similar to all other Joomla content types. In the Tags Manager you can also choose a parent for a tag to create nested tagging.

manage joomla tags

Create tags for Joomla article

You can add tags for article in the article editing page, just type tag in the "Tags" field.

Display tagged content

Once you have tags and some tagged items you can display them in the front end in several ways.

1. Tags embedded in each item

By default Joomla! will display tags embedded in each item that has been tagged. You can turn this display off by changing the parameters.

2. Create menu link to display list of tags

You can create a menu link that displays a list of tags, with links to the tagged items for each tag.

3. Create menu link to display tagged items for a given tag

You can create a menu link that displays a list of tagged items for a given tag and display either as a list or blog style.

4. Use tags module

You can use one of the tags modules. Popular tags will display a linked list of the tags that have the most tagged items. Similar Tags will display a list of items that have a similar set of tags to the currently displayed item (note that this module does not display on pages that are not showing content items).