plugins
Custom Admin CSS WordPress Plugin
Free! Like Speech.
It is so easy and useful that I thought I should pass it on.
This is the code that is in the file. Install this plugin like any other in your WordPress Administrator area.
- Navigate to Settings > Custom Admin CSS in the admin menu.
Features and Security
- Simple Interface: A straightforward textarea for CSS input.
- Admin-Only: The CSS only affects the backend, thanks to the admin_head hook.
- Secure: The wp_strip_all_tags function removes HTML tags from the input, ensuring no malicious code (like <script>) can be executed, while preserving CSS syntax.
- Permission Check: Only users with manage_options capability (typically administrators) can access the settings.
Notes
- The CSS applies globally to all admin pages. For specific pages, you’d need to add conditions using get_current_screen() (beyond this basic version).
- No preview is included, but you can test styles by saving and refreshing an admin page.
This plugin provides a simple, effective way to customize the WordPress admin area’s appearance with your own CSS!
<?php
/*
Plugin Name: Custom Admin CSS
Description: Allows adding custom CSS to the WordPress admin area.
Version: 1.0
Author: Your Name
*/
// Add settings page to the admin menu
function custom_admin_css_add_menu() {
add_options_page(
'Custom Admin CSS', // Page title
'Custom Admin CSS', // Menu title
'manage_options', // Capability required
'custom-admin-css', // Menu slug
'custom_admin_css_settings_page' // Callback function
);
}
add_action('admin_menu', 'custom_admin_css_add_menu');
// Render the settings page
function custom_admin_css_settings_page() {
?>
<div class="wrap">
<h1>Custom Admin CSS</h1>
<form method="post" action="options.php">
<?php
settings_fields('custom_admin_css_options');
do_settings_sections('custom-admin-css');
submit_button();
?>
</form>
</div>
<?php
}
// Register settings with sanitization
function custom_admin_css_register_settings() {
register_setting(
'custom_admin_css_options', // Option group
'custom_admin_css', // Option name
'custom_admin_css_sanitize' // Sanitization callback
);
add_settings_section(
'custom_admin_css_main', // Section ID
'Main Settings', // Section title
'custom_admin_css_section_text', // Callback for description
'custom-admin-css' // Page slug
);
add_settings_field(
'custom_admin_css_textarea', // Field ID
'Custom CSS', // Field title
'custom_admin_css_textarea', // Callback for field
'custom-admin-css', // Page slug
'custom_admin_css_main' // Section ID
);
}
add_action('admin_init', 'custom_admin_css_register_settings');
// Sanitize the CSS input
function custom_admin_css_sanitize($input) {
return wp_strip_all_tags($input); // Removes HTML tags, keeps CSS
}
// Section description
function custom_admin_css_section_text() {
echo '<p>Enter your custom CSS below to style the WordPress admin area:</p>';
}
// Textarea for CSS input
function custom_admin_css_textarea() {
$css = get_option('custom_admin_css', ''); // Load saved CSS or empty string
echo '<textarea name="custom_admin_css" rows="10" cols="50">' . esc_textarea($css) . '</textarea>';
}
// Output CSS in admin head
function custom_admin_css_admin_head() {
$css = get_option('custom_admin_css', '');
if (!empty($css)) {
echo '<style type="text/css">' . wp_strip_all_tags($css) . '</style>';
}
}
add_action('admin_head', 'custom_admin_css_admin_head');
?>
Image Marker
Image Marker for Gravity Forms
Ask about our discount bulk pricing here.
Interactively mark specific points on an image
We've developed a custom Gravity Forms field called Image Marker, designed to enhance form functionality by allowing users to interactively mark specific points on an image directly within a form. This field is perfect for scenarios where visual input is valuable-think marking pain points on a medical diagram, indicating locations on a map, or highlighting areas of interest in a photo. It's built to integrate seamlessly into the Gravity Forms ecosystem, providing an intuitive experience for both form administrators and end-users.
Doctors, for medical notes.
Medical Recording, Interactive Patient Form.
Medical Patient Onboarding Tool
Key Features
Here's what makes the Image Marker field stand out:
- Interactive Marking: Users can click on an image to place marks-visualized as small indicators like red dots-and the coordinates of these marks are captured and stored for processing.
- Mandatory Input Option: Administrators can set the field as "Required," ensuring users add at least one mark before submitting the form. If no marks are added, a validation message prompts the user to engage with the image.
- Customizable Settings: In the Gravity Forms editor, form creators can configure the field by selecting the image, setting canvas dimensions, and applying options like CSS classes or conditional logic for a tailored setup.
- Processed Output: After submission, the marks are scaled to the original image size, drawn onto the image (e.g., as red dots), and saved as a new file linked to the form entry.
- Email Integration: The marked image is automatically included in Gravity Forms' email notifications, so recipients can see the user's input right in their inbox.
- User-Friendly Design: The field blends naturally into Gravity Forms, appearing as a standard field type with its own settings and validation, making it easy to use for everyone involved.
- Real-Time Interaction: Front-end JavaScript powers the interactive experience, capturing clicks on the image and storing coordinates in a hidden input field for submission.
If you are interested in the plugin please get in touch with us.
Screenshots of the back end interface
Use any image you like for your form
We built a new type of form field where you can leave detailed marks. Try clicking on the silhouettes and submit the form.