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:
<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->name)) ?>
<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->ID, 'Price', true).
Happy Wordpressing!
- Tags
- Comments
- No comments
