Tutorial: How to use Beamer as a WordPress Plugin?

6566
Mariano Xerez
Apr 11, 2018

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. You can change the name of the menu item if you like.
  4. 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. Choose a class name and fill the CSS Classes field. Make sure is a unique name without any uncommon characters. Save your changes.
  4. Go to Settings > Beamer Settings and fill the selector field with your chosen class name with a dot at the beginning (e.g. for the class beamerLaunch, write .beamerLaunch). Save your changes and you’ll be ready to go.

Method 3 (select an existing element by id)

This method is very similar to the first two but instead of a CSS Class it uses the automatically generated menu item id (e.g. menu-item-1010):

  1. Go to Appearance > Menus and create a Menu Item. Leave a # in place of the URL (this will avoid linking to anywhere else). Save your changes.
  2. Go to the menu in your website (frontend) and over the new item you just created right-click and select Inspect (Google Chrome) or Inspect Element (Safari, Fire). You’ll see something like this.
    ...
    <ul id="primary-menu">
    	<li id="menu-item-1001">
    		<a href="https://www.getbeamer.com/">Leia</a>
    	</li>
    	<li id="menu-item-1208">
    		<a href="https://www.getbeamer.com/pricing">Luke</a>
    	</li>
    	<li id="menu-item-7110">
    		<a href="https://www.getbeamer.com/blog">Han</a>
    	</li>
    	<li id="menu-item-9810">
    		<a href="https://www.getbeamer.com/docs">Chewie</a>
    	</li>
    	<li id="menu-item-1201">
    		<a href="#">R2</a>
    	</li>						
    </ul>
    ...
    
  3. Search for the id value (something like this id="menu-item-2042") of the element you want to become your Beamer  button.
  4. Copy that value and paste it in the selector field in Beamer Settings at Settings > Beamer Settings.
  5. 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.
  4. You can add filters, hide Beamer in mobile or in a particular type of page (including front, posts, pages or archives).

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.

Keep your users in the know.