Learning FUEL CMS PART 4: Using the CMS

In Part 4 of this blog series we will discuss how to use the Content Management System (CMS) of FUEL to create and edit pages, blocks, navigation, module data and assets. As with the previous posts in this series, we will use the demo site as a point of reference.

Before we go any further though, make sure you have read the introduction post about the blog series and have downloaded and installed the FUEL CMS 0.91 branch from GitHub.

Logging into the FUEL CMS

Assuming your FUEL CMS installation is setup correctly, you can login to the default installation of the FUEL CMS by typing fuel in the URI like so:
http://localhost/fuel (assuming your installation is on your localhost development server)

Importing Pages

The user guide already provides several examples of creating pages in FUEL CMS. However, we will focus on how to make the pages in the demo site editable by importing them.

To import a page, all you need to do is create a page with the same location value as your view file. To create a page, select the Pages menu item on the left in the FUEL admin and then click the create button on the following page. Next, to make the about/services editable, we enter about/services in the location value for the new page and click save. After clicking save, you should see a prompt to import the view file currently associated with that URI location. Clicking Yes, Import, will import the contents of the fuel/application/views/about/services.php view file in to the layout variable named body. Importing will also do it's best to convert any PHP code into the templating syntax.

The import layout variable of body can be changed by modifying the js_controller_params import_view_key parameter in the fuel/modules/fuel/config/fuel_modules.php file.

The importing works by comparing the timestamp of the view file and the last modified date of the page. If the view file's last modified date is more recent, then the prompt will be displayed. This allows you to make edits in your favorite text editor and then easily import them into the CMS when you are ready.

After importing your view file, you can add your own page title, meta description, meta keywords and body class if you'd like. If not, defaults will be used which are set in the global variables file (fuel/application/views/_variables/global.php).

Also, the default main layout uses the view file found at fuel/application/views/_layouts/main.php. The variables for the layout are set in the fuel/modules/fuel/config/fuel_layouts.php file. To change the fields for that layout you can overwrite those values in the fuel/application/config/MY_fuel_layouts.php file.

For more on creating layouts click here.

Importing Blocks

Now that we know how to create and import pages to be editable in the CMS, we will now discuss how to make blocks editable in the CMS by importing them.

Importing blocks is done in a similar manner as importing pages. For example, to import the quote or showcase block, click on the Blocks menu item on the left and then click the create button. For the name value, type in the name of the block view file found in fuel/application/views/_blocks/ folder (e.g. quote or showcase) and click save. You should next see the prompt to import the block view file with the same name. Clicking Yes will import the contents of the view file to the view value and will also convert any PHP code into the templating syntax, just like with pages.

Importing Navigation

We've discussed how to make pages and blocks editable in the CMS and will now discuss how to import the navigation structure so it too can be editable.

To import a navigation structure into FUEL, click on the Navigation menu item on the left and then click the Upload button. On the page that follows, upload your existing fuel/application/views/_variables/nav.php file with the main navigation group selected. This upload feature eliminates the need for you to manually create each menu item in the CMS.

After importing your nav.php into the CMS, your site menus are now editable and controlled by the CMS. Any further changes made to the fuel/application/views/_variables/nav.php file will need to be imported into the CMS.

Creating & Editing Module Data

In Part 3: Creating Modules, we discussed how to create the quotes and projects modules and hook them up to the admin. You can manage the data of site modules by clicking on either the Quotes or Projects menu items on the left under the Modules section. The flow for managing module data follows the familiar select list view, then click create button or select a row to edit.

Assets

The Assets module is used to manage files in your media folder. With the case of the WidgiCorp demo site, we use it to manage the images (including images that get uploaded by the projects module). You can't edit an asset per se, however, you can upload a new file with the same name to overwrite the existing asset. You can select which folder to upload your asset, as well as a new file name and subfolder you want the asset uploaded to. The overwrite option determines whether to overwrite an asset with the same path or not.

That's it for Part 4: Using the CMS. We covered the basics of converting the WidgiCorp demo site into an easily editable site. To learn more, we encourage you to join the community, sign up for our newsletter below, and/or follow us on Twitter, to stay informed on the latest FUEL CMS news. Stay tuned for Part 5: Testing Your Site.