Customize your restaurant menu with templates

Updated on

Alongside the recent release of Food and Drink Menu Pro, I released a major upgrade to the free restaurant menu plugin at its core. It now includes a powerful template system that you can use to quickly customize the layout of your restaurant menu.

In this tutorial, I’ll introduce you to the templates and walk you through a quick example of how you can use them in your own themes to get the style just the way you want it. To follow along, you should be familiar with editing theme templates in WordPress.

Download an example theme containing all the code in this tutorial.

Where are the templates?

You can find the existing templates in the plugin directory, under /wp-content/plugins/food-and-drink-menu/fdm-templates/.

	- content.php
	- image.php
	- price.php
	- title.php
- menu.php
- menu-item.php
- menu-section.php

If you’ve purchased Food and Drink Menu Pro, you can find templates for the premium features under that plugin’s directory, /wp-content/plugins/food-and-drink-menu-pro/fdm-templates/.

	- item-flags.php
	- price-discount.php
	- source.php
	- special.php

When the plugin builds your restaurant menu, it will automatically pull the different templates together as needed, then output the HTML code.

To make your own templates that override these defaults, you just need to create identical files under a fdm-templates directory in your theme. So if you wanted to override the menu-section.php file, you would copy the file from the plugin to /path/to/your/theme/fdm-templates/menu-section.php.

Not sure where to put it? Download the example theme and look at the files there.

Modify the menu section header

In this tutorial, I’ll show you how to change the menu section template so that the descriptive text appears at the bottom of the section instead of the top. Here’s what the section looks like by default.

Default layout of the section details.
Default layout of the section details.

So, if you haven’t yet, copy the menu-section template from the plugin folder at /wp-content/plugins/food-and-drink-menu/fdm-templates/menu-section.php. Place a copy of this file into your theme at /path/to/your/theme/fdm-templates/menu-section.php. When the plugin loads a template, it will look first in your theme’s /fdm-templates/ directory.

Are you an advanced WordPress developer? Look for the “fdm_template_directories” filter to add more template directories.

Once you’ve copied the file into the right location, open it up in a text editor to look at the code. It should look like this:

<ul<?php echo fdm_format_classes( $this->classes ); ?>>
	<li class="fdm-section-header">
		<h3><?php echo $this->title; ?></h3>

		<?php if ( $this->description ) : ?>
		<p><?php echo $this->description; ?></p>
		<?php endif; ?>

	<?php echo $this->print_items(); ?>

If you’ve ever worked with theme templates, this should look familiar. It creates a list element for the section, adds the header with a title and description, and then prints all the items. Let’s modify this code so that the description appears in its own list element after the items. Here’s how it should look:

<ul<?php echo fdm_format_classes( $this->classes ); ?>>
	<li class="fdm-section-header">
		<h3><?php echo $this->title; ?></h3>
	<?php echo $this->print_items(); ?>
	<?php if ( $this->description ) : ?>
	<li class="fdm-section-footer">
		<p><?php echo $this->description; ?></p>
	<?php endif; ?>

Now, if the section includes some description text, this will be printed after all of the items of that menu section. Here’s what it will look like:

The description is in the right place, but it doesn't look very good.
Hey, now the description is at the bottom!

If your section description is not appearing at the bottom, go back over the steps above. Make sure you’ve got the template in the right place in your theme’s directory. Download the example theme if you’re confused.

Touch up the CSS style

Now we’ve got our custom template loading. Great. But the description looks a little out of character down there. You can touch this up by adding the following CSS rules to your theme’s style.css file:

.fdm-section .fdm-section-footer {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", serif;
	font-style: italic;
	padding: 0.5em;
	background: #eee;
.fdm-section .fdm-section-footer p {
	margin-bottom: 0;

Once these styles are loaded, it should look like this.

Ahh... much better!
Ahh… much better!


That’s all there is to it! Take a close look at all the template files you’ll find in Food and Drink Menu and Food and Drink Menu Pro. There are templates to cover each aspect of your restaurant menu, from sections and items to individual elements like titles, descriptions and prices.

Hungry for more? Follow me on Twitter or Google+ for more tips on managing your restaurant menu.

If you’re an advanced WordPress developer, take a look under the hood. There are lots of hooks to customize every aspect of your restaurant menu display, add new types of data, remove existing data and more. I’ll be posting more tutorials in the future to help get you up and running.

Let me know if you have any questions.

8 comments on Customize your restaurant menu with templates

  1. This is a great Menu builder, but….. the fonts are way too small. How can I make everything bigger. The Menu Section font is a good size but everything else like the Menu Item, description, and the price are not very big. I know I can change the description of the item within the text editor but I cannot change the Menu Item font size or the Price font size. Is there any way I can do this?

  2. Is there a short code option to display Section Titles? show_section_title=1 or something?

    We have the pro license, love the plugin, love to find this option!

    1. Hi Brett,

      Section titles should be displayed by default when you print a menu. Maybe your theme is hiding them for some reason?

      If you want to post a link to one of your menus (or send it via my contact form), I’ll take a quick look to see why your section titles aren’t appearing.

      1. I will check on the hiding possibility! That could indeed be the problem.

        seems like in a past version we might have turned that off with CSS.

        Still would like to have a short code on/off option there, but thank you very much for the troubleshooting help! 🙂

        This is a good plugin, and hoping to pick up another license soon for another client. Similarly, hoping to repeat that for many clients! 🙂

        1. Just out of curiosity, on a menu where you want the section titles turned off, would there be only one section? That’s where I see the titles hidden most often: small menus that don’t need sections.

          I intend to implement a [menu-section] shortcode at some point to cater to this need, but a shortcode attribute for the [menu] shortcode might be useful too.

  3. how i can change the font-family, font-size and font-color from the header text??
    i tryed this one
    the titel and price, i can change everything.
    but if i try it on the header i cant?!?

    .fdm-section-header {
    font-size: 50px;

    .fdm-item-panel .fdm-item-title {
    font-weight: bold;
    font-size: 20px;
    font-family: Arial;
    color: yellow;
    background: blue;
    /* background: rgba(255, 255, 142, 0.2);*/

    .fdm-item-panel .fdm-item-price {
    font-size: 10px;

    1. Hi serwo,

      The header has a nested h3 element. You should try targeting that if you want to adjust the font size:

      .fdm-section-header h3 {
      font-size: 50px;

      Sorry it took me so long to get back to you. Your comment came in while I was away on holidays and I wasn’t checking comments like I check support requests. In the future, reach out to me via the contact form on my site and I’ll get back more quickly.

Comments are closed.