Anyone can develop a Concrete5 theme because of how easy it is. Concrete5 makes web design and devlopment practical and easy, now you just need to know how to create your design.
To develop any theme for Concrete5, you’ll need a very simple set of files. The “root” folder of your website theme, where all theme files are stored we will refer to in this example as “myTheme”. The folder “myTheme” should be placed within the “themes” folder in your website root:
/themes/myTheme
You will need as many files as you choose to develop custom, but all C5 themes generally use the following files:
/themes/myTheme/default.php
This is the default page type, and when your new theme is installed, the page type will be known simply as “Page”. This is basically an HTML document that contains the basic framework for the body of your theme (or at least, the default page type in your theme). You can create as many page types as you would like, and they will all follow this same model. In default.php, you will not have an opening DOCTYPE declaration, HTML tag, or even BODY tag, as this is all put into a separate file (/themes/myTheme/elements/header.php). Similarly, it will also not have the ending BODY or HTML tag, as this is taken care of with a separate file (/themes/myTheme/elements/footer.php). Now placing an editable region within your page type is so easy it’s unreal. You can place one anywhere you want to within the default.php (or any other page type) by simply placing the following code:
$a = new Area('Main');
$a->display($c);
?>
The “Main” is the name of the content area. You can change it as needed. Wherever your primary (or widest) content region is, you should also include this piece of code after:
print $innerContent;
?>
This prints out some of the included data for a page view that other Concrete5 scripts require. Then, be sure to include the header.php and footer.php scripts into the default.php page by placing this code at the very top:
defined('C5_EXECUTE') or die(_("Access Denied."));
$this->inc('elements/header.php');
?>
And by inserting this code at the very bottom:
$this->inc('elements/footer.php');
?>
Now that you have created the default page type, you can easily duplicate this file, modifying what you may need to, and save it as a separate page type.
/themes/myTheme/elements/header.php
In this file you’ll want to insert your DOCTYPE declaration, along with the HTML, HEAD, and BODY tags, and any other piece of HTML, CSS, PHP, JavaScript, or other script that you would like included in every page type. You’ll also need to reference the main.css file, here is a sample header.php script:
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
" />
Loader::element('header_required');
?>
/themes/myTheme/elements/footer.php
In this file you’ll want to put the ending of each page, namely the closing BODY and HTML tags. Here is a sample footer.php script:
defined('C5_EXECUTE') or die(_("Access Denied."));
require(DIR_FILES_ELEMENTS_CORE . '/footer_required.php');
?>
/themes/myTheme/main.css
This is the main stylesheet for your theme. Nothing too complicated here.
/themes/myTheme/view.php
The way that the MVC works in Concrete5, sometimes different blocks or packages require a theme default view.php. Until you have a better understanding of how it works, it’s best just to duplicate your default.php file as a view.php
/themes/myTheme/thumbnail.png
This should be a thumbnail image of your theme. It needs to be 120px wide by 90px high. It is used in the theme selector page in the Concrete5 Dashboard to show you which theme is which.
/themes/myTheme/description.txt
This should be a two-line description of the theme, usually including the name and the developer of the theme, but you can essentially put whatever you would like here. It too is used in the theme selector page.
And finally, in any PHP file associated with your theme, it should always begin with:
