Adding Cinch to your Wordpress website



How to get started with the WordPress plugin

  1. Install and activate the WordPress plugin
  • From within 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)



  1. Login to your Cinch 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 Cinch account with your WordPress website:

  • Click on I already have a restaurant account and login.


  1. 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.



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:


  • Simply click on that and select the button you want to include in your page:


  • After inserting both button codes, it should look like this:


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


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:
  • Or just use a custom class of yours: 


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.


  • 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 many 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:



How to customize the buttons

  • The easiest way to customize the buttons is to go to the Publishing screen and click on Customize:


  • It will open this popup that allows you to change things like button text and color, font size and colour, 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"]
Was this article helpful?
0 out of 0 found this helpful