Glisser Elements integration with Wordpress
This guide will help you create a simple Wordpress plugin to make Glisser Elements available in your project.
Creating a Wordpress plugin
Assuming you already have a React application with Elements, go inside the plugins folder in Wordpress (usually /wp-content/plugins) and create a new folder called glisser-elements. This can be any name but it’s preferable if it’s a clear and self-explanatory name. Once inside the folder, you need to create a PHP file with the same name as the parent folder. This file will connect the React application containing Glisser Elements with your Wordpress instance. The following is a template that can be used as a reference:
<?php
/**
* Plugin Name: glisser-elements-app
* Plugin URI: https://docs.glisser.com
* Description: Glisser Elements App
* Version: 0.1
* Text Domain: glisser-elements-app
* Author: Glisser
* Author URI: https://glisser.com
*/
// Register resources
function glisser_elements_app_init() {
$path = "/glisser-elements-app/build/static";
wp_register_script("glisser_elements_app_js", plugins_url($path."/js/main.js", __FILE__), array(), "1.0", false);
}
add_action( 'init', 'glisser_elements_app_init' );
// Short code reference
function glisser_elements_app() {
wp_enqueue_script("glisser_elements_app_js", '', '', '1.0', true);
return "<div id=\"glisser_elements_app\"></div>";
}
add_shortcode('glisser_elements_app', 'glisser_elements_app');
In the recently created plugin folder, paste the React project folder or create your React application. Once it’s built, update the file where it points to the Javascript entry point file (in the case above, the /js/main.js). Usually a React application uses root ID to append the DOM, so make sure the name used in your app mirrors the ID used in the plugin PHP file (in the case above it renders a <div> with an ID glisser_elements_app).
With the React application and the plugin PHP file, upload/push/deploy the newly created plugin folder to your server. Remember to delete the node_modules folder from your React application before start the uploading process as it going to be an unnecessary wait and it’s not required.
Adding the Glisser Elements to your page
With the plugin installed, go to the plugins page and activate the recently uploaded plugin. Once it’s active, go to the page where you wish the Glisser Elements will be loaded and add a short code. In input, add [glisser_elements_app].
After saving and publishing the page, you should see the Glisser Element from your React application rendered in the page.
Support
If you have any technical questions, please post it here in this forum and we will be happy to answer your questions as soon as possible.