Tutorial: How to use Beamer as a WordPress Plugin?

6566
Mariano Xerez
Apr 11, 2018 | Last Updated Mar 11, 2020

If you use WordPress for your blogging needs or as a CMS and you don’t have coding skills or time, don’t worry. You can still install Beamer in a few easy steps. In this guide, you’ll learn how to connect your WordPress Site with your Beamer account in no time.

*After installing our plugin you should check out this tutorial explaining how to automatically publish WordPress posts on Beamer.

Warning: Before we start you’ll need a Beamer account, a WordPress installation and Administrator privileges on that site. If you don’t have one, get a Beamer account here

How to install Beamer as a WordPress plugin?

Method 1 (quick and easy implementation – recommended)

  1. Go to your WordPress Admin Dashboard and go to Plugins > Add New.
  2. Search for Beamer, select, install and activate it.
  3. Go to Settings > Beamer Settings and add the required fields including your product ID from your Beamer Account. If you don’t have one, get it here for free.
    Important: Your product ID is the code that appears in the top bar of your Beamer Dashboard

Method 2 (manual)

  1. Download the Beamer WordPress Plugin 
  2. Go to your WordPress Admin Dashboard and go to Plugins > Add New.
  3. Click Upload Plugin at the top of the page. Next to the title.
  4. Select the file beamer.zip and click Install Now.
  5. Once the plugin is installed click Activate Plugin.
  6. Go to Settings > Beamer Settings and add the required fields including your product ID from your Beamer Account. If you don’t have one, get it here for free.
    Important: Your product ID is the code that appears in the top bar of your Beamer Dashboard

  7. Presto! Enjoy using Beamer.
  8. Remember you can change the position of the button either with the Button Position parameter or by adding a value to the top, left, right or bottom parameter in Settings > Beamer Settings.

How to add Beamer as a menu item?

Method 1 (quick and easy implementation – recommended)

If you want to add Beamer as a menu item instead of a floating button, follow these steps:

  1. Go to Appearance > Menus and select the Menu you want to edit in the top drop-down.
  2. Select Beamer from the list of menu item categories. Click on Beamer Trigger and then on Add to Menu.
  3. If the menu item doesn’t appear by default please click on Screen Options at the top of the screen and make sure Beamer is enabled.
  4. You can change the name of the menu item if you like.
  5. Don’t forget to save your changes before closing the page. And voilà.

Method 2 (selecting an existing item by CSS class)

This method is very similar to the first but lets you use an element already present in your Menu using a custom CSS Class:

  1. Go to Appearance > Menus and create a Menu Item as a Custom Link or choose one that already exists. Leave a # in place of the URL (that will avoid linking to anywhere else). 
  2. Open that menu item tab and search for the field CSS Classes. If you don’t see it you can activate it clicking on Screen Options in the top right corner of the page.
  3. Go to the CSS Classes field and write beamerTrigger as the class. Beamer will detect that element’s class and will transform it into a trigger like the image below. Enjoy.

How to customize your plugin?

  1. Go to Settings > Beamer Settings.
  2. You can change the position of the alert bubble adding a value to top and right.
  3. You may want to change the position of the floating button with button position or change the position of the Beamer panel with the display parameter.

How to show or hide your Beamer widget?

You can select in which pages to display the widget by using filters. To do so go your WordPress dashboard, and then to Settings > Beamer Settings. Scroll down to the Filter Options section.

  1. Use the selector to pick a mode. If you pick not, the widget will be shown on all pages with the exception of the specified by the filters. If you pick only, the widget will be shown only in the specified pages.
  2. Select your filters. You can pick among many options or combine them to get even more specific results.
  3. Use the checkboxes to select filters like home page, front page, posts, pages, archives and mobile.
  4. You can also write your own custom post types or specify posts by ID.
  5. Once you have finished selecting your filters don’t forget to save your settings.

Other options.

Maybe you are a little code-savvy and you just want a quick way to add your Beamer script to your WordPress site but you don’t know where to put it. You could use plugins like Scripts n Styles or Header and Footer scripts.

You’ll find our tutorial here.

More information.

If you need more information on the inner workings of the Beamer script, go ahead to our Documentation page.