I want to share with you something technical that i’ve been working on in WordPress. (you don’t have to read this if you don’t want to I won’t be offended) Also, bear with me as I don’t usually write technically as much as I should. Here we go….

I’ve been making a website in WordPress for a local fine-dining restaurant.  Their food and wine is spectacular. Anyway, I made some custom CSS for the restaurant menu. Custom alignments for different data, etc. Not a problem for me to implement, but I needed a way for the restaurant chefs and managers to update the menu without messing with the code. I tried WYSIWYG editors, which made changing menu items fine, but adding menu items in would mess up half the time. So I decided to use custom fields with the plug-in Flutter.

However, local developer Tammy Hart has told me that soon, with the release of WordPress 3.0 that includes Custom Post Types, we might not need to rely so heavily on the plug in flutter for custom content types as we do now. That being said, I am still going to tell you what I found to be helpful in building a restaurant menu in flutter. But I thought you should know.

Here is the general CSS Layout that I’ve done:

I installed Flutter. I then made three “Custom Write Panels” – one for each kind of menu I have.

This makes a new items on the Admin Bar. I especially wanted this because the restaurant can “manage” and update their menus daily and wont have to dig far.

After I did that I made the specific custom fields for the Menu Item Name, The Item Description, and the Price. The three things I need to insert into my CSS to make each dish look right. And make a Field for the Name of the Grouping (appetizers, etc) at the bottom so that the restaurant can change “Entree” to “Main Course” if they want and so-on.

Now that we are all set with our fields, we can start making the template. Take your page.php file or other custom template file you have made, and after <?php the_content(”); ?> we need to call our fields.  According to Flutter’s Usage: to get one variable you use <? echo get(‘variable’); ?> to call.  However, in our menu items, we need to call duplicates. I started using getGroupDuplicates to call all the menu items, but I ran into a problem with the items that were deleted still showing up (bug?!). that is when I found This Thread .

In the file get-custom.php add this function:

/** Developed by Thang

* Return a array with the all distinct values in one array

*

* @param string $groupName

*/

function getDistinctGroupOrder($field_name){

global $post,$wpdb;

$elements  = $wpdb->get_results(“SELECT DISTINCT group_count FROM

“.RC_CWP_TABLE_POST_META.” WHERE post_id = “.$post->ID.” AND

field_name = ‘”.$field_name.”‘ ORDER BY order_id ASC”);

foreach($elements as $element){

$order[] =  $element->group_count;

}

return $order;

}

<?php $group_orders = getDistinctGroupOrder(‘app-menu-item’);

foreach($group_orders as $group_order)
{ ?> <div id=”foodmenu”><dl>
<dt>
<?php echo get(‘app-menu-item’,$group_order,1); ?>
</dt>
<dd class=”price”>
<?php echo get(‘app-Item-price’,$group_order,1); ?>
</dd>
<dd class=”ingredients”>
<?php echo get(‘app-item-description’,$group_order,1); ?>
</dd>
</dl>
</div>
<?php }
?>

And then you just do the same for all sections on all templates and make sure that your field names match up.

However, I want to make this fool-proof. What if on the Special Menu, they did not want dessert? Setting up the template this way assumes that these are filled out. So, I have to set up a conditional statement so that I dont get a gap displayed with no items in it. Here’s how you do that- add this to your template file:

<!– check to see if there’s actually content filled in.  –>
<?php
$content = get_post_meta($post->ID, ‘d-item-name’, true); if ($content) { ?>

Then put in your flutter/template code in, and then add this at the end.

<?php } else { ?>
<?php } ?>

So for this “Dessert” Section, my code looks like this:

$content = get_post_meta($post->ID, ‘d-item-name’, true); if ($content) { ?>
<?php $group_orders = getDistinctGroupOrder(‘d-item-name’);
foreach($group_orders as $group_order)
{ ?> <div id=”foodmenu”><dl>
<dt>
<?php echo get(‘d-item-name’,$group_order,1); ?>
</dt>
<dd class=”price”>
<?php echo get(‘d-item-price’,$group_order,1); ?>
</dd>
<dd class=”ingredients”>
<?php echo get(‘d-item-description’,$group_order,1); ?>
</dd>
</dl>
</div>
<?php }
?>
<?php } else { ?>
<?php } ?>

All this does is checks to see if you have fields filled out. If you dont, it just moves on.

Here is what the Custom Write Panel looks like in your page editor:

Simple huh? You just duplicate the group to make more Entres. There are also the other panels there too (appetizers, desserts, etc) So the restaurant can now add and subtract Menu Items without any fear of messing up the custom CSS. And, with the way you can label things, you can make adding a menu item pretty intuitive. (no more non-labeled Custom Field box! “value”?! what does that mean?)

Anyway, it does takes a bit of effort, but it is worth it in the long run. I wont be getting calls every time they update something and messed it up. or don’t understand, etc. Flutter can be a bit clunky for beginners. (I was really scratching my head and wondering where all the simple documentation was located) But, there are some good articles out there. My friend Tammy Hart pointed me to this one on duplicate fields. And, I found this one to be helpful as well.

Here’s to the wait for WordPress 3.0. and Custom Post Types.  Till then, Flutter away!

- sara cannon