This is the first in a series of blog posts containing WordPress concepts for Joomla developers. The idea is to explain WordPress concepts from the perspective of a Joomla developer to help you get a better understanding of how WordPress and Joomla are similar and how they are different.

This first post deals with WordPress themes. The purpose of this post is to compare and contrast WordPress themes with Joomla templates. The purpose is not to do a deep dive into WordPress theming. There are plenty of tutorials on the web to help you take the next steps toward becoming a WordPress theme developer.

If you are an experienced Joomla template developer, you should have no trouble grasping the concepts of WordPress theme development. Many things about WordPress theming are very similar to Joomla template development, but there are differences in how they work. Let's start by looking at the file structure.

File Structure

Joomla templates are located in the /templates folder of your Joomla installation in a folder that has the same name as the template. Each Joomla template only requires 2 files to work: index.php and templateDetails.xml. The index.php file contains the code needed to render the template, and the templateDetails.xml file is the template manifest file that contains information about the template for Joomla.

WordPress themes are located in /wp-content/themes within your WordPress installation in a folder that has the same name as the theme. Like Joomla templates, WordPress themes only require 2 files to work: index.php and style.css. The index.php file contains the code necessary to render the theme, and the style.css serves 2 purposes. It is the theme's primary stylesheet, and it also serves the same function as Joomla's templateDetails.xml file. It contains information about the theme in a content block in the header of the file. Here is a sample of what the header block would look like:

/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with immersive featured images and subtle animations. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

You can get more information about the theme's style.css file here.

Thumbnail/Screenshot

Another similarity between Joomla templates and WordPress themes is that they can each have a thumbnail or screenshot of what the template or theme would look like. In Joomla, this file is a PNG file called template_thumbnail.png, and in WordPress this file is a PNG file called screenshot.png. Joomla and WordPress know to look for these files, and if they exist, they get displayed in the admin area for managing templates or themes.

Functions

WordPress themes usually contain a file called functions.php that contains functions to help render certain parts of the theme. It can (and sometimes does) also contain code to do things that plugins should do, which has always been one of my biggest complaints about WordPress themes. I have to say, though, in recent years many theme developers have done a better job of separating theme logic from data logic, which is a much better approach to theme development.

Two purposes of the theme's functions file are to register the theme's sidebars and to register the theme's menu positions. Sidebars are areas within the theme where widgets are rendered. Sidebars are like Joomla module positions, and widgets are like modules, though there are some difference which I will cover in another blog post. Menu positions are areas in the theme where menus are rendered. This is also similar to a module position, but the big difference is that registered menu positions are directly tied to WordPress's menu manager.

Code

One of the biggest differences between Joomla templates and WordPress themes is how they are coded. WordPress themes use PHP tags and functions to load the header, render sidebars, render the main content area (or "The Loop," which we'll cover in a later post), and render the footer.

Joomla templates also use PHP, but Joomla has its own markup language where it renders things like the header, the component, and module positions with <jdoc:include... /> tags. WordPress doesn't work that way, so you will have to become familiar with WordPress template tags, or PHP snippets used to render parts of the theme.

Child Themes

One thing WordPress does that Joomla doesn't do is child themes. A child theme is a theme that leverages an existing parent theme without having to modify the parent theme directly. You would install both the parent theme and the child theme on your server, but you only need to activate the child theme.

WordPress knows that the child theme is intended to be used with a parent theme because you indicate the parent them in the style.css header. You simply add the following line to the header: Template: parent_theme_name. Replace "parent_theme_name" with the name of the parent theme. You may only want to use your child theme to add custom CSS to the parent theme. You can do that by injecting your CSS into the parent theme's header using a function in the child theme's functions.php file. You can also use the child theme to override PHP templates in the parent theme, giving you full control over the rendered output while still leveraging the parent theme's code and styles.

Installation

In Joomla, you have to explicitly install a template before Joomla lets you use it. In WordPress, just putting the theme in the /wp-content/themes folder tells WordPress that it is there. You then need to activate it in order to use it on your site.

Only One Theme at a Time

Joomla lets you install and use as many templates as you want by assigning different templates to different pages on your site. This is a great feature that really sets Joomla apart from WordPress because it lets you have completely different designs for different parts of your site. WordPress, on the other hand, only allows you to have 1 active theme at a time. There are pros and cons to bother approaches, and clearly the WordPress team has a reason for only allowing 1 theme to be used on your site. Just be aware that this is a limitation in case you need that particular functionality.

Conclusion and What's Next?

I really just scratched the surface here of what's possible with WordPress themes. As someone who learned how to build Joomla template before learning how to build WordPress themes, these were some of the things that didn't make sense to me when I first started building WordPress themes. Hopefully this explanation helps you get past some of the initial confusion as you start developing WordPress themes. For more information on WordPress themes, check out the WordPress Theme Developer Handbook.

The next post will cover sidebars and widgets and compare and contrast them with module positions and modules in Joomla.