1

I am creating a wordpress plugin that has it's own UI. It looks like a standard web application, so everything that is done within the plugin is handled in this UI instead of integrating it with the WP admin area. My issue seems to be that I can't get it to load as a separate page, I can only get it to load in a page created in the admin area with the UI embedded in the content block. When I add it to the menu like this:

// Add plugin UI submenu item
add_submenu_page(
    'myPlugin', 'myPlugin WP', __('myPlugin UI', 'myPlugin'),
    $capability, 'myPlugin-ui', 'myPlugin_router'
);

And have it accessing the page as such:

    function myPlugin_router() {

        // Get current screen details
        $screen = get_current_screen();

    if(strpos($screen->base, 'myPlugin-ui') !== false) {
            include(DS_ROOT_PATH.'/views/myPlugin-ui.php');

    }
}

Is this because I am using "include" to add it, so it is loading it as a template?

I am also planning on using this UI the same way wordpress admin does, and load separate pages inside of the content area of the UI, exactly the way WP is doing it to my UI. So it uses templates. Would I just use include like above to do so?

4
  • You want to create a complete page for your plugin inside wp-admin without any of WordPress template elements such as header, left menu, footer ?
    – Shazzad
    Jan 9, 2014 at 22:09
  • that's how admin screens work, this is not unexpected or incorrect behavior.
    – Milo
    Jan 9, 2014 at 22:23
  • @shazzard Yes that's right. I want for it to be accessed from the admin, as a seperate page instead of being loaded with the admin sidebar. header, footer. I want to click the link and load my UI as it's own page apart from the admin UI. Jan 10, 2014 at 5:39
  • @Milo Yes I know, I am trying to figure out how to avoid this. Jan 10, 2014 at 5:39

1 Answer 1

2

I'll preface this by saying I think it's a really bad idea, but you could circumvent the admin UI by hooking an action that happens after things are initialized, but before any output occurs:

function my_admin_ui(){
    if( isset( $_GET['page'] )
        && 'myPlugin-ui' == $_GET['page'] ){
            include( plugin_dir_path( __FILE__ ) . 'views/myPlugin-ui.php' );
            exit;
    }
}
add_action( 'admin_init', 'my_admin_ui', 999 );
5
  • Thanks for the help, the reason I am doing this is because I have a special interface with a drag and drop editor that would be way to inconvenient in the wp admin area, users can switch between an iframe of the website to drop onto, or the content editor. It really wouldn't work too well in the wp_admin, the new UI I created is perfect for it. Jan 10, 2014 at 20:04
  • I have seen this done many of times on point and click site builder plugins, my plugin isn't a site builder but it still requires to drag and drop into elements on the site with a live preview. I looked through many sitebuilder plugins that have their own live preview and custom ui to point and click edit the site. I have only seen people adding the pages the same way as I am in OP, so I must be missing something.. With this solution I am just trying to figure out a way to load the css and js for the plugins UI, since with this I can't load it in wp_admin. Do you have any suggestions? Jan 10, 2014 at 20:07
  • if you've seen an example where you can switch between the admin UI and some other full-screen UI without reloading the page, then that's just simply overlaying an element on top of everything else via z-index and absolute positioning.
    – Milo
    Jan 10, 2014 at 20:20
  • also, the solution above does still require you add a menu or submenu page, as that's how $_GET['page'] gets set to your plugin slug, allowing you to check if your plugin page was requested. if you want to emulate what you've seen another plugin accomplish, just look at its code.
    – Milo
    Jan 10, 2014 at 20:23
  • You were right, alot of them just add a wrapper overtop of the admin screen. This makes sense, and seems the easiest approach. Thanks. Jan 13, 2014 at 18:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.