Themes vs Templates and the structure of a front-end project

There are a lot of terms in web development and design. Sometimes, I get asked about the difference between an add-on or extension, a theme or a style, and many other similar terms. First and foremost, people tend to use terms like style and template interchangeably and it is entirely fine to do so, as long as whoever you are speaking with is on the same page.

There are some subtle differences worth noting that are probably more in the etymology than anything, but otherwise complete synonyms. Which term you use will depend on some subtleties and what software you might be using, as different software call their front-end systems by different names. At Audentio, we've come up with our own objectively defined abstraction that use these terms in subtly different ways.

Organizational structure of a project

So let's start off this discussion with the term "themes," a phrase we used in our brand ThemeHouse. The reason we went with theme over style, is that to me a theme is a more versatile term. According to the Oxford American College Dictionary (through Google), "theme" is defined by:

the subject of a talk, a piece of writing, a person's thoughts, or an exhibition; a topic.

So after years of creating front-end projects, I abstracted a little bit here and came up with a clear way to think about any front-end project:

1. Core or Framework - First, there is the Core or Framework. This is where all the everyday necessities go for your project. You can use different frameworks for different projects depending on your style of work or the needs of the project. Some front-end frameworks include options such as Boostrap, UIKit, Foundation, Material React, and thousands upon thousands of other choices.
2. Template or Base - Next, we refer to a template as more of the base of your front-end view. This will use the core and extend it so that it is more in line with your specific project. For example, if I was running a coffee delivery network, I might use boostrap, but then build some specific trackers and map components unique to my project. Template we use as more of a term for extending a framework or core. Some people will use template to refer to just the markup of a page or some predefined components. So we use it pretty much the same as that with a bit more specificity.
3. Theme or Style - The theme layer, which we think is synonymous with style, is the layer that is most concerned with user interface, user experience, design, branding, marketing, and the like. Anything that is 100% specific to the brand, voice, or motives of a product should be placed in the theme layer. For example, if you build a theme framework product such as UI.X or Divi, the themes would be the derivative works that have specific goals and use cases.
4. Child theme or child style - There is a fourth layer that is specific to each instance. This is just referred to as a Child theme. This is used if you are using a third-party theme and need to tweak the HTML/CSS or other files, images, and the like. It is always a good idea, and NECESSARY when working with third-party products, to create a child theme. It helps you to separate code for upgrades and other tasks that are best not intermingled with other people's work. In general, a good idea is to never edit other people's code. Rather override it with your own code in its own file.

As I mentioned, a lot of terms might mean different things to different people. At the end of the day, if you are asking for a XenForo style; yes, its the same as a XenForo theme or template. This just gives some insight into how we organize and use such terms internally. XenForo's official term is style, Wordpress and Shopify use theme, Joomla uses templates. But they all mean the same thing. It is the same thing as add-on vs extension vs plugin, but those are far more synonymous and not worth getting into.

In summary, most people will use all these terms interchangeably, so if you need to refer to something specific just know that some people may not fully understand what you want unless you elaborate a bit more.