Tutorials for Admin Page Framework

Learn to Use Admin Page Framework

Learn the easiest way to create WordPress administration pages with Admin Page Framework! With it, you can even create in-page tabs, forms, meta boxes, custom post types, and widgets etc.

In each tutorial, you’ll write a small plugin using the framework. Each tutorial focuses on teaching a few new main features so you will hardly get lost. In the end, you’ll see how simple and easy to write a plugin with the framework.

Tutorial Index

Upcoming Tutorials

Create Fields in Taxonomy Definition Page
Create a Widget
Add Tabs to Another Plugin’s Page
Modify Another Plugin’s Page
Export and Import Option Settings
Add Links to Plugin Listing Table
Set Custom Text in the Footer of the Page
Create Your Own Field Type

More tutorials will come soon so stay tuned!

Don’t find what you are Looking for?

In case you cannot find what you want to do, leave your tutorial requests in the below comment section! If you get stuck, ask questions in the support forum.

22 thoughts on “Tutorials for Admin Page Framework”

Marek says:

July 11, 2023 at 10:24 pm

The fact that WordPress does not have something like this in the core is a shame.
Auttomatic toys with gutemberg but still requires us to write ugly html to have a single plugin option.
This is beyond stupid. Thanks for providing an alternative to their dumbness.

Reply
Poulhès says:

December 21, 2020 at 3:46 am

Hello,
thanks very much for your post, on my wamp server Version 3.2.3 – 64bit, when I load tutorial N°8, the N°7 one doesn’nt work any more (blank sheet, no error) …
exept that everything works fine
Regards

Reply
Tom says:

March 12, 2019 at 12:56 pm

Thanks for sharing this post,
is very helpful article.

Reply
Rodrigo Mego says:

May 1, 2017 at 9:02 am

Hey Michael,

Any news about the other tutorials? I’m particularly interested in making widgets with your framework.

Cheers,

Rodrigo.

Reply
1. Michael Uno says:
  
  May 2, 2017 at 5:58 am
  
  Hi Rodrigo,
  
  I’ll see if I can make some time for it. Thanks for asking.
  
  In the meantime, you should try the example in the documentation. If you have already created some admin pages with the framework, it should be strait forward.
  
  Hope it helps.
  
  Reply
  1. Rodrigo Mego says:
    
    May 2, 2017 at 11:36 pm
    
    Thanks a lot, Michael.
    
    I tried the example you provided in a bare bones plugin, but I just get an error message:
    
    ( ! ) Warning: Declaration of APFDoc_ExampleWidget::load($oAdminWidget) should be compatible with AdminPageFramework_Widget_Controller::load() in /app/public/wp-content/plugins/my-plugin/my-plugin.php on line 10
    
    Besides the example code, there’s just the framework’s include:
    
    include( dirname( __FILE__ ) . ‘/library/admin-page-framework/admin-page-framework.php’ );
    if ( ! class_exists( ‘AdminPageFramework’ ) ) {
    return;
    }
    
    Reply

Hi Michael,
I’m trying to save a timestamp with the widget every time the widget is updated (or when the save button is pressed). I’d like it to change with every save.
What is the best way to store this parameter and then read it?
Thank you in advance!

Hi Eve,

You should use the validate() method within your widget class extending the APF widget factory class. Inside the method, set the timestamp in the returning input array.

public function validate( $aInputs, $aStoredInputs, $oAdminWidget ) {
    // set the value with your desired key.
    $aInputs[ 'timestamp' ] = time();
    // or you can store the data in your desired location
    update_option( 'your_option_key', time() );
    return $aInputs;
}

public function validate( $aInputs, $aStoredInputs, $oAdminWidget ) {

// set the value with your desired key.

$aInputs[ 'timestamp' ] = time();

// or you can store the data in your desired location

update_option( 'your_option_key', time() );

return $aInputs;

}

To read it in the widget output method in the widget class,

public function content( $sContent, $aArguments, $aFormData ) {
    return 'saved time: ' . $aFormData[ 'timestamp' ];
}

public function content( $sContent, $aArguments, $aFormData ) {

return 'saved time: ' . $aFormData[ 'timestamp' ];

}

Or if you set it in the options table with update_option(),

$time = get_option( 'your_option_key' );

$time = get_option( 'your_option_key' );

Nihad Nagi says:

August 30, 2016 at 9:52 pm

Hi Mic,
This seems promising but i think the following is needed from your side on this one:
1-The download from the getting started should download the entire directory at Git, not only the library, and with the fields entered you should have a working barebone plugin similar to Devin Vinson boilerplate.
2-The entire files hierarchy should be described in details.
Thanks for your effort on this one.

Reply
1. Michael Uno says:
  
  August 31, 2016 at 10:27 pm
  
  Hi,
  
  Can you post suggestions on the GitHub issue tracker?
  
  Thank you.
  
  Reply
آموزش PHP says:

July 1, 2016 at 4:23 pm

Thanks for sharing nice tutorials.

Reply
Derek Brown says:

April 28, 2016 at 12:57 am

Greetings. Hope I can get some quick assistance here. Kind of time critical. Would be happy to leave a donation If I can get this to work. So I have create a form input for profile pic

array( // Getting A Custom About Us Page Image 'field_id' => 'consultant-profile-pic', 'type' => 'image', 'title' => __( 'About Us Page Image', 'admin-page-framework-loader' ), 'description' => __( 'Set A Custom About Me Page Image', 'admin-page-framework-loader' ), ),

Now I need to retrieve that URL so that I can place it on the profile page (front end). I have been able to create shortcodes for all of the text fields I have created within this form, but the “image” field type seems to just come back blank.

// Add Shortcode Consultants Profile pic add_shortcode( 'consultant_profile_pic' , 'fn_get_consultant_pic' ); function fn_get_consultant_pic(){ $data = get_option( 'DB_Custom_Ident', array() ); $cbtconsultantpic = customizemymcc_AdminPageFramework::getOption( 'DB_Custom_Ident', 'consultant-profile-pic', 'default' ); return $cbtconsultantpic; }

Suggestions?

Reply
1. Michael Uno says:
  
  April 28, 2016 at 4:40 pm
  
  Hi,
  
  Is the set URL in the properly displayed in the form field? You set an image in the image input field and save the form. Then when the next page loads, the set image URL should be filled. If you see an empty input for the image field, it means the form failed to save/retrieve the data. If you see the set URL in the field, then you should be able to retrieve the data with the get_option() function.
  
  I’d suggest you try var_dump the $data variable. Then check if you can see the set URL in that output. You may want to use AdminPageFramework_Debug::log( $data ); instead so that the full contents will be dumped in a file in the wp-content directory. To use that you need to enable WP_DEBUG in wp-config.php.
  
  Reply
Blair2004 says:

October 4, 2014 at 7:27 pm

i’m waiting for upcomings tutorials

Reply
1. Michael Uno says:
  
  October 5, 2014 at 6:26 am
  
  All right! Thanks for the feedback.
  
  Reply
  1. Blair2004 says:
    
    October 13, 2014 at 12:57 pm
    
    waiting for custom post types tutorials
    
    Reply
    1. Michael Uno says:
      
      December 1, 2014 at 12:32 pm
      
      Ops, I’ve missed your comment. I’ll write one.
      
      Reply
    2. Michael Uno says:
      
      December 23, 2014 at 5:09 pm
      
      @Blair2004,
      
      I’ve posted new tutorial articles including custom post types. Hope it helps! Sorry for taking so long to write them.
      
      Reply
Joaquín González says:

September 22, 2013 at 12:40 am

I think it would be great demonstration on how to upload images using the admin panel framework.

Is there any way to link the uploaded images to a category or tag?

Thanks.

Reply
1. Michael Uno says:
  
  September 22, 2013 at 7:58 am
  
  Hi, just posted a new tutorial for your request! http:/admin-page-framework.michaeluno.jp/admin-page-framework/tutorials/4-upload-images/
  
  Regarding the question about linking the uploaded images to a taxonomy, I don’t quite get what you mean. The uploaded image is stored in the media library ( Media -> Library ). By default, they don’t have a taxonomy.
  
  Reply
  1. Rick Baskett says:
    
    February 21, 2015 at 5:59 am
    
    On a similar note I just ran into this myself.. it would be nice to be able to save the attachment_id instead of the url. I had to create a function to get the attachment_id from the URL when trying to view the images on the customer side. On a different note.. what happened to your donate button!? 🙂
    
    Reply
    1. Michael Uno says:
      
      February 22, 2015 at 2:46 am
      
      Hey Rick,
      
      Thanks for the donation!
      
      To save the attachment id of an uploaded picture, it should be already possible with the attributes_to_store argument of the image field type. Check out the example in the demo via Dashboard -> Built-in Field Types -> Demo -> Files -> Save Image Attributes.
      
      You would set it like this.
      
      'attributes_to_store' => array( 'id', ),
      
      1
      2
      3
      
      'attributes_to_store' => array( 'id', ),
      
      If you need help with that, post a new topic on the forum.
      
      Reply