wpadmin.bracketspace.comWP-Admin Reference – Rreference elements from wp-admin

Metaboxes Buttons Tables Tabs Post List Spinners Notices Counter 2 Dashicons Credits CollapseBracketSpace BracketSpace WordPress.org Documentation Developer Resources WP-Admin reference Howdy, developer Share Tweet WP-Admin Reference WordPress version: 6.5.2 This is a place where you can quickly reference elements from wp-admin. You can use them in your own plugins. This is an actual WordPress Dashboard loaded. All the styles and scripts are already available on the admin side. You can just grab the HTML and you are all set. Metaboxes Metabox collapse WP-Admin reference Metabox Dummy metabox It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ’Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ’lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, by accident. Don’t click me! Buttons Button Primary Small Primary Small a href="#" Primary Small/a Button Secondary Small Secondary Small a href="#" Secondary Small/a Primary Button Primary Button a href="#" Primary Button/a Secondary Button Secondary Button a href="#" Secondary Button/a Hero Primary Button Hero Primary Button a href="#" Hero Primary Button/a Hero Secondary Button Hero Secondary Button a href="#" Hero Secondary Button/a Button Groups Button #1 Button #2 Button #3 div a href="#" Button #1/a a href="#" Button #2/a a href="#" Button #3/a /div Tables Regular field Checkbox checkbox Just check me! Select Option #1 Option #2 Option #3 Option #4 Paragraph It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ’Content here, content here’, making it look like readable English. Description It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ’Content here, content here’, making it look like readable English. if ( ! class_exists( ’WP_List_Table’ ) ) { require_once( ABSPATH . ’wp-admin/includes/class-wp-list-table.php’ ); } Copy to clipboard Tabs Tab #01 Tab #02 Tab #03 Settings tabs These are native WordPress tabs. Unfortunately they are not supported by JS :(. Fortunately, you can code it yourself! Here’s the tutorial! Markup: JS: (function($) { $(function(){ $(’#tabs’).tabs(); }); })(jQuery); That’s all folks! h2 a href="javascript:void(0)" Tab #01/a a href="javascript:void(0)" Tab #02/a a href="javascript:void(0)" Tab #03/a /h2 div h3Settings tabs/h3 p "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. /p p Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?" /p p a href="javascript:void(0)" target="_blank" Save changes/a /p /div Posts list Select All Title Author Categories Tags Comments Date Select Post #1 Post #1” is locked Post #1 Edit | Quick Edit | Trash | View Show more details dummy@emailaddress Dummy category — No tags 1 1 comment 0 No pending comments Published 2 hours ago Select Post #2 Post #2” is locked Post #2 Edit | Quick Edit | Trash | View Show more details dummy@emailaddress Dummy category — No tags 1 1 comment 0 No pending comments Published 2 hours ago Select Post #3 Post #3” is locked Post #3 Edit | Quick Edit | Trash | View Show more details dummy@emailaddress Dummy category — No tags 1 1 comment 0 No pending comments Published 2 hours ago Select Post #4 Post #4” is locked Post #4 Edit | Quick Edit | Trash | View Show more details dummy@emailaddress Dummy category — No tags 1 1 comment 0 No pending comments Published 2 hours ago Select Post #5 Post #5” is locked Post #5 Edit | Quick Edit | Trash | View Show more details dummy@emailaddress Dummy category — No tags 1 1 comment 0 No pending comments Published 2 hours ago Select Post #6 Post #6” is locked Post #6 Edit | Quick Edit | Trash | View Show more details dummy@emailaddress Dummy category — No tags 1 1 comment 0 No pending comments Published 2 hours ago Select Post #7 Post #7” is locked Post #7 Edit | Quick Edit | Trash | View Show more details dummy@emailaddress Dummy category — No tags 1 1 comment 0 No pending comments Published 2 hours ago Select Post #8 Post #8” is locked Post #8 Edit | Quick Edit | Trash | View Show more details dummy@emailaddress Dummy category — No tags 1 1 comment 0 No pending comments Published 2 hours ago Select Post #9 Post #9” is locked Post #9 Edit | Quick Edit | Trash | View Show more details dummy@emailaddress Dummy category — No tags 1 1 comment 0 No pending comments Published 2 hours ago Select Post #10 Post #10” is locked Post #10 Edit | Quick Edit | Trash | View Show more details dummy@emailaddress Dummy category — No tags 1 1 comment 0 No pending comments Published 2 hours ago Select All Title Author Categories Tags Comments Date Static HTML Code Using WP_List_Table Metabox collapse 1. Extending WP_List_Table if ( ! class_exists( ’WP_List_Table’ ) ) { require_once( ABSPATH . ’wp-admin/includes/class-wp-list-table.php’ ); } Metabox collapse 2. Creating a child class that extends WP_List_Table class Items extends WP_List_Table { public function __construct() { parent::__construct( [ ’singular’ = __( ’Item’, ’bs’ ), ’plural’ = __( ’Items’, ’bs’ ), ’ajax’ = false ] ); } Metabox collapse 3. The get_items() method /** * Retrieve items data from the database * * @param int $per_page * @param int $page_number * * @return mixed */ public static function get_items( $per_page = 5, $page_number = 1 ) { global $wpdb; $sql = "SELECT * FROM {$wpdb-prefix}items"; if ( ! empty( $_REQUEST[’orderby’] ) ) { $sql .= ’ ORDER BY ’ . esc_sql( $_REQUEST[’orderby’] ); $sql .= ! empty( $_REQUEST[’order’] ) ? ’ ’ . esc_sql( $_REQUEST[’order’] ) : ’ ASC’; } $sql .= " LIMIT $per_page"; $sql .= ’ OFFSET ’ . ( $page_number - 1 ) * $per_page; $result = $wpdb-get_results( $sql, ’ARRAY_A’ ); return $result; } Metabox collapse 4. The delete_item() method /** * Delete a item record. * * @param int $id item ID */ public static function delete_item( $id ) { global $wpdb; $wpdb-delete(...