WP-Admin
Reference

WordPress version: 6.6.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.

Buttons


Button Primary Small

					
						<a href="#" class="button button-small button-primary">Primary Small</a>
					
				

Button Secondary Small

					
						<a href="#" class="button button-small button-secondary">Secondary Small</a>
					
				

Primary Button

					
						<a href="#" class="button button-primary">Primary Button</a>
					
				

Secondary Button

					
						<a href="#" class="button button-secondary">Secondary Button</a>
					
				

Hero Primary Button

					
						<a href="#" class="button button-primary button-hero">Hero Primary Button</a>
					
				

Hero Secondary Button

					
						<a href="#" class="button button-hero">Hero Secondary Button</a>
					
				

Button Groups

					
						<div class="button-group">
							<a href="#" class="button button-primary">Button #1</a>
							<a href="#" class="button button-primary">Button #2</a>
							<a href="#" class="button button-primary">Button #3</a>
						</div>
				
				

Tables


Checkbox
checkbox
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' );
						}
					
				

Tabs


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 class="nav-tab-wrapper">
								<a href="javascript:void(0)" class="nav-tab <?php echo $active_tab == 'display_options' ? 'nav-tab-active' : ''; ?>">Tab #01</a>
								<a href="javascript:void(0)" class="nav-tab <?php echo $active_tab == 'display_options' ? 'nav-tab-active' : ''; ?>">Tab #02</a>
								<a href="javascript:void(0)" class="nav-tab <?php echo $active_tab == 'display_options' ? 'nav-tab-active' : ''; ?>">Tab #03</a>
							</h2>
							<div class="tabs-content">
								<h3>Settings 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" class="button button-primary">Save changes</a>
								</p>
							</div>
						
					

Posts list


Title Author Categories Tags Comments Date
“Post #1” is locked
Post #1
Edit | | Trash | View
dummy@emailaddress Dummy category No tags
1 comment No pending comments
Published
2 hours ago
“Post #2” is locked
Post #2
Edit | | Trash | View
dummy@emailaddress Dummy category No tags
1 comment No pending comments
Published
2 hours ago
“Post #3” is locked
Post #3
Edit | | Trash | View
dummy@emailaddress Dummy category No tags
1 comment No pending comments
Published
2 hours ago
“Post #4” is locked
Post #4
Edit | | Trash | View
dummy@emailaddress Dummy category No tags
1 comment No pending comments
Published
2 hours ago
“Post #5” is locked
Post #5
Edit | | Trash | View
dummy@emailaddress Dummy category No tags
1 comment No pending comments
Published
2 hours ago
“Post #6” is locked
Post #6
Edit | | Trash | View
dummy@emailaddress Dummy category No tags
1 comment No pending comments
Published
2 hours ago
“Post #7” is locked
Post #7
Edit | | Trash | View
dummy@emailaddress Dummy category No tags
1 comment No pending comments
Published
2 hours ago
“Post #8” is locked
Post #8
Edit | | Trash | View
dummy@emailaddress Dummy category No tags
1 comment No pending comments
Published
2 hours ago
“Post #9” is locked
Post #9
Edit | | Trash | View
dummy@emailaddress Dummy category No tags
1 comment No pending comments
Published
2 hours ago
“Post #10” is locked
Post #10
Edit | | Trash | View
dummy@emailaddress Dummy category No tags
1 comment No pending comments
Published
2 hours ago
Title Author Categories Tags Comments Date

Static HTML Code

Using WP_List_Table

1. Extending WP_List_Table

									
										if ( ! class_exists( 'WP_List_Table' ) ) {
											require_once( ABSPATH . 'wp-admin/includes/class-wp-list-table.php' );
										}
									
								

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
												] );
										}
									
								

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;
										}
									
								

4. The delete_item() method

									
										/**
										 * Delete a item record.
										 *
										 * @param int $id item ID
										 */
										public static function delete_item( $id ) {
											global $wpdb;

											$wpdb->delete(
											"{$wpdb->prefix}items",
											[ 'ID' => $id ],
											[ '%d' ]
											);
										}
									
								

5. The item_count() - Number of items in the database

									
										/**
										 * Returns the count of records in the database.
										 *
										 * @return null|string
										 */
										public static function record_count() {
											global $wpdb;

											$sql = "SELECT COUNT(*) FROM {$wpdb->prefix}items";

											return $wpdb->get_var( $sql );
										}
									
								

6. Text displayed when no item data is available

									
										/** Text displayed when no item data is available */
										public function no_items() {
											_e( 'No items avaliable.', 'bs' );
										}
									
								

7. The column_name method

									
										/**
										 * Method for name column
										 *
										 * @param array $item an array of DB data
										 *
										 * @return string
										 */
										function column_name( $item ) {

											// create a nonce
											$delete_nonce = wp_create_nonce( 'bs_delete_item' );

											$title = '' . $item['name'] . '';

											$actions = [
											'delete' => sprintf( 'Delete', esc_attr( $_REQUEST['page'] ), 'delete', absint( $item['ID'] ), $delete_nonce )
											];

											return $title . $this->row_actions( $actions );
										}
									
								

8. Render a column when no column specific method exists.

									
										/**
										 * Render a column when no column specific method exists.
										 *
										 * @param array $item
										 * @param string $column_name
										 *
										 * @return mixed
										 */
										public function column_default( $item, $column_name ) {
											switch ( $column_name ) {
											case 'name':
											case 'manufacturer':
												return $item[ $column_name ];
											default:
												return print_r( $item, true ); //Show the whole array for troubleshooting purposes
											}
										}
									
								

9. The column_cb method

									
										/**
										 * Render the bulk edit checkbox
										 *
										 * @param array $item
										 *
										 * @return string
										 */
										function column_cb( $item ) {
											return sprintf(
											'', $item['ID']
											);
										}
									
								

10. The method get_columns()

									
										/**
										 *  Associative array of columns
										 *
										 * @return array
										 */
										function get_columns() {
											$columns = [
											'cb'      => '',
											'name'    => __( 'Name', 'bs' ),
											'manufacturer' => __( 'Manufacturer', 'bs' ),
											'price'    => __( 'Price', 'bs' )
											];

											return $columns;
										}
									
								

11. The get_sortable_columns() method

									
										/**
										 * Columns to make sortable.
										 *
										 * @return array
										 */
										public function get_sortable_columns() {
											$sortable_columns = array(
											'name' => array( 'name', true ),
											'manufacturer' => array( 'manufacturer', false )
											'price' => array( 'price', false )
											);

											return $sortable_columns;
										}
									
								

12. get_bulk_actions()

									
										/**
										 * Returns an associative array containing the bulk action
										 *
										 * @return array
										 */
										public function get_bulk_actions() {
											$actions = [
											'bulk-delete' => 'Delete'
											];

											return $actions;
										}
									
								

13. The prepare_items() method

									
										/**
										 * Handles data query and filter, sorting, and pagination.
										 */
										public function prepare_items() {

											$this->_column_headers = $this->get_column_info();

											/** Process bulk action */
											$this->process_bulk_action();

											$per_page     = $this->get_items_per_page( 'items_per_page', 5 );
											$current_page = $this->get_pagenum();
											$total_items  = self::record_count();

											$this->set_pagination_args( [
											'total_items' => $total_items,
											'per_page'    => $per_page
											] );


											$this->items = self::get_items( $per_page, $current_page );
										}
									
								

14. Function process_bulk_action()

									
										public function process_bulk_action() {

											// Detect when a bulk action is being triggered...
											if ( 'delete' === $this->current_action() ) {

											// In our file that handles the request, verify the nonce.
											$nonce = esc_attr( $_REQUEST['_wpnonce'] );

											if ( ! wp_verify_nonce( $nonce, 'bs_delete_item' ) ) {
												die( 'Go get a life script kiddies' );
											}
											else {
												self::delete_item( absint( $_GET['item'] ) );

												wp_redirect( esc_url( add_query_arg() ) );
												exit;
											}

											}

											// If the delete bulk action is triggered
											if ( ( isset( $_POST['action'] ) && $_POST['action'] == 'bulk-delete' ) || ( isset( $_POST['action2'] ) && $_POST['action2'] == 'bulk-delete' ) ) {

											$delete_ids = esc_sql( $_POST['bulk-delete'] );

											// loop over the array of record IDs and delete them
											foreach ( $delete_ids as $id ) {
												self::delete_item( $id );

											}

											wp_redirect( esc_url( add_query_arg() ) );
											exit;
											}
										}
									
								

Spinners


@1x

HTML spinner (20x20)

					
						<span class="spinner is-active"></span>
					
				

spinner.gif (20x20)

					
						<img src="<?php echo esc_url( get_admin_url() . 'images/spinner.gif' ); ?>" />
					
				

loading.gif (16x16)

					
						<img src="<?php echo esc_url( get_admin_url() . 'images/loading.gif' ); ?>" />
					
				

wpspin_light.gif (16x16)

					
						<img src="<?php echo esc_url( get_admin_url() . 'images/wpspin_light.gif' ); ?>" />
					
				

loader.gif (31x31)

					
						<img src="<?php echo esc_url( includes_url() . 'js/tinymce/skins/lightgray/img//loader.gif' ); ?>" />
					
				

loadingAnimation.gif (416x26)

					
						<img src="<?php echo esc_url( includes_url() . 'js/thickbox/loadingAnimation.gif' ); ?>" />
					
				

@2x

spinner-2x.gif (40x40)

					
						<img src="<?php echo esc_url( get_admin_url() . 'images/spinner-2x.gif' ); ?>" />
					
				

wpspin_light-2x.gif (32x32)

					
						<img src="<?php echo esc_url( get_admin_url() . 'images/wpspin_light-2x.gif' ); ?>" />
					
				

Notices


Default notice

Default notice

					
						<div class="notice"><p>Default notice</p></div>
					
				

Default dismissible notice

					
						<div class="notice is-dismissible"><p>Default dismissible notice</p></div>
					
				

Info

Info notice

					
						<div class="notice notice-info"><p>Info notice</p></div>
					
				

Info notice dismissible

					
						<div class="notice notice-info is-dismissible"><p>Info notice dismissible</p></div>
					
				

Info notice alt

					
						<div class="notice notice-info alt"><p>Info notice alt</p></div>
					
				

Success

Success notice

					
						<div class="notice notice-success"><p>Success notice</p></div>
					
				

Success notice dismissible

					
						<div class="notice notice-success is-dismissible"><p>Success notice dismissible</p></div>
					
				

Success notice alt

					
						<div class="notice notice-success notice-alt"><p>Success notice alt</p></div>
					
				

Warning

Warning notice

					
						<div class="notice notice-warning"><p>Warning notice</p></div>
					
				

Warning notice dismissible

					
						<div class="notice notice-warning is-dismissible"><p>Warning notice dismissible</p></div>
					
				

Warning notice alt

					
						<div class="notice notice-warning notice-alt"><p>Warning notice alt</p></div>
					
				

Error

Error notice

					
						<div class="notice notice-error"><p>Error notice</p></div>
					
				

Error notice dismissible

					
						<div class="notice notice-error is-dismissible"><p>Error notice dismissible</p></div>
					
				

Error notice alt

					
						<div class="notice notice-error notice-alt"><p>Error notice alt</p></div>
					
				

Dashicons


Dashicons are over 250 icons, that can cover most, if not all of your needs!


You can use it as HTML...

				
					<span class="dashicons dashicons-format-status"></span>
				
			

...or in CSS...

				
					content: "\f130";
				
			

...or as a Glyph:

Get more dashicons!

Credits

This website was made with love by

Quality WordPress Plugins


Like it? Share it: