JonMifsud
Web Developer & Consultant

Website Hierarchy in Symphony CMS

01 June 2013

Symphony CMS is one of the most powerful Content Management Systems available, due to its level of flexibility. Due to this very fact it does not provide things which in other CMS's are 'standardized' such as Website Hierarchy structure for static content.

What Symphony CMS provides upon installation is a bluprints/pages section, where you can build pages/templates in a hierarchical manner, however here you cannot store any other data such as about page content etc. To achieve this you would have to create a section which would hold all your website's static content, including texts, titles, handles and SEO Fields in addition to anything else you deem necessary.

This post will explain in detail how to achieve a website hierarchy in Symphony CMS

  1. Create a section called Pages this will hold your page's content. And Include the following fields:

    • Title [text input]
    • Menu Title [text input] (optional)
    • URL Handle [text input]
    • Content [textarea/textbox field]
    • Parent [Select Box Link, linked to same section] note this has to be added/linked after creation of section.
    • Order [Entry Order]
    • SEO Title [text input] (optional)
    • SEO Description [textarea/textbox field] (optional)
    • Link [entry url] (optional)
    • Publish [checkbox] (optional)

    Note that all text fields, and text areas can be replaced with their Multilingual Alternatives

  2. Create a data-source named navigation linked to the Pages Section

    Add the following filters:

    • URL Handle: regexp: .* (to match only pages which have a handle set)
    • Published: yes,{$url-draft} only published pages, or all when viewing a draft

    Select the following fields:

    • Title
    • Menu Title
    • URL Handle
    • Parent

    Enable Sorting by order and do not limit the number of entries. This will give you a datasource containing all the pages in the hierarchy that you can navigate to.

  3. Create another datasource named page also linked to the Pages section

    Use the following filters:

    • URL Handle: {$page3:$page2:$page1:$current-page} (to match website the hierarchy depth)
    • Published: yes,{$url-draft}

    Select all the relevant fields which will be used in your static pages. As this datasource should always give you the current page that you are viewing. Also enable 404 if page not found, so if a user inserts dummy text in his url, you throw a 404 as the page would not exist in your website hierarchy.

  4. To be able to view the website hierarchy in the back-end install the Section Hierarchy Extension and sort your Pages section by order. This extension will tab-view your pages, and move the order whenever new pages are created and not in-order.

    When Creating Static Pages, remember to link the pages to the parents as otherwise they will not be moved in order by drag & drop.

  5. Create a new Symphony Page in blueprints/pages and name this page static add

    page1/page2/page3
    

    as URL Parameters so this will mimic your datasource variables and enable your website hierarchy. Make sure you select both the page and navigation datasources.

  6. Install and enable the URL Router extension; and add a new route:

    /(.+)/ to /static/$1/
    

    make sure you do not force this redirect, so if you have a Symphony Page matching up this would still work.

This article has covered all the steps from a back-end perspective to enable a website hierarchy in Symphony. This lets you deal with static pages with ease. Extending Static Pages will explain how you can use this structure on the Front-end to build your navigation menus and links using this website hierarchy.

Written by Jonathan Mifsud

Jonathan Mifsud is a web developer by day and an SEO enthusiast by night. He provides freelance web development and consultancy services and is available for hire. You can get in touch with him on twitter and Google+

Comments

Leave a Comment

Post a new Comment

Please write your name.
Please enter your comment
Please enter your email address.