concrete5 is a powerful content management system which is not only easy to use, but also powerful when you want to customize the look of a site and extend it with functionality. In this chapter, we'll start by looking at concrete5 from the user side. You'll learn about the basic ideas behind concrete5 as well as its most used tools to manage your site and content as you go.
If you already have a site of your own, you can skip this part. For those without a concrete5 site, you can start by checking out the trial option on the official site: http://www.concrete5.org/about/trial/. On this site, you can get your demo site up and running with just a few clicks. There is no need to download, install, or configure anything. While this is perfectly fine to get acquainted with concrete5, you won't be able to change the files of the system. If you want to get a first impression, go for it, but if you want to play around with the code and layout of your site, make sure you get your own site up and running.
As concrete5 is an open source CMS, you can, of course, run everything on your own server. The most-used platform is definitely LAMP (Linux, Apache, MySQL, and PHP). There are a lot of people who run concrete5 on different platforms such as Microsoft IIS. While it's usually not a problem to get concrete5 running as long as the platform supports PHP and MySQL, LAMP is the only officially-supported platform. If possible, make sure you work with Apache on Linux as it's also the platform where you're most likely to get support in case something doesn't work as expected.
Quick installation guide for those who have worked with PHP web applications before:
You'll need a working LAMP environment.
You need to download the latest stable version from the following page: http://www.concrete5.org/developers/downloads/.
Extract all of the files to a temporary folder on your computer.
Use an FTP client, such as FileZilla, to upload all of these files to your web server. Make sure
index.phpis in the folder from which you want to serve your site (for example,
Open that URL in your browser, you'll be shown a screen where you can enter the administrator's credentials as well as the information needed to connect to the database. Put the correct values in each field and confirm them by clicking on the Install concrete5 button.
Once you have a running concrete5 site, you can log in to your site by clicking on the Sign In to Edit this Site link at the bottom of the page. If you already installed a different theme, you might not find that link, as some people remove it to keep their layout as clean as possible. If that's the case, you can use the following URL, or if that's not working either, the second URL:
Keeping URLs nice and clean
The two preceding links point to the same page but one has an ugly
index.php in it. That's because all requests are redirected through that file. Luckily, it's not difficult to get rid of that. concrete5 can make use of
mod_rewrite that makes it possible to remove parts of the URL.
In the dashboard, enter
pretty in the little search bar at the top of the page and select the Pretty URLs item. On the screen which appears, check the only checkbox and save the changes. This is shown in the following screenshot:
After you're logged in, you'll see an almost identical view of your site, there's just one major change. Now there's a toolbar at the top, allowing you to access the dashboard as well as the editing options related to the current page:
While you edit most of the content of a concrete5 site in the in-site editing mode, there's still a dashboard where you can manage a lot of different things. If you want to create a new user, group, manage your files, or change some permission, this is where you want to go.
The dashboard has two parts, a small part where you can see the most-used functions. Just hover over the Dashboard button and it will show up:
At the bottom, there's a View Full Dashboard link which will show you the entire dashboard. You can also get to the same screen by clicking on the Dashboard button at the top. The entire Dashboard screen is shown in the following screenshot:
If you like to explore things on your own, go on and click around to get familiar with the dashboard. We'll cover some parts of it in this book as we need them, but we aren't going to look at every single option, as this would be a topic for a whole book itself.
Managing dashboard favorites
In each screen of the dashboard, you'll find an icon looking like a star at the top-right corner, seen in the following screenshot. If you click on it, you'll mark that screen as a favorite. All of those screens will be listed in the dashboard menu which appears when you hover over the Dashboard button. This makes it easier to access often-used functions.
If you edit content by selecting the object you'd like to amend in a tree-like structure and see some fields structured like a database application you'll see a different concept. There's an in-site editing mode in concrete5 where you can update almost any content in a layout which looks a lot like the actual site, thus making it easier to actually understand the changes you're making.
You've already seen the toolbar at the top of every page. As you might have expected, the Edit button is what we need. The button has a menu which appears if you just hover over it. You'll see a small panel where you have a few functions to use, as seen below:
Properties: A page has properties, such as a name or a meta description used by search engines as well as custom properties, for example, a background color you want to add to change the color per page. We'll create our own custom attribute later in this book.
Versions: Once you change some content, concrete5 will automatically create a new version. This feature allows you to see all previous versions and even offers you the ability to compare them and go back to an older version.
Delete: You don't need that page anymore? Delete it! You can restore pages that you've accidentally deleted in the site map. Display system pages there and you'll find an item called trash where you'll find the deleted pages.
In other words, almost all content you place on your site is wrapped using a block. When someone wants you to add a picture, you'll need to select a block. If you want to add a guestbook, you need to insert a block.
You can see a list of all installed blocks if you navigate to
http://www.your-site.com/index.php/dashboard/blocks/types/. To get you a quick overview, here's a list of all the default blocks, including a small description of their basic usage:
Content: Probably the most used block, based on the HTML editor TinyMCE, this allows you to add formatted text, including links to other pages as well as embedded pictures. There are plans to replace TinyMCE with Redactor, but TinyMCE will probably be kept in the code to maintain backward compatibility.
Guestbook/Comments: This block provides a traditional guestbook, mostly used in blog posts, to allow your visitors to post comments. Includes e-mail notification as well as an approval functionality if required.
List all pages of a certain type (for example, all news pages to build an overview of the latest updates).
List all pages underneath a page to build a simple sub-navigation.
Search: Inserts a search block with which you can run a full-text search across your site. Please note that you need to run a job to index the content of your site! Type
jobsin the intelligent search box, if you click on the first result, you'll find a screen where you can execute several jobs (the search indexer included).
Getting more blocks from the marketplace
If you look on the screen where you can see all of the installed block types, there's also a button called More Add-ons. When you click on this button, you're asked to connect your site to the
concrete5.org marketplace. This is a step you just need to do once per site. After that, you can access the list of add-ons right from the site and install more blocks if needed.
If you look at the following screenshot, you'll see red rectangles marking a block. There are three blocks, one in the main area and two in the sidebar area. At the bottom, there are Add To Main and Add To Sidebar links. These links are part of the areas that let you add new blocks.
While you might want to look at all of the different options, this part is the one you and your clients need the most. Let's change the heading of the home page! If you're not in edit mode yet, click on the Edit button and the layout will change, as explained in the earlier paragraph.
Another change is shown when you click on an existing block. Each block has a menu where you can see a few options:
Copy to Clipboard: This is like the clipboard you have in your operating system, but it's not connected to it. It basically copies an instance of a block into a holding place which you can later use to insert a new block with the same content on another page.
Move: Each area can have several blocks and sometimes you want to change their order. This menu item changes the interface to a different mode where you can rearrange your blocks. You can also move a block from one area to another.
As we go on, we'll create our own templates for existing blocks to change the appearance, but for now, we'll just look at the basic editing function.
This dialog looks different for pretty much each block type, as most blocks have a different purpose as well. However, almost all of the blocks are easy to understand, and someone who has worked with computers for a while should be able to use them without any instructions.
The Content block you can see in the preceding screenshot is using TinyMCE to give you a word processor-like interface. Compared to the default TinyMCE editor, there's just one change on the top. There are some links such as Add Image which are concrete5-specific. They allow you to embed an image from the concrete5 file manager as well as add a link to another page of your site.
After you've changed the heading or content according to your needs, click on the Save button and you'll see the changes within the page layout. At this point, the changes are visible to you, but as they aren't published yet, website visitors won't see them.
Adding a new block is pretty much the same, you look for the area where you want to add a new block. If you want to add another content block to the sidebar, click on the Add To Sidebar link, as shown on the following screenshot:
You'll see a list of all available blocks. Pick the Content block and you'll see the same block interface again, but this time without any content in it. Enter everything you need and confirm it by clicking on the Add button.
Once you've updated your content, you probably want to publish the changes at some point. You can leave the edited page without publishing it, keeping a draft version of the changes, but let's look at how you can make the changes available to the public. The toolbar at the top changes a bit when you're editing a page. The Edit button changes its text to Editing and a few elements in the menu underneath it change as well to make it possible to publish the changes:
The button that jumps out at your eyes the quickest is the one you'll probably use the most in this situation. The Publish My Edits button will automatically make all of your changes available to the public. If you want to keep track of your changes, you can also replace the default text Version 2 with a comment of your own. It's just a comment which will be listed when looking at previous versions, it doesn't have any functionality connected to it.
The other two buttons that are only visible in the edit mode are:
Discard My Edits: Made a mistake and don't want to save the changes at all? Use this button.
Preview My Edits: This button will save the changes but not approve them. Logged in editors can see and choose to continue editing, but normal users only see the approved version.
If you accidentally published a change you didn't want to release yet, don't worry, there's an easy way back! In the menu shown in the preceding screenshot, click on the Versions link and a new dialog will show up:
There are four buttons available:
1: This is the compare versions button. If you select two or more page versions, this button will become active and shows you every selected version within a tab in a new dialog.
2: This is the approve button. Select a version which isn't approved at the moment (including older versions) , and this button will be active, allowing you to change the publicly-visible page version. Thanks to this button, there's always an easy way back.
3: This is the copy version button. Select one version and this button will make it possible to copy an existing version into a new one.
4: This is the delete button. Select a page version that isn't approved at the moment and this button allows you to delete the selected version.
A site without any pictures or files could look a bit boring, but luckily we have plenty of options to change that. If you navigate to the dashboard, you can see a File Manager link which will forward you to the default file manager screen in concrete5:
If you're used to working with another CMS, you'll probably have worked with a hierarchical folder structure known from most operating systems. In concrete5, things work a bit differently. You don't have folders, but rather sets in which you can place files. You can build a completely flat structure, but try to think about the sets you'll need before you have tons of files.
Unlike folders, a single file can be a part of several sets. This might sound a bit unusual, but once you're used to it, you'll probably realize that this can have advantages.
Let's have a look at how the usual process to upload a new file works. Right at the beginning we have two options. If you want to upload several files, you might want to use the Upload Multiple button where you can select as many files as you want and upload them in one bulk operation.
We'll use the traditional single file upload. Start by clicking on the Choose File button and select the file you want to upload from your local hard drive. After that, you only need to click on the Upload File button and you'll see another dialog where you can update the metadata of your new file:
There are more attributes in the second tab, Other Properties. They all work the same way. Click on the attribute name, update the value, and confirm the change by clicking on the icon.
In the last tab Sets, you have the option to assign your new file to an existing set as well as a new set which you can create there as well. If you upload multiple files at once, you'll see the same dialog. However, if you assign a set after the upload process is finished, you'll assign that set to all of the files. This is especially handy if you upload an entire gallery in one step. Just upload all of the files, assign the set with one action, and pull all of the files from that set into a slideshow.
A stack is basically a collection of blocks you can reuse in multiple places on your site. Let's start by creating a new stack. You'll easily figure out the idea behind it with this little example! You can use the intelligent search bar at the top which you can focus by using the Tab key. Type
Stack and concrete5 will search for all of the choices containing the keyword stack:
Click on the first entry, Stacks. In the next screen, type the name of the new stack, for example,
Contact Data in the Name field. Hit the Add button, click on the newly created stack, and you'll be forwarded to the following screen:
In this screen, you can add new blocks by clicking on the Add Block button. Adding new blocks works the same way as always from this point. Once you've added all of the blocks you want, you'll need to confirm the changes you've made to our stack by clicking on the Approve Changes button, seen here:
Click on the Return to Website link at the top-left corner to navigate back to your home page. Go to the page where you want to insert the Contact Data stack, click on the Add To Sidebar link, and select the Add Stack menu item, as shown in the following screenshot:
Select the Contact Data stack we created before and you'll see a new dialog. In this dialog, you either insert the entire stack with all of the blocks, or just a single block from the stack. This is, of course, only useful if you actually have more than one block in your stack. In our case, select the Add Stack menu item to insert the stack with all blocks.
If you click on the stack again, you'll see a menu which is slightly different from the menu you see when you click on a block. The first item is called Manage Stack Contents instead of edit. If you click on this item, you'll be redirected to the dashboard page where you've previously managed your stack. Here you can add, edit, or remove blocks, and once you approve the changes, the update is visible on all of the pages where this stack has been added.
If you need more detailed instructions, go to the following page and you'll see a video as well as some screenshots:
While most of your pages share the same logo as well as certain design elements, the content is quite likely to have a different structure. One page might have a sidebar, another page might have three columns, and another one might just have one big picture.
In concrete5, there are several ways to arrange your content in different structures. Each tool has certain advantages, and depending on your needs, you should pick the right one. We'll look at all of these tools in this section, making sure that at the end you'll know the right way to build the page structure you want.
A page type is a logical entity which you can use to build lists. Imagine you have a type called
news. If you place a page list block in an area, you can build a list of all pages of that type and you'll have a news list. You can also use them to build something less obvious. In case you have your own car collection, create a page type
car, insert a picture and some text to these pages, and you'll have a nice showcase to present your wealth or collection of toy cars.
It's not a must, but most page types have a theme template as well. You can define a certain HTML structure and use it for a page type. This makes it easy to define the most-used layouts, such as a two-column and three-column layout.
Let's have a look at the pretty much self-explanatory screen where you can select the page types. You can open it by hovering over the Edit button in the concrete5 toolbar and clicking on the Design link:
In the upper part of this screen, you can see all available types. Each type has a thumbnail assigned to it to give you an impression about the actual structure you're going to assign to your page. Select the one you need and confirm it by clicking on the Save button and you'll immediately see the new layout.
Every page type has an actual template, making sure the content is found in one or more containers. However, not every page type has its own template. As just mentioned, sometimes you just need a page type to make a group of certain pages and don't need a different HTML structure, and thus no PHP file.
The name of the page type is slightly different from the name of the matching template. If we take the Full Width page type, you'd need to replace all of the spaces with underscores, convert the text to lowercase, and append
.php. The Full Width page type becomes
If there's no template that matches the page types, concrete5 will simply use
default.php as a fallback. This is also why you should try to keep
default.php as simple as possible and avoid adding too many fancy things.
concrete5 has a feature which allows you to change some of the CSS properties without touching a single file. The design menu you need to see for this feature can be found in different places. There are three different places where this menu can be found:
Clicking on an existing block
Clicking on a stack you've inserted
Clicking on the Add to… link at the end of an area while you're in edit mode
The screen you'll see is always the same, as shown in the following screenshot, but the element and the styles that are applied differ depending on the element where you've opened the design menu.
In this dialog, you can see a number of different properties. All of them are based on basic CSS rules with which you might be familiar. For those who want to go beyond the usual usage, there's a tab called CSS where you can enter your own CSS rules. Click on the Save button once you're done and the layout will change immediately.
Sometimes you might need a column structure different from anything you've seen available in the page types. You could create a new page type, but if it's a structure you just need once, it's probably better to use the layout feature. Let's have a look!
First, you need to navigate to the page where you want to split up the area. Change into the edit mode and click on the Add To… link underneath the area you want to split. Click on the Add Layout button and you'll see a dialog like this:
Specify the number of columns and rows you need as well as the spacing between the cells. You can later change the width of the columns by dragging handles above the area. If you want fixed widths, tick the Lock Widths checkbox. In case you want to use the same layout again, enable the last checkbox and enter a name. You can later select the previously created layouts again. After you've added the layout, you'll see more areas, as shown below:
The Layout 1 : Cell 1 and Layout 1: Cell 2 areas work like any other area, they are just half the size of the original Main area. Drag the handle in the middle to the left-hand side or to the right-hand side to change the column widths. The layout can be edited, removed, reordered, and locked by clicking on the plus icon at the top-left corner.
While the default page structure is okay for a basic site, you'll probably want to have a different site structure. In concrete5, you can manage all of your pages in the in-site editing mode, but it's probably easier for most people if they have a hierarchical structure to look at.
Luckily, concrete5 offers this as well. Hover over the Dashboard button at the top and click on the Full Sitemap link in the little panel underneath the button. You'll be forwarded to a screen where you can see a common tree-like structure of all your pages, as shown in the following screenshot:
In this screen, you have all of the functions you'd expect from a tree-like structure. Each node with child elements can be expanded and collapsed. While this screen looks rather simple, there are a few hidden functions. Click on a node with your left mouse button and you should see a menu such as the one shown in the following screenshot:
What's available here? The available options are explained as follows:
Delete: Tired of that page? Remove it with this function. You can restore pages that you've accidentally deleted in the site map. Display system pages there and you'll find an item called trash where you'll find the deleted pages.
Add External Link: The site structure you build in the sitemap is directly used to build the navigation. This is the reason why you do not only add pages to the tree, but also external links. Want to open http://www.concrete5.org/ from your sites navigation? Add an external link!
Click on the page underneath where you'd like to have a new page. In this example, we want to create a new page showing the location of our office:
In the first step, you need to select the page type you want to use as the new page (as shown below). Your choice doesn't really matter much and you can change it at any time if you are not content with your decision:
The URL Slug field is automatically updated while you're entering the name. The value in this field is shown in the URL of your new page. If you're creating a new page about the services you offer, as shown in the preceding screenshot, the URL will look like this:
URL slug for better search engine visibility
Search engines scan the URL of your pages as well as the content. Having the right keyword in the URL is one of the many indicators for search engines that make your pages relevant for that keyword.
If you're testing cars, you better use a URL slug such as
car-testing-services instead of
If you create a list of pages by using the
Page List block, you'll see a link to the page as well as a description, if available. The description shown in the page list block is pulled from the Description field. Enter a summary of your page if you intend to show it in a list, for example, a news list.
When you create a new page, there's usually not much in it. Depending on the theme, you'll only see the logo and maybe some information in the footer. It is sometimes helpful if there's some default content in a new page. Imagine if your site has a header picture in every page, wouldn't it be nice if there was a default picture for new pages?
Hit the Tab key to focus the intelligent search bar at the top and enter
page types. Select the first item and you'll see a screen similar to the following screenshot:
Click on the Defaults button and you'll see a screen much like the edit mode of a page we worked with before. Everything works like on a normal page, but the blocks you add here will show up when you create a new page of that type. More about this feature can be found at the following location:
In this chapter, we had a quick look at the different features in concrete5 to get familiar with editing content. Take your time with this chapter as it's important that you understand how you can edit content and work with page types before you continue with the next chapter.
If the instructions in this chapter were too short, the official concrete5 site has some more detailed tutorials as well as videos. Check out the following link if you need more information: