Basic Theme Development: Part Three


Every theme has an elements directory, similar to the "includes" directory found in other website structures. You typically put in parts of the theme that are the same from page to page into this directory to be included by your various page types. You don't necessarily need the elements directory, you can use layouts to cut up a main area if you like. In order to make new page types, you could just duplicate the default.php page type, but you can save a lot of code and make it more consistent if you put the header and footer code into elements header.php and footer.php.


First let's create header.php and paste in all the html and php from the top of your default page downward that is the same on every page type of your site. (You will also delete this code from default.php). You can name these elements whatever you want, as concrete5 doesn't require a specific naming convention, although certain element names like header and footer are fairly standard and probably good to use. 

Now we create the file footer.php. That will contain everything in the footer of your site that is consistent from site to site. Again, delete that footer code from the default.php. Don't forget to tell concrete5 that it needs to look for these elements when it accesses this page type. You will do that by including the following code snippets from where you deleted the header code and footer code, respectively: 

<?php $this->inc('elements/header.php'); ?>
<?php $this->inc('elements/footer.php'); ?>

This will make it look in the correct locations consistently whether it's a package or a theme by its lonesome. Now our default template looks super simple and manageable! When we make more page types, this will come in particularly handy. 

Now we'll move on to creating Right Sidebar page type template file. First we will copy our freshly pruned default.php page type and rename the copy right_sidebar.php (note - it's important to only use underscores for separation). We can look at our html template and remove what doesn't pertain to the right sidebar layout and copy in the html that does to our main area and our new sidebar area and add it in our new right sidebar template. Let's delete the contents of the sidebar and main area except for the container itself and add new areas inside there, like so: 

<?php $a = new Area('Main');  $a->display($c); ?>
<?php $a = new Area('Sidebar');  $a->display($c); ?>

That will make the area inside of the sidebar and main container html live so that we can add blocks to them.

Before we can see this in action, we will need to add the right sidebar page type to c5. In order to start using the new template, we need to go into page types in the dashboard. We will add a page type, which we can name whatever we want, but the handle needs to be the same as the page type filename without the file extension, so in this case, right_sidebar. Once you've added it, you can apply the page type to a page by going to a page and selecting "design" from the edit menu. You would choose the "Right Sidebar" page type (or whatever you chose to name it). And you would see the changes take effect immediately. You can now add blocks to the right sidebar and main area in that page type.

Try throwing in an autonav block to your newly minted sidebar area. It should work right away. You can definitely see how placing the header and footer code into the elements makes creating new page types much easier. Also, imagineif you weren't using elements and someone edited the header code in one page type but not another. Inconsistencies would start to abound, so this is a great way to keep things the same across all page types.

Now let's move onto making the home page type. Let's copy the default.php and make a copy of it and name it home.php. Let's delete everything except the header and footer includes, and create the home page type in the same fashion that we created the right sidebar page type by copying in the html and hollowing out the relevant containers and putting areas in their place. Now let's go to the home page of the site and give it the home page page type.

Once applied, you'll see the header and footer areas, but nothing in between. So let's fix that. Let's copy some of the html straight from the template into our page type. For instance, we create and editable area where the home page image should go like so:

<div class="fl_left">
<?php $a = new Area('Home Image'); $a->display($c); ?>

Now we can add in images (or anything) to that area through the CMS. Basically we want to find all the sub "containers" and turn them into areas with unique names in this fashion. When you add an image, you can set the footprint to match your dimensions exactly, which is handy for your templates. You can set Max Width and Max Height and "force exact image match", which will make sure if the block is edited, the image that is applied will always have the forced footprint of whatever we set for max width and max height. You can also make the image link to a page on your site or offsite. 

On this particular home page, there are 3 pages linked on the home page, each in their own column. Let's pull in the html from our template for this section. It's useful to keep the html from the template around so you can craft your template to maximize compatibility with preexistent styles. In this case, we are going to hollow out all the
tags and make them editable areas the same way we did with the home image. We'll call them 'Home Column 1', 'Home Column 2', and 'Home Column 3'. This will get us three columns to work with. Let's get some content and images in there. Sometimes, going into edit mode, certain content can make overlap with other areas and make them difficult to edit. We will address that later. So let's repeat the content population process for each of our columns. 

Now we want to add in links to each of our stories. We can add links to pages through the content editor, and add the class particular to these link tags, in this case a paragraph class called "readmore". This will make them appear in the same manner that they do in the theme.

Recent Discussions on this Topic

how to call the controller from theme header

Hi, I am developing web application by using the concrete5, First i try to implement multilingual in single pages, its work sample i attached my screen shots image. pfa. Now i want to this in my theme, how to do this. experts help me. than…

Keep Theme Styles from Interfering with concrete5

Can someone please explain this to me, as I have a few sites that I have built where the theme does interfere with the Concrete5 Interface. ----------------------- From C5 Documentation: Keep Theme Styles from Interfering with concrete5 When c…

Where is the active theme data stored in database?

Hey there! I am trying to figure out how doeas theme switching actually work in C5. I could not even find the actual database entry, which stores the currently active theme. Does anyone know how to find it? I tried searching the database for "theme" and …

Render page without theme

Hi Is it possible render page without theme? I'm building my own package for concrete5 and I want to render basic html-view. So I don't want any theme files there. Is it possible? Now I'm trying in controller.php public function view() { $…

Problem with the nav bar with bootstrap

Hey guys, finishing up my site here. The one issue I'm having is having the navigation load normal. The original code is: Toggle navigation Ambrosia …