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 Comment

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt

Start typing and press Enter to search