Wednesday, August 25, 2021

How to Create an Online Restaurant Menu in WordPress (Step by Step)

Do you want to create an online restaurant menu in WordPress?

Sharing your menu on your website will help convince more people to stop by your restaurant. When people can easily check out the food, drinks, and prices, they’re more likely to place an order or visit.

In this article, we’ll show you how to create an online restaurant menu in WordPress, step by step.

How to create an online restaurant menu in WordPress (step by step)

What You Need to Start a Restaurant Website

Before you can create an online restaurant menu, you’ll need to setup a website. If you don’t have a website yet, then don’t worry.

You can easily start a website using WordPress, which is the best website builder in the world used by millions of small businesses, restaurants, bars, and cafes. Over 42% of all websites on the internet use WordPress.

Best of all, you can start building your website without a large upfront investment.

The first thing you need is a domain name and web hosting. We’ve worked out a deal with Bluehost, one of WordPress’s recommended hosting providers, to offer our readers a great deal.

Basically, you get a free domain name, a free SSL certificate, and a 60% discount on web hosting.

→ Click Here to Get this Exclusive Bluehost Deal ←

Beyond hosting and a domain name, you also need a WordPress theme. A theme is like a template for your website.

There are tons of great WordPress restaurant themes to help you create a professional website that will encourage your customers to place an order.

If you need help setting up your restaurant website, then see our step by step guide on how to make a website.

Why Create an Online Menu in WordPress?

Creating an online menu page on your WordPress site lets you create a better experience for your visitors and potential customers.

When a visitor comes to your restaurant website, the first thing they usually look at is your menu. If you’re only offering visitors a PDF menu, then you’re making it difficult for them to see the food choices you offer.

By creating an online menu on your website, there’s no need for your users to download your menu. Downloading PDFs can be difficult depending on your customers’ data plans and connection.

Plus, a menu page on your website will be mobile responsive and look good on every device, so your visitors can easily read it without zooming in and out.

Best of all, with a menu page, you can easily edit your menu and even add online ordering. PDFs are much more of a hassle to edit and upload when you need to make any menu or pricing changes.

That being said, we’re going to share two different WordPress plugins that can help you add an online restaurant menu to WordPress. Simply use the quick links below to choose the plugin you want to use.

Method 1. Add a Restaurant Menu to WordPress with SeedProd

We recommend using SeedProd to create an online restaurant menu in WordPress. It’s the best drag and drop WordPress page builder used by over 1 million websites.

It lets you create a stunning restaurant menu using a drag and drop builder. Plus, you can easily edit your menu as it changes and new menu options are available.

For this tutorial, you can use the free version of SeedProd to create your menu. However, a pro version of SeedProd is available that has 150+ templates, color schemes, email marketing integrations, image carousels, social media blocks, and much more.

First thing you need to do is install and activate the plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, navigate to SeedProd » Pages and then click the ‘Add New Landing Page’ button.

Add new SeedProd landing page

This brings you to the template screen, where you can select a page template. There are dozens of templates for different niches and purposes.

To choose a template, hover over it and click the ‘Checkmark’ icon. You can choose whichever template you like, but for this tutorial, we’ll be using the ‘Dinner Sales Page’ template.

Select landing page template

This brings up a popup where you can give your new menu page a name. You can also edit the URL of the page. We’re simply calling our page ‘Menu’.

Then, click the ‘Save and Start Editing the Page’ button.

Name landing page

Once you’ve done that, you’ll be taken to the page editor screen.

The right hand side of the page is the preview and can be fully customized. The left hand side of the page has different blocks and sections you can add to the page.

SeedProd landing page template example

First, click on the page logo.

This will bring up a menu on the left where you can upload your restaurant logo. To add a new logo, you can follow the same process as adding an image to WordPress.

Change menu logo

Next, you can change the navigation menu button to go back to your homepage. That way, when your visitors are done viewing the menu, they can return to your website.

Simply click on the navigation menu button, and then you can change the text and link in the left-hand menu.

Change menu navigation button

After that, you can delete the main content section.

Simply hover over the page headline and click on the ‘Delete Block’ icon.

Delete existing sections

Then, you can do the same for the image, text, and button elements.

Next, you can add a headline for the title of your menu by dragging the ‘Headline’ block over to your page.

Add menu headline

Like the other elements, you can change the text size, color, and font with the menu on the left.

After that, you can edit the existing food items and replace them with your own text and images.

First, click on the image and upload your own image with the menu on the left.

Add menu item image

Next, click on the current headline to enter your own text.

You can also change the text by clicking on it and adding a description.

Change menu item text

Once you’ve changed the headline and text, you can add a price for the item.

Simply drag the ‘Text’ element to your page and then customize the text with the left hand menu.

Add menu item price

Then, simply follow the same steps as above for the rest of the items on your restaurant menu.

You can customize all of the sections of the page template.

If you want to add another menu section with the same style, then hover over the element and click ‘Duplicate Row’.

Duplicate section

This will make a copy of the same row and add it directly beneath.

Feel free to continue making customizations to your restaurant menu. You can fully customize every part of the page, including colors, sizing, fonts, and more.

If you don’t want to add a photo for every item, then you can easily use a list block to add menu items.

Once you’re done creating your online restaurant menu, click the drop down arrow next to the ‘Save’ button and select ‘Publish’.

Publish menu live

Your new restaurant menu is now live for your visitors to see.

Now, you can add your restaurant menu to your navigation menu, and other areas of your WordPress blog.

WordPress restaurant menu

Method 2. Add a Restaurant Menu to WordPress with Food Menu

This method involves using the Food Menu – Restaurant Menu & Online Ordering plugin. This plugin lets you quickly create an online menu in WordPress.

It also integrates with WooCommerce, so you can give your visitors the option to place an online order.

First thing you need to do is install and activate the plugin. For more details, see our beginner’s guide on how to install a WordPress plugin.

Upon activation, navigate to Food Menu » Add Food.

Add new menu item

On this screen, you can enter your menu item name, description, and image.

After that, make sure to click the ‘Publish’ button to save your menu item.

Publish new menu item

To add more items to your menu, simply follow the same steps as above.

Once you’re finished adding items to your food menu, it’s time to add this menu to WordPress.

First, you need to go to Food Menu » ShortCode Generator, and then click the ‘Add New’ button.

Go to shortcode generator

Next, you can give your shortcode a title to help you remember the type of menu items you added.

Then, you can customize how you want your menu to display.

Name your menu shortcode

We will keep the default options, but you can customize how the menu displays with the settings in the ‘Layout’ section.

Here you can select the number of items to display per row.

Change shortcode layout

In the ‘Filtering’ tab, you can choose whether you want to display a simple menu or if you want to enable online ordering.

To turn on online ordering, simply select the ‘WooCommerce’ radio button. You can also control which items you want to display.

Shortcode filtering

If you’re planning on letting customers add food items to their carts and checkout, then you need to add your menu items as products in your WooCommerce store.

For more details on adding products, see our step by step guide on how to start an online store.

Next, you can customize the information that displays for each item by clicking on the ‘Field selection’ tab.

Field selection shortcode

As you check or uncheck the boxes, you can see a real time preview of what the changes will look like.

After that, you can change the appearance of your menu items by clicking the ‘Styling’ menu option.

Shortcode styling menu

Once you’re done customizing how your menu items display, make sure to click the ‘Publish’ button.

This won’t make your menu live on your site yet, but it will save the shortcode that we’ll add to your website below.

Publish menu shortcode

Now you need to create a page where your menu will display.

To do this, navigate to Pages » All Pages and then click ‘Add New’.

Add page for menu

After that, you can give your page a title. This will appear to your visitors, so you’ll want to name it something like ‘Menu’.

Then, click the ‘+’ icon to add a new block.

Add menu page block

Next, type ‘Menu’ into the search bar.

Then, select the ‘Food Menu’ block.

Select food menu block

After that, you need to select the shortcode you just created from the drop down menu.

This will insert your menu into your page.

Select menu shortcode

Then, click the ‘Publish’ or ‘Update’ button to make your menu live.

You can also add other elements to this page like text, a contact form, your Instagram feed, and more.

Publish new menu

Now when your visitors view your menu, they’ll be able to view items and even place an order if you added WooCommerce functionality.

No matter the screen size your menu is being viewed on, it will display your menu items perfectly.

WordPress menu example

We hoped this post helped you learn how to create an online restaurant menu in WordPress. You may also want to see our expert picks of the best HR payroll software for small business, or our comparison of the best business phone services for small business.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create an Online Restaurant Menu in WordPress (Step by Step) appeared first on WPBeginner.


August 25, 2021 at 04:00PM

Tuesday, August 24, 2021

How to Create a Short Link in WordPress (The Easy Way)

Do you want to create short links to your WordPress blog posts or pages?

Short links are useful for sharing in your emails, Facebook messages, and even text messages.

In this article, we will show you how to generate short links using a plugin, and how to add the ‘Get Shortlink’ button back to the classic WordPress editor.

How to Create a Short Link in WordPress

Why Create a Short Link in WordPress?

Sharing your web content on social media can build user engagement and bring new users to your website. But pasting in long links or URLs isn’t always the best way.

That’s because some social media platforms will limit the number of characters you can use. A shorter URL gives you extra space for more useful content, which can lead to more engagement and traffic to your WordPress website.

That’s why URL shortener services like Bitly and TinyURL were originally created. They take a long link and make it shorter so that it doesn’t take up as much space.

For example, if you’re using SEO-friendly URL structures, then you might have long URLs that look something like this:

https://ift.tt/2r6LY3v

Our short link for that post saves a lot of space:

http://wpbeg.in/b6xh7G

Note: We’re using a custom domain, wpbeg.in, for our short links, which is a bit more technical to set up and would require you to purchase another domain. We have a separate tutorial on how to create your own customized short URL.

In the past, WordPress made it easy to get a short link to your blog post or page. There was a Get Shortlink button located right next to the permalink area of the classic editor.

Get Shortlink Button in the Classic Editor

However, if you recently started your blog, then you will not see this feature on your WordPress site because it was removed after WordPress version 4.4. WordPress still creates the links, but the button has been removed.

Still, there are a few ways you can get short links for your WordPress posts and pages.

We’ll cover the best link shortener plugin, plus a couple of ways you can restore the ‘Get Shortlink’ button in the classic editor. Simply click the links below to jump straight to each option:

We’ll start with a method that works for everyone. The Pretty Links plugin doesn’t rely on the classic editor and will create its own short link out of any URL.

It works with all links, including pages outside of your blog or website. So, besides letting you share your own content, it’s also the perfect tool for shortening affiliate links.

To get started, you’ll need to install and activate the Pretty Links plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Note: There is a Pro version of Pretty Links with more powerful features like keyword auto-linking and link categories and tags, but for this tutorial we will be using the free version.

Once you activate the plugin, a Pretty Links section is added to your WordPress dashboard. To create your first short link, you need to go to the Pretty Links » Add Link page.

Next, you need to paste the original URL of the page you want to share into the Target URL text field. A short Pretty Link is automatically created, but you can customize it if you’d like to make it more readable.

Paste the Original URL Into Target URL

Once you’ve created a few short links, you may not remember what they are all for. So it’s a good idea to type in the title of the web page and consider writing some notes of anything you need to remember.

Fill in the Title and Notes

Once you have filled in the Pretty Links form, click the Update button to activate the short link.

Click the Update Button to Activate the Short Link

You will now see a list of all of your Pretty Links. To copy one to the clipboard, just click on the Copy icon at the right of the screen.

After that, you can paste it into any of your social media channels. Pretty Links will even keep track of how many clicks each link gets.

Copy the Short Link Using the Copy Icon

While pretty links have built-in analytics, you can further improve your analytics by connecting it with Google Analytics using the MonsterInsights plugins. For more details, see our step by step guide on how to properly set up Google Analytics in WordPress.

This is a simple method of adding back the Get Shortlink button to the classic editor.

First, you need to install and activate the Bring Back the Shortlink Button plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, this plugin will automatically add the Get Shortlink button to the classic editor. To check that it worked, just edit any of your posts.

The Get Shortlink Button is Added to the Classic Editor

When you click the Get Shortlink button, it will show you the WordPress Shortlink for your post or page. You can copy the link to the clipboard so you can share it with your audience in your emails and messages.

Copy the Short Link to Share It with Your Audience

This method is for more advanced users and uses code rather than a plugin. It adds the Shortlink button to the classic editor by adding a custom code snippet to your theme’s functions.php file.

We don’t recommend this method to inexperienced users because if you make a mistake, then it could break your website. Method 2 above is a simpler way to achieve the same result without needing to use code.

If this is your first time adding code to your WordPress files, then you should check out our guide on how to copy and paste code snippets in WordPress.

We’ll use the Code Snippets plugin mentioned in that guide, so you’ll need to install that first. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item labeled Snippets to your WordPress admin bar. Clicking on it will show you a list of all the custom code snippets you have saved on your site.

Go ahead and click on the Add New button to add your first custom code snippet in WordPress.

Click the Add New Button to Add Your First Custom Code Snippet in WordPress

This will bring you to the ‘Add New Snippet’ page.

You need to start by entering a title for your custom code snippet. Let’s call it ‘Short Link Button’. After you enter a title, simply copy and paste the code snippet below into the code box.

add_filter( 'get_shortlink', function( $shortlink ) {return $shortlink;} );

Copy and Paste the Code Snippet Into the Code Box

When you come across this snippet in the future, you may not remember what it’s for. So it’s a good idea to type something helpful in the description as a reminder.

Type Something Helpful in the Description

You can also assign tags to your code snippet. This will help you sort your code snippets by topic and functionality.

Finally, you need to click on the ‘Save Changes and Activate’ button. Once the snippet is activated, the Shortlink button will be added to the classic editor.

The Shortlink Button Will Be Added

We hope this article helped you learn how to create a short link in WordPress. You might also like to learn how to get a free email domain, or see our comparison of the best domain name registrars.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a Short Link in WordPress (The Easy Way) appeared first on WPBeginner.


August 24, 2021 at 05:00PM

Monday, August 23, 2021

How to Generate More Leads with Free Online Calculators (Pro Tip)

Do you want to generate more leads with free online calculators?

Online calculators are the hot new lead magnets. They’re used as lead generation tools by some of the best blogs in the world today, like Neil Patel and Michael Hyatt.

In this article, we’ll show you how you can create your own online calculator and start generating leads for your WordPress site.

How to generate more leads with free online calculators (pro tip)

Why Are Online Calculators Such Great Lead Generation Tools?

Online calculators are useful tools that solve a problem or help answer a question for your readers. To get results from the calculator, your readers will enter their email address.

These calculators are effective at generating leads and subscribers because they’re highly engaging and personalized.

That’s why here at WPBeginner we offer many free business tools like our business name generator and WordPress theme detector.

Online calculators can be used in any industry or niche. For example, you could create:

  • BMI calculator for a fitness website
  • Mortgage calculator for a real estate website
  • WooCommerce product calculator for your online store
  • Car payment calculator for a niche review site
    • The possibilities are endless.

      It’s easy to see why online calculators are quickly becoming one of the most powerful ways to grow your email list online.

      That being said, let’s show you how to create your very own online calculator to generate leads without writing any code.

      How to Create Online Calculators Without Any Code

      The easiest way to add online calculators to WordPress is using the Formidable Forms plugin. It’s the most advanced drag and drop form builder and best WordPress calculator plugin in the market.

      It makes it easy to build advanced online calculators without writing code.

      Formidable Forms has dozens of different templates you can use to quickly create calculators like a BMI calculator, savings and investment calculator, mortgage calculator, paycheck calculator, and much more.

      Formidable calculator example

      Plus, it integrates with the most popular email marketing services in the market like Constant Contact, Sendinblue, Drip, and more. Users who enter their email address in your online calculator will automatically be added to your email list.

      The first thing you need to do is install and activate the Formidable Forms plugin. For more details, see our guide on how to install a WordPress plugin.

      Upon activation, you’ll be asked to install Formidable Forms Lite, the free version of the plugin. The free plugin acts as the foundation for the advanced features of the Pro version.

      Once you’ve done that, you need to go to Formidable » Global Settings and then click the ‘Click to enter a license key manually’ link.

      Formidable license key manual link

      Then, paste your license key into the box and click the ‘Save License’ button.

      You can find your license key by logging in to your account on the Formidable Forms website.

      Enter formidable license key

      Once you’re done, you’ll see a license activation success message. Now you can refresh the page to load the premium features of the plugin.

      After that, you can create your first calculator by going to Formidable » Forms and then click ‘Add New’.

      Add new Formidable calculator

      This will bring up a list of available form templates to choose from.

      In the search box, type ‘Calculator’ and select the ‘Calculator’ category.

      Select calculator category

      This brings up another drop down list where you can choose the calculator template you’d like to start with.

      You’ll notice there are dozens of templates across a range of different niches.

      To select a calculator template, hover over it and click the ‘+’ icon. You can also click the ‘Eye’ icon to preview the calculator.

      For this tutorial, we’ll select the ‘Compound Interest Calculator’ template, but you can choose the template that best suits your WordPress website.

      Select compound interest calculator

      This brings up a popup where you can name your form and enter a description to help you remember what it’s for.

      Then, click ‘Create’.

      Name and describe calculator form

      The plugin will load the Formidable Forms editor interface with the calculator template you selected.

      From here, you can simply point and click to customize each form field as needed. For example, you can change the field label and number range for the ‘Initial Amount’ field.

      Customize calculator field example

      You can also add any new field to your calculator by clicking the field on the left and dragging it to your calculator on the right.

      To add an email address field to your calculator, simply drag the ‘Email’ field to the bottom of your calculator.

      Add email field to calculator

      After that, click on the ‘Email’ field to bring up the options menu.

      You can leave the default email settings, but make sure that you check the ‘Required’ box. This makes it so your visitors must enter their email address to get the results from the calculator.

      Check email required box

      You can continue to customize your calculator by changing the values for the fields and even adding new calculator fields.

      Once you’re finished customizing your calculator, make sure to click the ‘Update’ or ‘Publish’ button to save your calculator.

      Publish or update calculator

      With your lead generation calculator created, it’s time to add it to an existing page or create a new page.

      To create a separate page to display your new calculator, navigate to Pages » All Pages and then click ‘Add New’.

      Add new page for calculator

      Then enter a title for your calculator page.

      To add your calculator, click the ‘+’ icon to add a new page block.

      Name and add block

      Type ‘Calculator’ into the search box to find the correct block.

      Then select the ‘Calculator Form’ option.

      Add calculator form block

      This will automatically insert the calculator form block into your website.

      Next, select the calculator you just created from the drop down list.

      Select calculator from drop down

      You can continue to edit your calculator page by adding text, images, a description of the calculator, and more.

      If you’re ready to publish your calculator page, then click the ‘Publish’ or ‘Update’ button in the right hand corner of the page.

      Publish calculator live

      Your new calculator page is now live for your visitors.

      You can start driving traffic to this page to get more subscribers and leads for your small business website.

      Compound interest calculator example

      You can always further combine the power of lead calculators by adding them to exit-intent popups from OptinMonster, using them inside your WordPress membership site or online course, and more.

      We hope this article helped you learn how to generate more leads with online calculators. You may also want to see our guide on how to create a free business email address and our expert picks of the must have WordPress plugins and tools for business websites.

      If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

      The post How to Generate More Leads with Free Online Calculators (Pro Tip) appeared first on WPBeginner.


      August 23, 2021 at 06:10PM