Add Editable Area

Let's add our first editable area to the Full Page Template. Checking the Contact Us page template, it’s pretty clear that the main content items (the section tags) come directly after the header tag and before the footer tags:

The <header> and <footer> tags are fully contained within the header.php and footer.php elements. So lets’ add our editable area between them.

Open full.php and find the space between the header and footer elements:

Let’s add an editable area named “Main”.

$a = new Area(‘Main’);  

What’s this code doing? The first line creates a new area object, with the name Main. Since Area is an alias to Concrete\Core\Area\Area, you don’t need to import the class at the top of the template. Next, we use the display() method to display the content of the area. The $c object is already in scope (it stands for “current page.”)

And when we put the page in edit mode, we can now see our area!

Things aren’t perfect, though -- it’s kind of hard to find our area. It’s clearly sitting behind the header for some reason. Let’s figure out why that is, and see if we can modify our theme to play nicer with the core Concrete CMS editing styles.