Creating a Restaurant Menu with WordPress and Advanced Custom Fields

1. Planning

1. First, we need to know what we’re going to display on our menu pages. In this case, we want the following:
   • Page Title
   • Page Description
   • Section Name
   • Section Description
   • Item Name
   • Item Price
   • Item Description
2. Next, let’s get some design inspiration. I will be working off of the design established via the former plugin, so I decided to mimic it. Below is a screenshot of that design with some notations on how things will be divided into HTML elements.

   

3. With a good idea of what will be displayed and how to display it, let’s put together a structure tree that will help us execute the plan. Remember that we’re working with multiple locations, each with different menus at each location. Therefore, we’ll be using two pages.

   Here’s an overall look at what we’ll be creating:

   • Location One (Page)
     • Page Description
     • Menu Section
       • Section Description
       • Item Name
       • Price
       • Item Description
   • Location Two (Page)
     • Page Description
     • Menu Section
       • Section Description
       • Item Name
       • Price
       • Item Description
4. Before we get on to the next steps, let’s make sure we’re starting from the same point by completing the following:
   • Login to your WordPress admin
   • Install the Advanced Custom Fields Pro plugin (and activate it)
   • Create a new Page called “Location #1” and publish it blank.

2. Create the Fields

1. In the WordPress admin area, click on the “Custom Fields” link on the main menu to go to the ACF main page.
2. Click the “Add New” button to create a new Field Group.
3. Field Set Title: Location #1
4. Click the “Add Field” button to create a field for each restaurant location’s contact information:
   • Field Label: Page Description
   • Field Name: page_description
   • Field Type: Text Area

5. Click the “Add Field” box and add a new Field called “Section” (Field Name: “section”)
   • Field Name: section
   • Field Type: Repeater
   • Layout: Block
6. In the “Sub Fields” box, add the following:
   • Section Name
     • Field Name: section_name
     • Field Type: Text
     Note that in this tutorial, no fields will be required. In this case, making something required would just decrease our flexibility.

   • Section Description
     • Field Name: section_description
     • Field Type: Text
     You can limit the the character count if it benefits your design. In this case, it does not.

   • Item
     • Field Name: section_description
     • Field Type: Text
     • Sub-Fields:
       • Item Name
         • Field Name: item_name
         • Field Type: Text
       • Item Description
         • Field Name: item_description
         • Field Type: Text
       • Item Price
         • Field Name: item_price
         • Field Type: Text
7. In the “Location” box below the Fields, applies the Field Group to Page > Is Equal To > Location #1
8. In the “Settings” box below “Location”, scroll down to “Hide on Page” and uncheck the box next to “Content Editor” – we won’t be needing it so let’s hide it to keep the back-end tidy.
9. Publish the Field Group.

3. Add the Theme Page

1. Open your WordPress theme in a text editor
2. Create a new file within your theme directory, name it ‘menu.php’
3. First, we need to designate this file as a new template for a WordPress page, so we’ll put this at the top.:

                       <?php
                           /*
                            * Template Name: Menu Page
                            * Template Post Type: page
                            */
   
                       get_header();  ?>
                   

   This creates a new Page Template called ‘Menu Page’ that we can use for our menus. Also, by including the ‘get_header();’ command, the page will be hooked into your theme’s header, which should include navigation menu, stylesheets, etc. If you’re unsure what this is all about, check out Page Templates in the WordPress Theme Handbook

4. Next, we’ll get the menu page started with a section that will include the page title and page description. While we’re at it, we’ll wrap the entire page in a class that will help with styling later. We’ll also open and close the WordPress loop so that we can access this page’s information:

                       <div class="menuPage"> <!-- Wrapping the page in a menuPage class -->
   
                           <!-- This code opens the WordPress loop so that we can work with the information from the page manager. -->
                           <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
   
                           <div class="title">
                               <h1><?php the_title(); ?></h1> <!-- Adds the Page Title -->
                               <p>
                                   <!-- This is our first ACF code.  It says that if there is anything in the page_description field, it will go here.  Since it's wrapped in <div class="title><p>, it will take on that styling -->
                                   <?php if( get_field('page_description') ): ?>
                                   <?php the_field('page_description'); ?>
                                   <?php endif; ?>
                               </p>
                           </div>
   
                           <!-- The code below closes the WordPress Loop -->
                           <?php endwhile; ?>
                           <?php endif; ?>
                       </div>
                   

5. Now that the title area is in place, let’s start the menu. This is a bit more complicated:

                    <div class="menuBody">
                        <!-- Start by checking if there are any Sections -->
                        <?php if( have_rows('section') ): ?>

                            <!-- If there are, we return the following for each -->
                            <?php while( have_rows('section') ): the_row(); ?>
                            <div class="menuSection">
                                <h2>                                
                                    <?php the_sub_field('section_name'); ?>
                                </h2>

                                <h4>
                                    <?php if( get_sub_field('section_description') ): ?> // We'll put an 'if' statement here since some sections may not have a description
                                    <?php the_sub_field('section_description'); ?> // ...But if they do, it'll appear.
                                    <?php endif; ?>
                                </h4>

                                <!-- This 'if' statement checks if any Items are present... -->
                                <?php if( have_rows('item') ): ?>
                                <!-- ...and returns the following list with each instance of Item appearing as an <li> -->
                                <ul>
                                    <?php while( have_rows('item') ): the_row(); ?>
                                        <li class="menuItem">
                                            <div class="itemTop">
                                                <h3>
                                                    <?php if( get_sub_field('name') ): ?>
                                                    <?php the_sub_field('name'); ?>
                                                    <?php endif; ?>
                                                </h3>
                                                <p class="itemPrice">
                                                    <?php if( get_sub_field('price') ): ?> // If statement here in case we want to keep the price off a certain item
                                                    <?php the_sub_field('price'); ?>
                                                    <?php endif; ?>
                                                </p>
                                            </div>
                                            <p>
                                                <?php if( get_sub_field('description') ): ?> // If statement in case item does not need description
                                                <?php the_sub_field('description'); ?>
                                                <?php endif; ?>
                                            </p>
                                        </li>
                                    <!-- This code closes out the Items list -->
                                    <?php endwhile; ?>
                                </ul>
                                <?php endif; ?>
                            </div>
                            <!-- This code closes out the rest -->
                            <?php endwhile; ?>
                        <?php endif; ?>
                    </div>
                

6. Finally, to wire in our existing Footer, close the page with:

All together, our new menu.php page will look like this:

        <?php
            /*
             * Template Name: Menu Page
             * Template Post Type: page
             */

        get_header();  ?>

        <div class="menuPage"> <!-- Wrapping the page in a menuPage class -->

            <!-- This code opens the WordPress loop so that we can work with the information from the page manager. -->
            <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

            <div class="title">
                <h1><?php the_title(); ?></h1> <!-- Adds the Page Title -->
                <p>
                    <!-- This is our first ACF code.  It says that if there is anything in the page_description field, it will go here.  Since it's wrapped in <div class="title><p>, it will take on that styling -->
                    <?php if( get_field('page_description') ): ?>
                    <?php the_field('page_description'); ?>
                    <?php endif; ?>
                </p>
            </div>


            <div class="menuBody">
                <!-- Start by checking if there are any Sections -->
                <?php if( have_rows('section') ): ?>

                    <!-- If there are, we return the following for each -->
                    <?php while( have_rows('section') ): the_row(); ?>
                    <div class="menuSection">
                        <h2>                                
                            <?php the_sub_field('section_name'); ?>
                        </h2>

                        <h4>
                            <?php if( get_sub_field('section_description') ): ?> // We'll put an 'if' statement here since some sections may not have a description
                            <?php the_sub_field('section_description'); ?> // ...But if they do, it'll appear.
                            <?php endif; ?>
                        </h4>

                        <!-- This 'if' statement checks if any Items are present... -->
                        <?php if( have_rows('item') ): ?>
                        <!-- ...and returns the following list with each instance of Item appearing as an <li> -->
                        <ul>
                            <?php while( have_rows('item') ): the_row(); ?>
                                <li class="menuItem">
                                    <div class="itemTop">
                                        <h3>
                                            <?php the_sub_field('name'); ?>
                                        </h3>
                                        <p class="price">
                                            <?php if( get_sub_field('price') ): ?> // If statement here in case we want to keep the price off a certain item
                                            <?php the_sub_field('price'); ?>
                                            <?php endif; ?>
                                        </p>
                                    </div>
                                    <p>
                                        <?php if( get_sub_field('description') ): ?> // If statement in case item does not need description
                                        <?php the_sub_field('description'); ?>
                                        <?php endif; ?>
                                    </p>
                                </li>
                            <!-- This code closes out the Items list -->
                            <?php endwhile; ?>
                        </ul>
                        <?php endif; ?>
                    </div>
                    <!-- This code closes out the rest -->
                    <?php endwhile; ?>
                <?php endif; ?>
            </div>

            <!-- The code below closes the WordPress Loop -->
            <?php endwhile; ?>
            <?php endif; ?>
        </div>



        <?php get_footer(); ?>
    

4. Style It

With that, we have our structure in place, so let’s jump back to the WordPress admin to add some content and see if things are working correctly. In the WordPress admin area, return back to the Location #1 page. A reminder that, at this point, it should look like this:

1. Let’s add some content. First, a page description. The good news is that ACF Text Fields accept HTML, so we’ll inject a bit for fancy styling. Add the following code into the text box for Page Description:

                   <p class="intro">Items are available for dine-in, pick up, and delivery (within a 5 mile radius).<br>
                   Call <a href="tel:XXXXXXXXXX">[PHONE NUMBER]</a> to order now</p>
               

   This will allow to give the “intro” class some styling later and include a link so customers can easily tap to call and place their order.

2. Next up, let’s add a few items:
   1. Under Section, click the ‘Add Row’ button to add a new Section:
      • Section Name: Pizzas
      • Section Description: Our fresh dough made on premises daily with your choice of RED, WHITE, or PINK sauce. Pizzas are available in Thin, Orginal or Extra Thick crusts. Half toppings are available for half the listed price.
   2. Within the new ‘Pizzas’ Section, click the ‘Add Row’ button to add our first menu item:
      • Item Name: Large 18” Pizza
      • Item Price: $18.99
      • Item Description: 12 slices (feeds 5-6)
   3. Following the same process, add the following items:
      • Item Name: Medium 14” Pizza
        • Item Price: $15.99
        • Item Description: 8 slices (feeds 3-4)
      • Item Name: Small 10” Pizza
        • Item Price: $12.99
        • Item Description: 4 slices (feeds 1-2)
   4. Finally, we’ll add a second section called Specialty Pizzas following the same process with the information below:
      • Item Name: Buffalo Chicken Pizza
        • Item Price: Large $19.99 | Medium $15.99 | Small $13.99
        • Item Description: Buffalo sauce with grilled chicken, bleu cheese, and mozzarella
      • Item Name: Meat Lovers
        • Item Price: Large $19.99 | Medium $15.99 | Small $13.99
        • Item Description: Sausage, pepperoni, bacon, and ham
   

   At this point, your Page Editor for Location #1 should look like this.

3. Since we’ve done a good job of designating each element of our menu, we’re going to add the following styling (note the comments for explanations):

                   .menuPage {
                       /* This is needed for my theme, you may not need it */
                       padding-top:75px;
                   }
   
                   .menuPage h1 {
                       /* This is the page title */
                       text-align: center;
                       border-top: 1px solid #7e0e0a;
                       border-bottom: 1px solid #7e0e0a;
                       color: #7e0e0a;
                       margin-bottom: 10px;
                   }
   
                   .menuPage p.intro {
                       /* This is page_description */
                       text-align:center;
                       font-size:21px;
                       line-height:42px;
                   }
   
                   .menuSection {
                       /* A little space between menu sections */
                       margin-bottom:100px;
                   }
   
                   .menuSection h2 {
                       /* This is section_name */
                       /* Background gradient generated via https://www.colorzilla.com/gradient-editor/ */
                       background: rgb(117,11,11);
                       background: -moz-linear-gradient(top, rgba(117,11,11,1) 1%, rgba(142,13,13,1) 100%);
                       background: -webkit-linear-gradient(top, rgba(117,11,11,1) 1%,rgba(142,13,13,1) 100%);
                       background: linear-gradient(to bottom, rgba(117,11,11,1) 1%,rgba(142,13,13,1) 100%);
                       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#750b0b', endColorstr='#8e0d0d',GradientType=0 );
   
                       border-radius: 20px;
                       margin: 25px 50px 15px;
                       padding: 0.25em 0;
   
                       text-shadow: 1px 1px 1px #000;
                       font-size: 3em;
                       line-height: 1em;
                       text-align: center;
                       font-size: 36px;
                       color: #ffffff;
   
                       -webkit-box-shadow: 1px 1px 2px 2px rgba(1, 1, 1, .3);
                       box-shadow: 1px 1px 2px 2px rgba(1, 1, 1, .3);
                   }
   
                   .menuSection h4 {
                       /* This is section_description */
                       text-align: center;
                       color: #8e0d0d;
                       font-size: 18px;
                       line-height: 28px;
                       margin: 0 2em 2em;
                       font-style: italic;
                   }
   
                   .itemTop {
                       /* Flexbox is a quick way to align our title on the left and price on the right */
                       display:flex;
                       justify-content:space-between;
                   }
   
                   .itemTop h3 {
                       /* This is the Item Name */
                       color: #8e0d0d;
                       font-variant: small-caps;
                       font-family: 'Forum', cursive;
                       font-size: 32px;
                       line-height: 36px;
                       display: inline;
                       clear: none;
                       border-bottom: 1px dotted #8e0d0d;
                   }
   
                   .itemTop p.price {
                       /* This is the item price */
                       display: inline;
                       clear: none;
                       text-align: right;
                       font-style: italic;
                       font-weight: 800;
                       font-size: 0.9em;
                       padding-right: 10px;
                   }     
               

   That’s all you should need to get the following:

   

   Now we’re looking pretty good.

5. Add the Second Location

1. In the WordPress admin area, create a new page called “Locaiton #2” and publish it.
2. Go to the ACF Field Groups Page, click on the Location #1 field group to open it.
3. Since we’ll be using this for more than just Location #1, let’s change the name to ‘Food Menu’
4. In the ‘Location’ box, click the ‘Add Rule Group’ button.
5. In the new rule group, set the Field Group equal to: Page > is equal to > Location #2
6. Alternately, you may delete the original Location #1 rule, and create a new rule that applies the Field Group to the Template called “Menu Page”