How to Use WordPress as CMS with Flutter Plugin

There has been a long debate in web development community about the CMS capabilities of WordPress. Recently WordPress won Overall Best Open Source CMS Award of 2009 and got 2^nd position in best Open Source PHP CMS category. WordPress beat Joomla in best Open Source PHP CMS category. All of this is ensuring that WordPress is not only blog publishing software but now it is also used as a CMS to strengthen the development of websites because of its ease of use and open source characteristics. Plugins and themes are the best way to extend the capacity of WordPress as a Content Management System than adding bloat to the core of WordPress.

While extending WordPress as a CMS, Flutter is a plugin which allows us to create write panels for various type of content. Flutter also helps in the process of making versatile page templates. Another very useful feature of Flutter is its “Edit in place” feature. This feature enable user to edit the content is real time without going back to WordPress admin Panel. This is a very rich feature for those clients who don’t want to mess up with WordPress integrated WYSIWYG tiny mice editor for a small change in content. In this article we will take a look on how to create Custom Write Panels and page templates using Flutter, the CMS plugin for WordPress.

Installing and activating Flutter

You can download Flutter from WordPress plugin repository. After activating Flutter, it extends WordPress admin panel with two tabs. One tab under the settings panel (Settings–>Flutter) and second is its independent tab “Admin Panel–>Flutter”.

Flutter Plugin Settings

You can access the main flutter settings panel under the Settings tab. The original post, page panel integrated by default in WordPress can be disabled using Flutter options. Using this panel different write panels can be assigned to different Roles with the assistance of Role Manager Plugin. Flutter can be safely uninstalled from this panel and its feature of “Edit in Place” can also be removed. I want to mention that some of the functions don’t work in flutter such as hiding tinymce editor doesn’t work.

Creating Custom Write Panel

We will create a custom write panel for a page that shows new cars. We will have car’s description, 2 specifications for the car, an exterior picture and interior picture. Let’s start. After that we will create a custom page template that will show our page having custom fields.

First of all we will go to Admin Panel->Flutter->Write Panels. We will create a panel with title “Cars”. In Assigned theme box we will select that page template, we will develop later. The next checkbox is of quantity. It depends upon your need, if you want to show a single car then go for single otherwise select multiple. The consequence options are advanced fields and order. Select advanced fields according to your need. In my case I have disabled all. Order is the number of panel on which it will show in WordPress admin panel.

After saving you will see a new panel in your WordPress admin panel with the title of Cars. Let’s add the aforementioned custom fields. I will show you how to set one text field and one image field. The same method applies to all. Below screenshot shows you the settings for the variable “description” that shows the description of car.

Press save and now flutter will ask you for the width of field. Select one that suits you. Press Finish and you are done.

In the following screenshot, an image field named “ExteriorLook” that shows exterior look of the car is created. When an image field is created, flutter asks for the image class, fill this by writing the default image class of your theme. On next step it will ask for the maximum width and length of image. Again choose one that suits you. I have selected 400*300.

In the following screenshot, I have shown custom fields for my custom write panel “Cars”. Variable names are very important as they will be used in custom template. According to predefined rules of php blank spaces are not allowed in variable names.

This is how our custom write panel looks now.

At this time if we will create a page with default page template, it will show nothing except what you typed in tinymce editor.

Creating the Page template:

Now we will create the custom page template that will have all the values of our custom fields.

The standard header for custom page template in WordPress is

/*
Template Name: Cars
*/

Having this code in a file within your theme’s folder, WordPress will recognize a Page Template “Cars”.

Following is the default custom field code for adding into page template

<?php echo get('variable'); >?>
<?php echo get_image('variable'); ?>

You can read all the codes here in Flutter Usage.The variable name will be replaced by Custom Field name.

Below is the final page template. I have commented the code so that you can easily understand it.

<?php
/*
Template Name: Cars
*/

get_header(); ?>

<div id="content" role="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

 <div id="post-<?php the_ID(); ?>">
 <h2><?php the_title(); ?></h2>
 <div>
 <?php the_content('<p>Read the rest of this page &raquo;</p>'); ?>
<!--End of Default Page Template Code-->
<!--Our customized Page Template code-->
<strong>A smart Review of <?php the_title(); ?> </strong>
<?php echo get('description'); ?><!--This will show the description field-->
<h4>Specifications</h4>
<table>
 <tr>
 <td>Car Cylinders:</td>
 <td><?php echo get('cylinder'); ?></td><!--This will show the cylinder field-->
 </tr>
 <tr>
 <td>Transmission:</td>
 <td><?php echo get('Transmission'); ?></td><!--This will show the Transmission field-->
 </tr>
</table>
<p><h3>Exterior Look of the car</h3></p>
<?php echo get_image('ExteriorLook'); ?><!--This will show the ExteriorLook image-->
<p><h3>Interior Look of the car</h3></p>
<?php echo get_image('InteriorLook'); ?><!--This will show the InteriorLook image-->
<!--/*End of Code-->
 </div>
 </div>
 <?php endwhile; endif; ?>
 <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
 </div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

This page template can now be selected from Edit Custom write panel.

Here is how our Custom Write Panel “Cars” looks with content filled.

Edit in Place Feature:

This rich feature is very good for those clients who have not an understanding for WordPress admin panel. Whenever an administrator will roll over to the custom field in the page, flutter will highlight the editable area. The color which is used to highlight editable area can be changed from Flutter plugin settings.

Last Words:

Flutter is still not a stable plugin as it has bugs and some of the features don’t work with latest versions of WordPress (Version 2.8) yet it is a good step from Freshout for extending WordPress as a CMS. The time spent in making Flutter work for you is far less than attending the calls of clients explaining them how to edit and add content using WordPress post/page write panel. Flutter also lacks documentation. But there is news in industry that the creator of WordPress Matt has plans to improve this plugin.

I hope this article will help you a lot in using WordPress as a CMS. I will love to read your tips and techniques for extending WordPress as CMS. Share them with us in comments.

No related posts.