How to add the online ordering button in WordPress

For the convenience of the WordPress developers, we’ve built a plugin that makes it super easy to handle the ordering and table reservation buttons from within WordPress. Below is a complete guide on how to install the plugin, publish the buttons and customize their styles.

How to get started with the WordPress plugin

1. Install and activate the WordPress plugin

  • From witin WordPress, go to the Plugins section and click on Add New
  • Search by gloriafood and our plugin will show up
  • Click on Install Now and wait a few seconds
  • Click on Activate (it shows once installation is finished)
how to install the wp plugin

2. Create or login to your GloriaFood account

With the plugin installed a new entry will show up in the WordPress navigation, called Menu - Ordering - Reservations. Click on it.

Now we need to connect a GloriaFood account with your WordPress website:

  • If you don’t have an account, sign up.
  • Otherwise, click on I already have a restaurant account and login.
signup or login in the plugin

3. Complete the setup and insert the menu

If you’ve just signed up, this screen explains exactly what you need to do next:

wp plugin dashboard
  • Set up your restaurant profile.
    restaurant account setup
  • Insert your food menu.
    food menu editor

4. Publish the ordering and table reservation buttons

  • Under Menu - Ordering - Reservations, go to Publishing to reveal the two buttons and their corresponding shortcodes.
  • Copy the shortcodes and paste them where you want the buttons to appear on your website.

    publishing screen

How to publish the buttons in pages or blog posts

  • For pages and blog posts you can use directly the Menu - Ordering - Reservations button which you can find in the editor:
    how to publish buttons in wp editor
  • Simply click on that and select the button you want to include in your page:
    wp editor - publishing popup
  • After inserting both button codes, it should look like this:
    publishing shortcodes
  • Preview the changes and you’ll see the button on your page.

How to publish the buttons in the navigation

To accomplish this you need a plugin that allows you to add shortcodes to the navigation. Here’s how to do it using the Shortcode in Menus plugin.

  • Install and activate the Shortcode in Menus plugin.
  • Go to the Menus page under Appearance.
  • Click on Screen Options and check the Shortcodes box.
    install the shortcodes-in-menu plugin
  • Having that done, the Shortcode section becomes available.
  • Copy paste the shortcode for the button you want to add in the navigation and add it to the menu.
    add the shortcodes to the nav

Depending on your theme, your navigation will look something like this:

navigation with default button style

Since the ordering button generates revenue, we highly recommend that you make it stand out in the navigation.

So if possible, leave it as it is, a big orange button (orange is a very good color for conversion). But if you cannot make it work in this default design, you can use this shortcode instead:

[restaurant-menu-and-ordering class="glf-btn-basic" ruid="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"]

Please note that we’ve added class="glf-btn-basic" in the shortcode, which will produce this result:

navigation with basic button style

If none of the above options work for your website (design wise) then you can:

  • Leave the class attribute empty to inherit the parent’s class: class=""
    navigation with button no style
  • Or just use a custom class of yours: class="your_class_name"

How to add the buttons to the sidebar or footer

The buttons are available as widgets so that you can easily add them to the sidebar or footer.

  • Go to Appearance → Widgets
  • Find the widget called Menu - Ordering - Reservations and add it to the sidebar or footer.
    online ordering and table reservation widgets
  • In the small settings area, choose whether you want both buttons to appear or only one of them
    add online order and table reservations to sidebar or footer

Please note that you can add this widget the container as meny times you want.

One last thing: if you want your buttons to have a special CSS in the sidebar or footer, click on Custom CSS class and pass the name of your custom class, like:
class=”your-class-name”.

How to customize the buttons

  • The easiest way to customize the buttons is to go to the Publishing screen and click on Customize:
    customize link
  • It will open this popup that allows you to change things like button text and color, font size and color, border radius and padding. Like this:
    customize button popup

Please note that the style changes of the See Menu & Order / Table reservations buttons apply to all the buttons that were added using the shortcodes provided above.

Advanced tips:

  • If you want your button to use the same style of your other buttons in the theme, you can pass a class name in the shortcode below:

    [restaurant-menu-and-ordering class="your_class_name" ruid="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"]
    Like in this example:

    [restaurant-menu-and-ordering class="glf-btn-basic" ruid="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"]
  • If you want to strip the button of its default style and just let it inherit the parent’s style, leave the class attribute empty, like this:

    [restaurant-menu-and-ordering class="" ruid="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"]