Like most content management systems, PyroCMS uses front-end themes. Though PyroCMS themes are built a bit differently than what you might be used to from other systems, they’re still quite easy to create. They’re so easy, in...
Like most content management systems, PyroCMS uses front-end themes. Though PyroCMS themes are built a bit differently than what you might be used to from other systems, they’re still quite easy to create. They’re so easy, in fact, that very little PHP experience is required to assemble them!The Folder StructurePyroCMS themes consist of HTML, images, CSS, and JavaScript, arranged into the following supported folders: css img js views views/layouts views/partials views/modulesWhile these folders will no doubt look familiar to you, the "views" folder makes the most sense within the context of MVC. When building a theme for PyroCMS, you are really building the views (including assets) of a MVC patterned application. These views consist of a master layout file and multiple partial files (i.e. a header.html or footer.html) that shares presentation logic between different layouts. We’ll discuss this more shortly.Getting StartedTo get started building your first PyroCMS theme, create the supported folder structure in one of the two places that themes may reside within an instance of PyroCMS:addons/shared_addons/themes (for themes available to all sites)
Or:
addons/[site-name]/themes (for themes available to only one specific site)
Once you have the base theme folder containing the supported folder structure created, the first file that you'll want to add to your theme is theme.php.addons/shared_addons/themes/[my-theme-name]/theme.php
This theme.php file contains all essential details for your theme, including its name, author, version, etc. In a way, this file is similar to the comment block found at the top of a WordPress theme's style.css file. Here’s a basic example of a theme.php file for your PyroCMS theme:Please take note that this file extends a PyroCMS class, called Theme. Also, because you are declaring a PHP class in this file, you'll need to make sure that the name of the folder containing your theme is used in the class declaration. So, if the folder housing your theme is called, "foo," the class created in your theme.php should be named, Theme_Foo (instead of Theme_Custom, as shown in the example within PyroCMS' documentation).Once you have created your theme.php file, you can login to your PyroCMS control panel and view your theme listed in the Themes module. LayoutsAll layouts files for a PyroCMS theme exist in one of two locations:addons/[site-ref]/themes/[my-theme-name]/views/layouts/
Or:
addons/shared_addons/themes/[my-theme-name]/views/layouts/
Every theme should have a layout file, named "default.html" in one of the locations listed above. Additional layout files are optional; I'll show you how to add more layout files in a moment. First, it’s important to review the contents of a layout file.Layout files in PyroCMS are built using HTML and a tag parser, referred to as the Lex Tag Parser. This is what a very basic PyroCMS layout file looks like:
{{ template:title }}
{{ template:metadata }}
{{ template:title }}
{{ template:body }}
The special tags you see in this bit of HTML are Lex parser tags. If you've ever used Smarty templates in PHP, these may look somewhat familiar. The primary benefit to using Lex parser tags in your layout files is that you don't have to put PHP directly in your views (remember, we're using MVC), which gives you the best chance of creating PyroCMS themes that follow the don’t repeat yourself pattern.The example that I've given above is simple, of course, but Lex parser tags are quite powerful. They can loop through data, work with attributes, and more. Learn more about the Lex Parser in the PyroCMS documentation.A more complex PyroCMS layout file looks like this:
{{ template:title }}
{{ template:metadata }}
{{ theme:favicon file="favicon.png" }}
{{ theme:css file="style.css" }}
{{ theme:js file="site.js" }}
{{ theme:im
