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:

('dishes', array(
'label'                => __('Dishes'),
'singular_label'    => __('Dish'),
'public'            => true,
'show_ui'            => true,
'capability_type'    => 'post',
'hierarchical'        => false
'query_var'            => false
'supports'            => array(

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:

('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)) ?>

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

                    <?php the_post_thumbnail() ?>

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

                    <?php the_content() ?>
            <?php endforeach; wp_reset_postdata() ?>
    <?php endforeach ?>


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!


Bookmark this Article

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

Post a Comment

blog comments powered by Disqus

Random jQuery Plug-ins

  • Equal Height

    This plug-in makes HTML-elements equal height by adjusting their min-height CSS properties. Of course IE6 has no clue what min-height means so the plu...


  • 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...


  • Center

    This little pluggy centers an element on the screen using either fixed or absolute positioning. Can be used to display messages, pop up images etc.


More Plug-ins

Recent Comments

Powered by Disqus