Archives for Wednesday, January 18th, 2012

You are currently browsing 1 articles posted Wednesday, January 18th, 2012.

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

    Join 6 others and post a comment

Random jQuery Plug-ins

  • Live Validation

    Use this plug-in to add live validation to any form on your page. The plug-in indicates whether a form control is valid or not by switching between an...

    Details

  • Vibrate

    This plug-in makes any element you want "vibrate" every now and then. Can be used in conjunction with blink for maximum annoyance!

    Details

  • Drag to Select

    Use this plug-in to allow your users to select certain elements by dragging a "select box". Works very similar to how you can drag-n-select files and ...

    Details

More Plug-ins

Recent Comments

Powered by Disqus
Page cached. Loaded in: 0.0323 second(s).
Last DB change: 2012-04-02 11:06:05
Last file change: 2012-04-25 20:30:39
Cache created: 2012-05-17 00:11:54