CSS Customization

WP Inventory Manager CSS Customization Maps

Create a Unique Style with CSS Customization

WP Inventory is ready to use out of the box, and includes a default CSS theme that can suit most needs. However, we recognize not every site has the same needs, so we’ve included the option to turn off the default WPIM theme. Every element shown on the frontend has intuitive and easily-accessible HTML classes so you can easily target them with CSS and give your inventory a unique style.

Please see the CSS maps for all the frontend elements in the right hand sidebar, or in the list below. If you feel we are missing one or would like to see something added, please reach out to us at [email protected].

wpim_admin_edit_after_$field

With this hook, you can add your own HTML input anywhere under any of the system / core fields.  This occurs in the item entry / edit page in the dashboard. Here is a list of actions for each field:

  • wpim_admin_edit_form_after_number
  • wpim_admin_edit_form_after_name
  • wpim_admin_edit_form_after_slug
  • wpim_admin_edit_form_after_status
  • wpim_admin_edit_form_after_category
  • wpim_admin_edit_form_after_description
  • wpim_admin_edit_form_after_size
  • wpim_admin_edit_form_after_manufacturer
  • wpim_admin_edit_form_after_make
  • wpim_admin_edit_form_after_model
  • wpim_admin_edit_form_after_year
  • wpim_admin_edit_form_after_serial
  • wpim_admin_edit_form_after_fob
  • wpim_admin_edit_form_after_quantity
  • wpim_admin_edit_form_after_quantity_reserved
  • wpim_admin_edit_form_after_images
  • wpim_admin_edit_form_after_media
  • wpim_admin_edit_form_after_sort
  • wpim_admin_edit_form_end

We will pick one at random from above:  wpim_admin_edit_form_after_media


/**
 * @param $item
 * @param $inventory_id
 */
function my_custom_function( $item, $inventory_id ) {
	$html  = '<tr>';
	$html .= '<th>Your Field Name / Label</th>';
	$html .= '<td>';
	$html .= '<input type="text" name="your_field_name" id="your_field_name" value="">';
	$html .= '</td>';
	$html .= '</tr>';

	echo $html;
}

add_action( 'wpim_admin_edit_form_after_media', 'my_custom_function', 10, 2 );

wpim_admin_pre_edit_item

This hook loads on the admin dashboard.  It is fired immediately when clicking into an item to edit it, before the item details are rendered to the page.


/**
 * @param $item
 */
function my_custom_function( $item ) {
    // Use this hook to place a custom message or tool tip or anything else above the edit item fields in the item edit details
}

add_action( 'wpim_admin_pre_edit_item', 'my_custom_function' );

wpim_admin_action_links

This hook runs on the admin item table. It is useful to add a custom action link to the ‘actions’ column.


/**
 * @param $inventory_id
 *
 * @return string
 */
function my_custom_function( $inventory_id ) {
	$admin_url = add_query_args( [ 'page' => 'wpim_manage_inventory', 'action' => 'your_custom_action', 'inventory_id' => $inventory_id ], admin_url( 'admin.php' ) );

	return '<a href="' . $admin_url . '">Some Action</a>';
}

add_action( 'wpim_admin_action_links', 'my_custom_function' );

wpim_admin_items_pre_listing

This hook runs in the admin directly before loading all of the items.

function my_custom_function($data) {
   $data; // Parameters / rules to display the items.  Such as hide low, status, order, etc
    
    /**
     * array (size=17)
    'order' => string 'inventory_name' (length=14)
    'page_size' => string '20' (length=2)
    'page' => int 0
    'name' => string '' (length=0)
    'include_category' => int 1
    'inventory_status' => string '' (length=0)
    'inventory_id' => null
    'inventory_slug' => null
    'category_id' => null
    'category_name' => null
    'category_slug' => null
    'user_id' => null
    'search' => string '' (length=0)
    'hide_low' => string '0' (length=1)
    'hide_low_quantity' => string '20' (length=2)
    'type_id' => int 1
    'dir' => string '' (length=0)
     */

   // Do whatever you want from here!
}

add_action('wpim_admin_items_pre_listing', 'my_custom_function');

wpim_post_delete_item

This function is ran just before the system process your item deletion.


/**
 * @param $inventory_id
 * @param $data
 * @param $subject
 * @param $message
 */
function my_custom_function($inventory_id, $data, $subject, $message) {
    // Do whatever you want with these pieces of information.  With the inventory_id you can even lookup the item info.
    // You can send info to another database table, send out an email, etc.
}

add_action('wpim_post_delete_item', 'my_custom_function', 10, 4);

Item Management

WP Inventory Manager Item Management

The following actions can be utilized while managing items.  If you want to process an extra function or set of rules after someone takes an action on an item then these hooks would be helpful.

Listing Items

wpim_admin_items_pre_listing – Hook that runs right before items are rendered in the admin dashboard.

wpim_admin_action_links – Hook to splice in your own custom action link in the ‘action’ column of the items page in the admin dashboard.

wpim_admin_edit_form_after_$field – Replacing $field with the appropriate field name allows you to splice in your own custom field.

Deleting Items

wpim_pre_delete_item – This hook runs before an item is actually deleted in the system.

wpim_post_delete_item – This hook runs directly after the item has been deleted.

Editing an Item

wpim_admin_pre_edit_item – Hook that retrieves item details prior to them being displayed on the page.  This is in the dashboard item detail page.

Saving an Item

wpim_save_item – This hook runs at the time of saving / updating.

wpim_pre_delete_item

This function is ran just before the system process your item deletion.


/**
 * @param $inventory_id
 * @param $data
 * @param $subject
 * @param $message
 */
function my_custom_function($inventory_id, $data, $subject, $message) {
    // Do whatever you want with these pieces of information.  With the inventory_id you can even lookup the item info.
    // You can send info to another database table, send out an email, etc.
}

add_action('wpim_pre_delete_item', 'my_custom_function', 10, 4);

wpim_reserve_confirmation_sent

Unlike the reserve_confirmation hook that runs at the exact time the reserve confirmation email is sent, this hook fires after the reservation confirmation is sent. It is directly after reserve_confirmation.

/**
 * @param $inventory_id
 * @param $data
 * @param $subject
 * @param $message
 */
function my_custom_function($inventory_id, $data, $subject, $message) {
   // As an example how to get the item info, you could do the following...
   $item_info = new WPIMItem();  // Call new instance of WPIMItem class
   $item_info = $item_info->get( $inventory_id );  // Get the item information with inventory id
   $name = $item_info->inventory_name;  // Example of how you would get the name of an item

   // Do whatever you want from here!
}

add_action('wpim_reserve_confirmation_sent', 'my_custom_function', 10, 4);

reserve_confirmation

This hook is run after successfully passing error validation. This hook only fires if the send confirmation email to the requester is set to yes in the settings.

function my_custom_function($confirm_email, $subject, $message) {
	$confirm_email; // Email from the reserve form (reserving party email)
	$subject; // Subject of the email that was sent out
	$message; // Message of email sent

	// Do whatever you want with this information

}

add_action('reserve_confirmation', 'my_custom_function', 10, 3);