Using LiveCode inside the WordPress backend

Recently I have had a couple of questions about being able to use LiveCode and other languages/frameworks from inside the WordPress backend. Is this even possible or is there a work around.

The advantage of doing this for the developer is that they can use a programming language of their choice to build tools and services and still deliver a solution that appears as part of the WordPress environment. The user would not even notice that a different programming language is being used as all they are seeing is a seamless WordPress experience.

The problem though is that you cannot mix languages – PHP can only run PHP and LiveCode can only run LiveCode, you cannot mix LiveCode and PHP.

After thinking about this for a bit, our solution is very simple and low tech (who does not like simple solutions). Welcome the often overlooked <iframe>. By creating a very simple WordPress plugin, you can quickly add menu items/pages that will load external scripts into an iframe, giving an almost seamless experience.

Here is an example of such a plugin. Please note that I have not included any security features in this example – but the must not be forgotten about.

<?php
/*
Plugin Name: LiveCodeMenu
Plugin URI: http://activethought.net
Description: Add LiveCode pages to the WordPress Admin area
Author: Simon Smith
Author URI: http://activethought.net
*/

// WordPress hook for adding admin menus
 
 add_action( 'admin_menu', 'my_admin_menu' );

// Action function for above hook

function my_admin_menu() {

// Add a menu under the options menu
 add_options_page(__('LiveCode Settings','lc-menu-test'), __('LiveCode Settings','lc-menu-test'), 'manage_options', 'lcsettings', 'lc_settings_page');

// Add a menu under the options menu
 add_management_page( __('LiveCode Tools','lc-menu-test'), __('LiveCode Tools','lc-menu-test'), 'manage_options', 'lctools', 'lc_tools_page');

// Add a top-level menu
 add_menu_page(__('LiveCode Toplevel','lc-menu-test'), __('LiveCode Toplevel','lc-menu-test'), 'manage_options', 'lc-top-level-handle', 'lc_toplevel_page' );
 

add_submenu_page('lc-top-level-handle', __('LiveCode Sublevel','lc-menu-test'), __('LiveCode Sublevel','lc-menu-test'), 'manage_options', 'sub-page', 'lc_sublevel_page');

}

function lc_settings_page() {
 echo "<h2>" . __( 'LiveCode - Settings', 'lc-menu-test' ) . "</h2>";
 echo '<iframe src="/livecode/my-livecode-script.lc" width="100%" height="100%"></iframe>';
}

function lc_tools_page() {
 echo "<h2>" . __( 'LiveCode - Tools', 'lc-menu-test' ) . "</h2>";
 echo '<iframe src="/livecode/my-livecode-script.lc" width="100%" height="100%"></iframe>';
}

function lc_toplevel_page() {
 echo "<h2>" . __( 'LiveCode - Top Level Page', 'lc-menu-test' ) . "</h2>";
 echo '<iframe src="/livecode/my-livecode-script.lc" width="100%" height="100%"></iframe>';
}

function lc_sublevel_page() {
 echo "<h2>" . __( 'LiveCode - Top Level Page', 'lc-menu-test' ) . "</h2>";
 echo '<iframe src="/livecode/my-livecode-script.lc" width="100%" height="100%"></iframe>';
}

?>

Menu links can be added into a number of locations including:

  • add_posts_page - adds a menu item under posts
  • add_pages_page – adds a menu item under pages
  • add_media_page – adds a menu item under media 
  • add_links_page – adds a menu item under links
  • add_comments_page – adds a menu item under comment
  • add_theme_page - adds a menu item under appearance
  • add_plugin_page - adds a menu item under plugins
  • add_users_page - adds a menu item under users
  • add_management_page - adds a menu item under tools 
  • add_options_page - adds a menu item under settings
  • add_submenu_page – creates a sub menu link under a top level link

Top level pages can also include an optional icon and also a position in the side menu and based on the above example, it would look something like this:

add_menu_page(__('LiveCode Toplevel','lc-menu-test'), __('LiveCode Toplevel','lc-menu-test'), 'manage_options', 'mt-top-level-handle', 'lc_toplevel_page', 'dashicons-smiley', 6 );

For a list of available dashboard icons, you can take look at https://developer.wordpress.org/resource/dashicons/. You could also use svg images if you wanted a custom menu link, https://gelwp.com/articles/adding-a-base64-image-as-an-admin-menu-icon/ has more information on how to do this.

You can read more about creating menus here, https://codex.wordpress.org/Administration_Menus

Download the example plugin

Leave a Reply