Enabling the concrete5 editing toolbar in your theme is usually just as simple as replacing some lines of HTML in your header and footer with some dynamic PHP calls. These lines of PHP include the core JavaScripts and CSS files necessary to support the concrete5 toolbar. Additionally, they replace the site’s <title> and various favicon tags in order to make those <meta> tags editable through the CMS.
Let’s start in header.php. Replace this
With this:
What did we do here? We removed the <meta charset> tag, the <title> tag, and the favicon <link> tag. We left all the theme’s custom stylesheets. We replaced what we removed with
This call is different than the $view->inc() methods we’ve used so far. That’s because View::element() includes files found in a root elements folder, not the one we’ve made in our theme. This call is including the concrete/elements/header_required.php file found in the core. If we reload the page things look the same, but if you check the HTML source you’ll notice now that our title is powered out of the CMS.
Since concrete5 adds JavaScript to the footer of the page, we’re going to have to something similar in our footer.php file as well. Open footer.php and add
<?php View::element(‘footer_required’); ?>
To footer.php just before the closing </body> tag.
Next, we need to wrap the page content in our page wrapper CSS class. In order to bolt on concrete5 user interface elements, concrete5 needs to know where your page’s markup begins and ends (so it can display it in slideout panels, for example.) This is done by adding a DIV with a special wrapper class call immediately after the start of the body tag, and closing it before the JavaScripts in the footer.
Open header.php and add this line where the <body> tag opens:
<div class="<?=$c->getPageWrapperClass()?>">
Here’s what it looks like in header.php:
Now, we’ll need to close the tag in the footer.
Reloading the page doesn’t show much change, which is fine. If we check the HTML, however, we can see a DIV with this class wrapping the page content:
This is good -- now we’ll be able to target elements within our page content using the .ccm-page class, and core concrete5 user interface elements will work properly.
Finally, let’s see if we can now view our toolbar properly. Login to the site by going to http://dreamrs/login (or wherever you have your site hosted). You’ll see the standard concrete5 sign in page:
Once you see the concrete5 dashboard, click the arrow in the toolbar to return to your site. Once back, you should see this:
Success! We have the concrete5 editing toolbar present on our page, floating above the basic content. Usually, this is where we add editbale areas to our page templates, but before we do that, let’s look into why the toolbar isn’t rendering properly.
This isn’t what the toolbar is supposed to look like. It should look like this:
Our icons are off, and one of them is missing. Let’s fix that.