Skip to main content

Creating Your First Plugin

In this tutorial, we will walk you through the steps in creating your first plugin using the plugin editor. The plugin is a simple "Hello World" plugin to showcase the fundamental components of a forum plugin.

Initial Setup​

In your forums plugins list page, click on the fab to bring up a dialog with three options to add a new plugin to your forum. Select New Plugin from the choices and fill in the following fields for your first plugin.

  • Name - Name of your plugin
  • Description - A brief description of your plugin

Once those are filled in click on Create Plugin. This will take you to your forums plugin editor. There we will add the necessary components to build your first plugin.

Adding Components​

This tutorial requires you have a working knowledge of HTML, CSS, and JavaScript. We recommend getting familiar with the plugin editor interface to follow these next steps.

Add a Header Component​

In the Add Component dialog, select the Global Header/Footer component. Add the following button HTML in the text area of the header tab.

<button id='hello-world'>Click me!</button>

Save your changes. When you visit your forum homepage you should see an unstyled button that does not do anything yet. Let's add some style to the button in the next step.

Add a CSS Component​

In the same dialog as the previous step, select the CSS component. Add the following CSS.

#hello-world {
    max-width: 100px;
    align-self: center;
    color: white;
    background-color: #42b0ef;
}

As an added example, let's also make the forums background color a lighter shade of blue. Add the following CSS in the same component.

body {
    background-color: #c6eaff;
}

Save your changes. Refresh the homepage. You should see the button with a light blue background, centered, and the forum background a softer blue.

Add a JavaScript Component​

Now let's make our newly styled button perform an action. Following tradition, this button will display a dialog with the title 'My first plugin' and the text 'Hello world!' in the dialog content area. In the Add Component dialog, select the JavaScript component and add the following JavaScript.

window.addEventListener('DOMContentLoaded', () => {
    document.getElementById('hello-world').addEventListener('click', () => {
        pb.dialog({
            id: 'my-first-plugin',
            title: 'My First Plugin',
            html: 'Hello world!',
        });
    });
});

Read more about our pb object methods in the Javascript API.

Adding a UI Page​

In the sidebar, click on UI Pages to reveal the Add UI Page button to bring up a dialog. Fill in the name field and click add. This will add the new page to the plugins settings page. The editor will then open a UI page tab in its panel and present you with a bar containing various elements to build your plugins UI page.

Adding UI Page Elements​

With the newly created UI page open in an editor panel, add a Title Bar element, a Plain Text element, and a Text input element. You can reorder these elements by hovering over the element icon and dragging in the desired order -- this will update the element order in the UI page. Fill in the values according to the list below.

  • Title Bar - My first plugin
  • Plain Text - A brief description of this page
  • Text
    • Text Field Title - Fill in your name
    • Description - Shows your name in the button

For the last field, Text, a variable icon will appear in the top right of each panel that has pages allowed for custom plugin variable insertion. Click on the variable to bring a dropdown menu of all the plugin variables available. You will see the Variable ID name of the Text input you just added. Bring the Global Header/Footer component tab into focus and delete the string value for the title key in the dialog parameters. With the cursor still on the same line, bring up the previously mentioned variable menu and click on the variable ID from the Text input you added. The new button HTML should now be:

<button id='hello-world'>$[plugin.settings.variable_id]</button>
Note

variable_id is the value from the Variable ID input in the Text input element.

Now go back to your list of installed plugins, click on your plugin name and visit the Manage Plugin page. You will see an About page and your newly added UI page as well. In the added UI page, fill in the Text field and save your changes. Refresh the homepage. The button text should now be updated with your inputted value.

Congratulations! You have created your first fully functioning plugin!

Next Steps​

To recap, in this tutorial we:

  • Created a new plugin for the forum
  • Added a header component that will display a button on every page of the forum
  • Added a CSS component that styles the button as well as the forum background
  • Added a JavaScript component, making the button open a built-in dialog using the ProBoards JavaScript API
tip

To continue on your learning experience, you could try your hand at making the following:

  • A plugin that adds your own copyright to the footer of all pages
  • A plugin that adds a clock to the forum header
  • A plugin that turns categories into collapsible categories on click
  • A plugin that stores some data from the user, then displays it, by using Plugin Keys
  • Explore the ProBoards JavaScript API
  • Explore the ProBoards Plugin Library