The process of creating themes for WordPress and Joomla differs in many places, but there are many common features too. In this entry, we would like to present the differences between the key elements of templates architecture. It is worth noting that the comparisons are made with regards to “barebones” installations; please remember that most, if not all shortcomings of a given CMS may be reduced or removed entirely with the extensions available for the CMS.
Code
A very crucial difference between the code of WordPress and Joomla is that the WordPress API is based primarily on functional call, while Joomla very often uses object methods. It is worth mentioning how the frameworks are used. Basically, WordPress forces use of the jQuery framework (of course it is possible to use other frameworks, but it would not be the optimal approach). Joomla! 2.5 uses the MooTools framework, whereas Joomla! 3.x uses jQuery as well as Bootstrap to style controls components.
Structure
In WordPress, there are some required files that should be included in the template:
style.css and
index.php. In Joomla’s case, theoretically two files would be sufficient in the template:
templateDetails.xml and
index.php. The
templateDetails.xml file is a more developed counterpart of
style.css, which in addition to template information contains a list of items available and list of configuration options which are automatically generated in the template manager. Hence, if you want to quickly create a template configuration options for Joomla!, it is enough to know XML and the proper syntax to create basic controls. In WordPress, except for the basic options, a little more work is required and it often demands the creation of your own solutions.
Previously, I have mentioned overwriting the default CMS behaviour – in Joomla! we may overwrite the appearance of components’ subpages through HTML files (e.g. to overwrite the article view we must modify the
html/com_content/article/default.php file). Here, we may store all files that overwrite the original files in components, modules and Joomla! itself (although it is limited, as we may only overwrite the modules containers and paging).
Theme configuration
In the case of WordPress, theme configurations can be stored in the options table, or we may use the
Theme Modification API. In Joomla! the template configuration is stored in a separate table:
#__template_styles, which is closely linked with the content of an XML file template. A significant disadvantage of this approach is that the configuration fields cannot be created dynamically in Joomla!. It is noteworthy that in Joomla, we may use many templates on one site – we may assign themes to the menu items. Thanks to this, we can easily create a unique template for the home page and a separate one for the rest of the pages.
Menu
In the WordPress menu a theme element is generated when the appropriate functions are used (
wp_nav_menu). When it comes to Joomla, the menu is usually an additional module which may be assigned to specific pages.
Place for the widgets and modules
In both CMSs we should place code that inserts appropriate side panels or module positions. With WordPress, we define each side panel along with all the parameters in the theme code, usually in the
functions.php file. In Joomla!, certain features of module positions are defined directly in the file that generates the HTML module positions code, it mainly concerns:
- the type of container around the modules,
- the additional parameters that are passed to the proper module position
Sample instruction for the module positions in Joomla!:
In this case, we defined the module position called
sidebar, which does not surround the module with additional containers (
none style) and we pass an additional parameter param with the test value to the function that displays the modules.
The WordPress sidebar is defined by the
register_sidebar function and the banner is generated via the following code:
It is worth noting that the equivalent of the well-known Joomla! style modules container are arguments in
register_sidebar:
before_widget,
after_widget,
before_title and
after_title functions. Although, I must admit that they are not very flexible in this regard and even do not allow for the transfer of additional arguments.
Since we’re on the topic of modules – a very interesting Joomla! solution which has no native counterpart in WordPress are CSS classes module suffixes. Each module allows you to specify the CSS classes that will be added to the container surrounding the defined module. This allows you to apply different CSS styles to modules.
In both CMSs we can easily check whether it is a worthwhile to display the proper widgets / modules block.
In WordPress we have function for this:
is_active_sidebar:
// code to the side panel
However, in Joomla! the
countModules method is used:
countModules('sidebar') : ?> // code to the module positions
For WordPress users, an interesting function is that the
countModules method also allows for more complex tests such as checking whether the sidebar and menu items have at least one module:
$this->countModules('sidebar and menu')
You can also check whether the sidebar and menu items have more than five modules total:
if ($this->countModules('sidebar + menu') > 5) { ...
Conditional Tags
Conditional tags are well known and frequently used by WordPress developers as a way to execute code fragments depending on the subpage. In the case of Joomla! such a solution does not exist, but there was not a great need for doing so because any type of subpage has its own view files; instead of modifying the conditions, we just modify the specific views (usually by overwriting them in the template
html directory).
Embedding scripts and CSS
Both Joomla! and WordPress provide special embedding methods that you should use when embedding scripts and CSS files – with this functionality you may allow various plugins to perform operations with these files (e.g. cache mechanisms)
In Joomla!, before calling the add scripts method, we have to define a variable that will store the object document:
$doc = JFactory::getDocument();
And then, we can use the following methods:
$doc->addScript('path.js'); // equivalent of wp_enqueue_script
$doc->addScriptDeclaration('kod js'); // equivalent of the hooks adding the code to the head
$doc->addStyleSheet('path.css'); // equivalent of wp_enqueue_style
$doc->addStyleDeclaration('kod css'); // equivalent of the hooks adding the code to the head
As you can see there is no method for script and CSS file queuing – it is in my opinion a large Joomla! disadvantage, because sometimes it does not allow the sorting of CSS / JS files according to our needs.
Essential elements of the page
In both CMSs there are elements which are necessary from a template flexibility point of view (the CMS must be able to put the other extensions’ code in the right places). When it comes to Joomla, it is necessary to include the following pieces of code in the template:
// generates head section tags
// generates system alerts for example about the wrong log-in data
// generates the contents of the current component
or with WordPress:
// generate the content of the head
// generate the content of the footer