Theme Development

When developing websites, working with themes is a typical task. It could be the website's front end or the admin area. Let's take a look at how to create a front-end theme.

All themes are created inside the view folder of the development folder. Create a directory in the location below if the theme's name is Rainy Day.

development/view/rainyday

There are a few fundamental folders that must be created in the view folder; let's go over each one individually.

Definition:

Definition is a required folder that stores a theme's core resources. First of all, the info.xml. It contains basic boot files and developer's information.When you open a file from an existing theme, you may find the XML with the nodes listed below.

Tag Name	Purpose
<name>	Name of the theme
<author>	Developers Name
<author_uri>	Website address
<description>	Summary of the theme
<image>	The logo image name is in the same folder
<pagemanager_hooks>	These are the placeholder names for rendering content created in Page Manager from the admin panel or from a component
<settings>	This is a site setting file name that contains a set of configurations that the user can change from theme settings in the admin panel
<components>	List of the components that need to be installed or uninstalled when the theme is activated from the admin panel
<callback>	Call Back is a class name that runs each time the theme loads to work with dynamic resources in the system.

The logo serves as the theme's thumbnail in the theme gallery. The name of the logo should match the info.xml definition.

register.php is the class file defined in info XML. As per Apprain convention, the class name comes with the path of the file. The class contains the basic callback function listed below

before_theme_load($Send=null)
after_theme_load($Send=null)
before_theme_install($Send=null)
after_theme_installed($Send=null)
on_theme_removed($Send=null)

Before the theme loads, we frequently change the layout based on what the page is showing. For an illustration, see the sample below.

if(App::Config()->isPageView()){
  $Send->layout = App::Config()->Setting('site_pageview_layout','right_column_layout');
}

The themesettings.xml file contains any settings that a theme could require from the user. The field that a user must edit in order to change the theme might be specified. The settings can be accessed via the admin panel from Preferences > Theme > Settings.

Layout

Through layout, we define the basic page structure; all are the.phtml files stored in the layout folder, and the system loads default.phtml by default; however, when a different layout is needed, we can set it like $send->layout = 'simple' from the register callback method.

Below are some important points to be noted

$this->callElement("header_info") :
This is to call an element from the elements folder that sets the header of the HTML documents.

$this->fetchAddonlibs();
Load all client-side addons generally based on HTML, Javascript, and CSS

$this->callElement("header"), $this->callElement("footer")
It is advised to keep the header and footer in these two elements that eventually help to edit from the admin panel.

$content_rendered
This variable contains the output of the page view that we have defined in the controller function as per the conventions of MVC. So when we browse different web pages, the content changes and is placed in the layout. more, as you can see in the documentation.

Elements:
Elements are split-view files that can be included into other pages as needed. The method for rendering an element's content is shown below.

$this->callElement([Element Name]) for example echo $this->callElement("quicklinks")

Home, Page
These are two folders created for Home and Page Controller in the development folder as a standard. All the files inside are templates for Action Method.

index.html in the home folder is the default page, as it's defined in Router (boot_router.xml). On the other hand, view.phtml in the pages folder is to display content from the Page Manger in the admin panel.

More pages can be created in the development area or from a component that loads as per the browsed webpage address following the convention of the MVC pattern

UI Hook

UI Hooks are placeholders to render content from external modules like Component, Page Manager, and so on. A theme contains basic UI hooks defined in info.xml by the theme developer. Then the end user can easily place content on a webpage from the Page Manager in the admin panel.

As these hooks cannot be seen without going into code, the end user can go to Preferences > Configuration and set the parameter Show Hook Positions to "Yes" to view the positions in the front end to select where to put the content. See the instance below; more illustrations can be found in the documentation.

App::Hook('UI')->Render([Hook Name]); for example App::Hook('UI')->Render('quick_links_top');

External Resouces

For most of the theme, we need to store CSS, JavaScript, and other theme files and access them from the development area. Generally, we store those files in the themeroot folder in webroot; for example, see below location

webroot/themeroot/rainyday

Note: Generally, we save a default.css file in a CSS folder that we can modify from the admin panel in the theme area.

To retrieve resources from the theme folder that is presently active, use the skinUrl function. See examples below.

echo App::Config()->skinUrl("/css/default.css");
echo App::Config()->skinUrl("/images/banner.jpg");

One more function that will help you is to load resources uploaded by file manager using filemanagerUrl. See below example:

echo App::Config()->fileManagerUrl("/logo.png");

You can read a lot about theme development in the manual.