Turn HTML into a CMS site with concrete5

This article first appeared in issue 233 of .net magazine – the world's best-selling magazine for web designers and developers.

Most designers, developers and clients tend to lean towards the well known content management systems (CMSes) such as WordPress or Joomla, rather than choosing a platform that is alien to them.

How is concrete5 different?

With concrete5, a key difference is that you can edit content on the page you’re viewing within your browser. This functionality alone is a valuable selling point, especially for your less internet-savvy clients. Your clients will enjoy editing and adding content to their site, and happy clients make for a profitable business.

But this ease of use does not compromise on functionality. While the native framework is incredibly powerful, it is also highly extensible. The following tutorial shows you how you can turn your HTML code into a fully fledged CMS concrete5 website in next to no time.

Getting started

For this tutorial we will assume you have already built your website’s frontend pages in HTML and have all the CSS, content and images ready to go. The more you use concrete5 the more savvy you will become in setting up all the CSS in advance for the various functionality it and its add-ons offer. You now need to set up an account and download the latest version of concrete5. We recommend registering an account with concrete5, enabling you to manage your sites through your own project area. Upload all your files to your server, or (L)AMP stack, and set up a clean database. To find out the system requirements for concrete5, check here.

Step 1: Install concrete5

Open your browser and enter the URL the site files currently sit on. You will be presented with an install screen that will display any errors or configuration still required. If you have green ticks across the board, click the Continue to Installation button. On the next screen, enter your database information and create a username and password. If you wish, you can install the sample content that comes with concrete5. Otherwise select empty site. Install concrete5. Once installed, hover over the Dashboard button on the top edit bar and select Extend concrete5. Connect the site to the account you registered.

Step 2: Setting up your theme structure

concrete5 works by using themes and page types (page templates). Create a folder within the top-level themes folder and give it a name relevant to your website. In this case we will call the folder clarity_law.

Within this folder, create the following files and folders: description.txt, a folder called elements (inside this create the files header.php and footer.php), home.php, default.php, a folder called images, right_sidebar.php (this is essentially your main sub page template), screen.css (your main CSS file), thumbnail.png, typography.css (place all your font styles into this so that concrete5’s editor can pick them up), and finally a view.php file. Our design also uses a custom font, in this case Museo. Place a folder called fonts into the themes directory and create a separate CSS file for your fonts.

Step 3: Setting up the files

First edit description.txt. This is used to display the template name within the admin area. We normally place the client’s name on the first line and a ‘website produced by…’ on the second line. Save the file. Next create/open the thumbnail.png file in the image editor of your choice and create a graphic for your theme. This should be set at 120x90px. Save your file. Copy all your website images into the images folder, and all fonts, if any, into the fonts folder.

Open your screen.css file and copy and paste all your CSS, apart from the font styles (h1, h2, p tags and so on) into this file. Save. Open your typography.css file and copy and paste all your font styles into this file. Save. If you have custom fonts, open/create a file called fontface.css and enter the main @fontface styles CSS and link them to your fonts folder. If you don’t use @font-face then please read the documentation for your chosen system.

Open the two files within the elements folder, header.php and footer.php. Within header.php enter the following code:

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="robots" content="index, follow" /><link rel="stylesheet" media="screen" type="text/css" href="<?php echo$this->getThemePath()?>/fontface.css" /><link rel="stylesheet" media="screen" type="text/css" href="<?php echo$this->getThemePath()?>/screen.css" /><link rel="stylesheet" media="screen" type="text/css" href="<?php echo$this->getThemePath()?>/typography.css" /><?php Loader::element('header_required'); ?></head>

To allow your CSS to link properly to your site’s theme folder, you must have <?php echo $this->getThemePath()?>/ before the name of your CSS file. You can also change the DOCTYPE if you require and add other meta information. Do not add in a meta title, description or keywords, however, as you do this using concrete5’s page properties section once logged into your site’s admin area. Save this file down. We will come back to the footer.php file.

Step 4: Setting up the main HTML

Now take your HTML and make it concrete5-ready. For this you will need to know three types of PHP tags to make areas of your site editable. These are:

<?php $this->inc('elements/your-file.php'); ?>

This is used to include the header and footer files.

<?php $a = new GlobalArea('Editable Area Name'); $a->display($c); ?>

This is used for global areas on the site. For example, the company’s logo will appear across every page. Using the GlobalArea tag will enable you to enter content once, and it will populate across the whole site.

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

This is used for editable areas that aren’t global.

Open your homepage HTML in your editor of choice. In this case we are using Dreamweaver. Open home.php and paste in the code from your homepage file. Delete all the <head></head> code and replace with:

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

Replace all content that would be deemed global with <?php $a = new GlobalArea('Editable Area Name'); $a->display($c); ?>. Replace Editable Area Name with the name of the content you are replacing. For the Clarity Law design we’re making the logo, social icons, phone number, main navigation, tagline, call to action button, Twitter header, Twitter feed, contact form, contact details and five footer columns into global areas. For other non-global aspects you want editable, replace your content with <?php $a = new Area('Editable Area Name'); $a->display($c); ?>. Again, replace Editable Area Name with the name of the content. We’ve used Intro Text, Slideshow, and Main. (concrete5 recognises Main as the main content area: we advise using this). Save your file.

Open footer.php located in the elements folder. Within home.php, highlight and cut all the footer code, but keep the end </body> and </html> tags. Paste this into your footer.php file. Next we’ll place in code that will display the sign in a button users can use to sign in and edit the site. Within the footer, above one of the editable areas, enter this code:

<?php $a = new GlobalArea('Tagline'); $a->display($c); ?><p>&copy; <?php echo date('Y')?> <a href="<?php echo DIR_REL?>/"><?php echo SITE?></a> &nbsp;&nbsp; <?php $u = new User(); if ($u->isRegistered()) { ?> <?php if (Config::get("ENABLE_USER_PROFILES")) { $userName = '<a href="' . $this->url('/profile') . '">' . $u->getUserName() . '</a>'; } else { $userName = $u->getUserName(); } ?> <span class="sign-in"><?php echo t('Currently logged in as <b>%s</b>.', $userName)?> <a href="<?php echo $this->url('/login', 'logout')?>"><?php echo t('Sign Out')?></a></span> <?php } else { ?> <span class="sign-in"><a href="<?php echo $this->url('/ login')?>"><?php echo t('Sign In to Edit this Site')?></a></span> <?php } ?></p>

Finally, enter the following line of code at the end of the footer.php file:

<?php Loader::element('footer_required'); ?>

Save your footer.php and close. Back in home.php, enter:

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

This will include your footer.php file. Save. Either duplicate home.php or copy the code and paste into default.php. Save. For your sub pages, you may have a different layout to your homepage, so follow the same process as in step 5. For Clarity Law, we are using one template across the whole site, so you can either duplicate home.php and rename right_sidebar.php or copy and paste the code into this file. Save. Finally, open view.php. This file is used for pages that are automatically generated by concrete5 that do not require a separate custom template. This can be used for the login page and page not found, for example. Paste your home.php code into the view.php. Either above or below the <?php $a = new Area('Main'); $a->display($c); ?> PHP tag, enter the following code:

<?php print $innerContent; ?>

Save your file. Upload your theme directory to your server.

Step 5: Activate your theme

Visit the homepage of your install of concrete5 and roll over the Dashboard button, located in the top bar of the browser window. Click on the Themes link. You will be presented with the themes selection window. Click the Install button next to your newly created theme. The next window shows the files that will be installed. Click OK. Now you need to activate it. Click the Back to themes button, then click the Activate button next to your theme. It will ask if you wish to activate the theme across the whole site. Click OK. That’s it. You have now turned your HTML into a content managed website!

Step 6 Adding content

Now you can add content to your site. First I would start uploading your site’s images (such as company logo and slideshow images), into concrete5. Roll over the Dashboard button and select file manager. Click upload multiple and then add files in the pop up window. Navigate to the image folder and select claritylaw-scotland.jpg and temp-image01-05.jpeg. Start upload. Once uploaded, go back to the main file manager window and you will see a list of all the images. Click the checkbox next to all the temp-image files, and within the drop-down, select Sets. Click Add new set and name this slideshow. Click update.

Hover over dashboard and select Stacks. Stacks let you reuse blocks in multiple places on your site. Because we have assigned Global Areas to our HTML code, you should see a list of Global Stacks already in place. Click on the Logo stack and then Add block. We wish to add content, so select the Content Block. This will display a TinyMCE editor. Click Add image and select the logo we uploaded earlier. Click Add. Back in the stack list, click the Tagline Stack, and again click Add block and select content block. Add your text into the editor. You can select your font styles if you wish, but here we’ll keep it as a paragraph tag. Click Add. Go ahead and add in the rest of your content, using the content block, apart from the Contact Form, Twitter Feed and Header Nav stacks.

Once all the global content is in place, select Header Nav from your stacks list. We want to add the Auto Nav block. From here you have a range of options on how you wish your navigation to display. If your site has a drop-down menu, you can set how many levels of child pages you wish to show. We will use the standard settings, so click Add. Next, click the Twitter Feed stack. Depending on how you implement your Twitter feeds, you can select the HTML block and add in the feed code generated by Twitter.

Here we’re using one of concrete5’s free add-ons, Tweetcrete. You can install add-ons from the concrete5 dashboard, or via your account. In your stack list, click on the Twitter Feed stack and add the Tweetcrete block. Follow the instructions to authorise with your Twitter account and click Add. Next click on the Contact Form stack. Select the Form block. Add in the fields you desire: here we’re using Name, Email, Phone, Services and Message. Within the options tab, add the email you wish the form to submit to and any Captcha filters you want from concrete5’s add-on section. Click Add.

Click the Return to website button in the top edit bar. You will see your homepage starting to take shape. The last thing is to add a slideshow. Hover over the Edit button and select Edit page. Once in this mode you will see all the areas that are editable on this page, highlighted with a dotted line.

You can edit any of the blocks directly on the page. Editing Global Areas will re-direct you to that particular stack. Click the Slideshow area and select Add block and then select the Slideshow block. Under the Type drop-down, select Pictures from file set. Choose the set we created earlier, called Slideshow. Click Add. Now hover over the Edit button and select Publish page. The images will automatically be pulled in.

That’s it. You now have a completed homepage with content in place. Because we set up the Global Areas, every time you add a new page to the site, all the repeating content will be automatically placed on the page, leaving you only to add content specific to that page.

Discover 35 inspiring examples of CSS at our sister site, Creative Bloq.