Any guides on creating custom admin pages?

Question

I basically want to create a table (preferably AJAXified) that lets the user enter a line of information, and be able to add new lines of information, and delete selected ones.

I've found this post and this post. The design side looks very straightforward, but I want to know about the functionality. How do I go about adding the field contents to the database and summoning them back up? How do I get that page "plugged in" to Wordpress as a whole? I have literally no idea where to start.

I'm coming from the perspective of someone who's confident in HTML & CSS, and fairly so with JS/jQuery, but basically just hacks up PHP code that he finds around.

Any help would be appreciated, even up to telling me that it's beyond me right now, and to go play with X plugin. FWIW, I was considering doing this with a custom post type, or the Magic Fields plugin, but I wanted a more user-friendly experience.

Many thanks!

Answer 1

I pretty much started in the same place as you a while back, and have created something similar. Here's what I think you need to know.

1) Work out how to create your basic hello world first and foremost. A simple plugin will consist of a few comments at the top of a PHP file dropped into your plugins directory. Notice the variable calling the class which gets it moving. Constructor of the class calls add_top_level_menu, when this is clicked on (see $function variable) the display_page() function gets kicked off starting to build out your page.

<?php
/*
 Plugin Name: Your plugin name
 Description: Description
 Version: 1.0
 Author: Your Name
 Author URI: http://yourweb.com
*/
$myplugvariable = new yourpluginname();
class yourpluginname
{
  function __construct(){
  add_action( 'admin_menu', array( &$this, 'add_top_level_menu' ) );
  }

  function add_admin_scripts(){
  //adds javavascript files for this plugin.
   wp_enqueue_script('my-script-name', WP_PLUGIN_URL . '/' . dirname(plugin_basename(__FILE__)) . '/js/javascript.js', array('jquery'), '1.0');
   wp_localize_script('my-script-name', 'MyScriptAjax', array('ajaxUrl' => admin_url('admin-ajax.php')));
  }

   function add_top_level_menu()
   {
        // Settings for the function call below
        $page_title = 'Plugin Name';
        $menu_title = 'Plugin Name';
        $menu_slug = 'plugin-name';
        $function = array( &$this, 'display_page' );
        $icon_url = NULL;
        $position = '';

        // Creates a top level admin menu - this kicks off the 'display_page()' function to build the page
        $page = add_menu_page($page_title, $menu_title, $this->capability, $menu_slug, $function, $icon_url, 10);

        // Adds an additional sub menu page to the above menu - if we add this, we end up with 2 sub menu pages (the main pages is then in sub menu. But if we omit this, we have no sub menu
        // This has been left in incase we want to add an additional page here soon
        //add_submenu_page( $menu_slug, $page_title, $page_title, $capability, $menu_slug . '_sub_menu_page', $function );


    }

    function display_page()
    {
        if (!current_user_can($this->capability ))
        wp_die(__('You do not have sufficient permissions to access this page.'));
      //here comes the HTML to build the page in the admin.
      echo('HELLO WORLD');

    }


}

?>

2) Once you've created internal functions to return your data, whatever that may be. (use global wordpress data functions, e.g. $wpdb->get_results($sql).

3) AJAX inside the admin is a bit different to how you normally use it. All wordpress AJAX calls hook into admin-ajax.php. I found this: http://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress/#js-global quite good at explaining things.

4) If you are creating tables: something like the below will do the work for you. search for dbDelta in the codex.

function plugin_install() 
    {
    global $wpdb;
    $table_name_prefix = "plugin-name";
    $table_name = $wpdb->prefix . "plugin_name"; 
    $sql = "CREATE TABLE " . $table_name . " (
         id mediumint(9) NOT NULL AUTO_INCREMENT,
         post_id mediumint(9) NOT NULL,
         score mediumint(9) NOT NULL
    );";
    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
    }

Answer 2

Hey there, I would suggest WPAlchemy MetaBoxes. Very easy to use, and it should help with what you are after.

However keep in mind it's not yet a plugin, so you will not have a 'one click setup' to begin.

http://www.farinspace.com/wpalchemy-metabox/