Book Image

Creating Concrete5 Themes

Book Image

Creating Concrete5 Themes

Overview of this book

Creating a concrete5 theme isn't complicated if there’s already a HTML document. There are only very few PHP functions you’ll have to add, but those are powerful and give you a lot of freedom. As you’ll learn to create mobile ready themes, you’ll start to see that there’s almost no limit in what you can do."Creating Concrete5 Themes" is a practical, hands-on guide that provides you with a number of examples that will teach you how to create powerful concrete5 themes, change the look of content block elements, and even make your site ready for mobile devices."Creating Concrete5 Themes" starts with a few words about the editing concept and architecture of concrete5 and then continues with the creation of a basic theme which gets extended with more and more elements until the theme is mobile ready.You will learn where to find the information necessary to get your own concrete5 site and then get a quick introduction to understand the idea of the in-site editing concept. We’ll then create a theme which is extended with features and more details as we progress. You’ll also see some examples to show you the process of overriding elements from the core without losing the ability to upgrade concrete5 in the future. Once we’ve customized every element in concrete5 to build a complete theme, we’ll have a look at responsive techniques to make your site ready for small screen devices such as mobile phones and tablets.  
Table of Contents (13 chapters)
Creating concrete5 Themes
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Creating and managing pages


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:

  • Visit: This option opens the page in the current browser window.

  • Properties: This option edits the page name, meta title, and any other attribute you've assigned to your pages.

  • Speed Settings: This option shows the various caching options to improve the performance of your site. There's usually no need to worry about it unless you have a big site.

  • Set Permissions: This option shows different options to hide a page from certain groups.

  • Design: This option displays a screen where you can change the page theme for a page or switch the page type.

  • Versions: This option displays all available page versions. It also offers the option to undo a change by reapproving an old version.

  • 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 Page: This option allows you to add a new subpage underneath the one you've selected.

  • 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!

Adding a new page

Let's have a look at the process for adding a new page to your site. If you're not already in the site map, hover over the Dashboard button at the top and click on the Full Sitemap 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:

Before the page is created, there's one more step where you need to enter at least the name of the new page:

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:

http://www.your-site.com/services/

Tip

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 services.

The Public/Date Time field is only informative by default, but can be used in custom blocks to sort or filter pages. We don't need that part and use the default value.

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.