I got a tweet from someone asking how I did it, and I said that maybe I would turn it into a product to sell, but I would feel guilty if I did that. It's so easy to do, I would feel like a real jerk to charge for this. I present to you, for free, how to put the Joomla Article Index into a module position.
How easy is it to put the Joomla article index into a module position? It's easier than you think. With one of my free plugins, it's even easier - or you can use a more efficient (but more difficult) method.
- You need to download my HeadTag plugin - don't worry, it's one of my free extensions. (Or #2)
- Enable and configure the plugin, setting "Process Content Tags" to "Yes"
- (If not #1) You could add this javascript to your template. This is template specific configuration, so no guidance. Sorry.
- Create a new "Custom" module.
- Assign it to whatever module position you want the article index to appear
- Set "Show Title" to "No"
- Assign it to appear on all pages
- In the "Options" tab, set "Prepare Content" to "Yes"
- In the "Advanced" tab, set the "Module Style" to "HTML5" (this is optional, you will probably want to try others depending on your template)
- Use the "Toggle Editor" button to view the module content source code, and add the following code:
<div id="mod_article_index">
{headtag:scriptdeclaration}
(function(){
document.addEventListener('DOMContentLoaded',function(){
var ai = document.getElementsByClassName('article-index');
var target = document.getElementById('mod_article_index');
target.appendChild(ai[0]);
});
})();
{/headtag}
</div>
And if you want to see a walkthrough - I made a YouTube walkthrough. This is for Joomla 3. I may create a walkthrough to achieve this in Joomla 4/5 - but I'm not certain putting the Joomla article index into a module position is still a desirable goal.
I hope this helps you achieve the same on your website!
Update 12-11-2018: Replaced jQuery code with pure Javascript.