How to Create a Restaurant Menu in Wordpress 3 using Custom Post Types and Taxonomies

Published Wednesday 18th of January 2012

I recently created a restaurant website in Wordpress and for the first time got to use Wordpress 3's new "Custom Post Types" feature. Here I thought I'd explain how you too can create a menu using the same.

We'll create a menu where each dish has a title, picture, description and price. Each dish will also be grouped under a category like "Meat" or "Fish".

First, we'll create our new post type for our dishes. Put this in your theme's functions.php file:

<?php
register_post_type
('dishes', array(
    
'label'                => __('Dishes'),
    
'singular_label'    => __('Dish'),
    
'public'            => true,
    
'show_ui'            => true,
    
'capability_type'    => 'post',
    
'hierarchical'        => false
    
'query_var'            => false
    
'supports'            => array(
        
'title',
        
'editor',
        
'excerpt',
        
'thumbnail',
        
'author',
        
'page-attributes'
    
)
));

Refer to the Wordpress Codex if you're curious about all the options.

That's all that's needed for a new menu item to show up in the admin; "Dishes". You could use "custom-fields" for the price but I think it's easier for the admin if we use the excerpt instead.

Now let's create a custom taxonomy for grouping our dishes:

<?php
register_taxonomy
('dish_types''dishes', array(
    
'label'            => __('Dish Type'), 
    
'hierarchical'    => true
));

That's it. Now when you add a new "Dish" you'll get to choose from your "Dish Types". Go ahead and add some new "Dish Types" and then add a couple of "Dishes" to each type.

Now we have everything we need in the admin / backend. All that's left is to display the menu on our website. We'll create a custom template for our menu called "menu.php". You can make it a copy of "page.php" so that the admin can still add text to the menu page. You need to set the "Template Name"-comment in the top of the file for Wordpress to recognize our new template:

<?php /* Template Name: Menu */ ?>

No let's write the code we need to fetch all our dish types as well as dishes. This code goes in the previously created menu.php, below the page-specific stuff:

<section id="menu">

    <?php $types get_terms('dish_types', array('orderby' => 'id')) ?>

    <?php foreach ($types as $type) : ?>
        <h3><?php echo htmlspecialchars($type->name?></h3>

        <?php if ($type->description) : ?>
            <p><?php echo htmlspecialchars($type->description?></p>
        <?php endif ?>

        <?php $dishes get_posts(array('post_type' => 'dishes''dish_types' => $type->slug)) ?>

        <ul>
            <?php foreach ($dishes as $post) : setup_postdata($post?>
                <li>
                    <h4><?php the_title() ?></h4>

                    <?php the_post_thumbnail() ?>

                    <p class="price"><strong><?php the_excerpt() ?></strong></p>

                    <?php the_content() ?>
                </li>
            <?php endforeach; wp_reset_postdata() ?>
        </ul>
    <?php endforeach ?>

</section>

The code should hopefully be pretty self explanatory. The meat of it is first the call to get_terms() which retrieves all the terms for a taxonomy and get_posts() which is used to retrieve any post type based on params.

As you can see I use the_excerpt() to store the price of the dish. If you'd rather use a custom fields called "Price" you would display it like this: echo get_post_meta($post-&gt;ID, &apos;Price&apos;, true).

Happy Wordpressing!

Tags
Comments
6 comments

Bookmark this Article

  • del.icio.us
  • Digg
  • Furl
  • Google
  • Technorati
  • Ma.gnolia
  • Blinklist
  • Blogmarks
  • Rojo
  • Stumbleupon

Post a Comment

blog comments powered by Disqus

Random jQuery Plug-ins

  • Super Simple Tabs

    This is an extremely basic tabs-plugin which allows you to create tabbed content from the ever-so-common list of in-page-links. You can set the select...

    Details

  • Form Hints

    Using this plug-in you can add a descriptive hint to any form-control you may have on your site.
    Add a hint by giving the form-control a title-attri...

    Details

  • Captcha Refresh

    If you use a so called CAPTCHA-image on your site then you can use this plug-in to allow users to click your CAPTCHA in order to generate a new random...

    Details

More Plug-ins

Recent Comments

Powered by Disqus