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)

2. Create or login to your GloriaFood account

With the plugin installed a new entry will show up in the WordPress navigation, called GloriaFood. 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.

3. Complete the setup and insert the menu

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

• Set up your restaurant profile.
• Insert your food menu.

4. Publish the ordering and table reservation buttons

• Under GloriaFood, go to Settings 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.

How to publish the buttons in pages or blog posts

• For pages and blog posts you can use directly the GloriaFood button which you can find in the editor. Simply click on that and select the button you want to include in your page:
• After inserting the button code, 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.
• 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.

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

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:

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

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=""
• 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 GloriaFood and add it to the sidebar or footer.
• In the small settings area, choose whether you want both buttons to appear or only one of them

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 Settings screen and click on Customize:
• 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:

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"]

×

×

×

×

×

×

×

×

×

×

×

×

×

×