Custom Admin CSS WordPress Plugin

blank

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.

Access the Settings:

  • 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');
?>

Screenshot 2025-03-16 at 5.52.47 PM

Image Marker

blank

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.

Who Needs It, What is it for?

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.

(DEMO) New Patient Questions

Name(Required)
This image Marker field can use any jpeg or png file in your media library, and is mobile friendly.
By submitting this form you acknowledge we will be contacting you.(Required)

Advanced SEO (Search Engine Optimization)

blank

Advanced SEO (Search Engine Optimization) involves a comprehensive strategy to improve your website’s visibility on search engines like Google. Here’s what it typically includes:

1. Keyword Research and Analysis

  • In-depth Keyword Research: Identifying high-value keywords and phrases that your target audience uses to find services like yours.
  • Competitor Analysis: Analyzing competitors’ keywords and strategies to identify opportunities.

2. On-Page Optimization

  • Content Optimization: Creating and optimizing high-quality content that includes targeted keywords naturally.
  • Meta Tags: Crafting compelling meta titles and descriptions for each page to improve click-through rates.
  • Header Tags: Structuring content with appropriate header tags (H1, H2, H3, etc.) to enhance readability and SEO.
  • Image Optimization: Adding alt text and optimizing images for faster loading times and better search visibility.

3. Technical SEO

  • Site Speed Optimization: Ensuring your website loads quickly on all devices, which is crucial for both user experience and SEO.
  • Mobile Optimization: Making sure your website is fully responsive and performs well on mobile devices.
  • SSL Certificate: Ensuring your site is secure with HTTPS, which is a ranking factor for Google.
  • Schema Markup: Implementing structured data to help search engines understand your content and enhance search results (e.g., rich snippets).

4. Content Strategy and Development

  • Content Creation: Developing a content calendar and creating valuable, engaging content (e.g., blog posts, articles) that attracts and retains visitors.
  • Content Marketing: Promoting your content through various channels to increase visibility and drive traffic.

5. Link Building and Off-Page SEO

  • Backlink Strategy: Acquiring high-quality backlinks from reputable websites to improve your site’s authority and ranking.
  • Social Media Integration: Leveraging social media platforms to increase engagement and drive traffic to your site.

6. Local SEO (if applicable)

  • Google My Business Optimization: Setting up and optimizing your Google My Business profile to improve local search visibility.
  • Local Citations: Ensuring your business information is consistent across local directories and review sites.

7. Analytics and Reporting

  • Performance Tracking: Using tools like Google Analytics and Google Search Console to monitor your site’s performance.
  • Regular Reports: Providing detailed reports on key metrics (traffic, rankings, conversions) and actionable insights for ongoing improvement.

Client Onboarding Outline

blank

Understanding Business and Goals:

  1. Can you provide an overview of your business and the services you offer?
  2. What are your primary goals for the new website? (e.g., attracting new clients, providing information, offering online services)
  3. Who is your target audience? (demographics, interests, needs)
  4. Do you have any specific branding guidelines or elements you want to incorporate?

Current Website and Design Preferences:

  1. Do you currently have a website? If so, what do you like and dislike about it?
  2. Are there any websites that you admire or would like to model your site after? (Gather URLs and specific features they like)
  3. What kind of content will you need on the website? (e.g., blog, portfolio, client testimonials, contact forms)
  4. Do you have any preferences regarding the website’s design and layout? (color scheme, style, images)

Functional Requirements:

  1. What specific features or functionalities do you need? (e.g., appointment booking, client portal, e-commerce, newsletter signup)
  2. Do you need integration with any specific tools or platforms? (e.g., CRM, email marketing, social media)

Technical and Logistical Details:

  1. Do you already have a domain name and hosting provider?
  2. Who will be responsible for updating the content on the website? (you, your team, or will you need ongoing support)
  3. What is your budget for this project?
  4. What is your desired timeline for the project? (start date, launch date)

SEO and Marketing:

  1. Do you have an existing SEO strategy, or will you need help with SEO?
  2. How do you plan to promote your website once it’s live? (e.g., social media, online ads, email marketing)

Post-Launch Support:

  1. What level of ongoing support will you need after the website is live? (maintenance, updates, troubleshooting)
  2. Are there any other services you might need assistance with? (e.g., graphic design, copywriting, social media management)

Next Steps:

  1. Are there any other stakeholders involved in the decision-making process?
  2. When would you like to schedule a follow-up meeting to discuss the proposal and next steps?

Joshua Jordan

blank

Position: Tech Supervisor

Cellular Number: (916) 234-3277

Web Designer, Editor, VFX Artist/Supervisor, Nuclear Physicist, Theoretical Philosopher- this is the Tech Guy other Tech Guys dream about being when they grow up. 

Jameson Jordan

Jameson Contact-image

Position: Filmmaker

Telephone: (323) 533-2639

Filmmaker. Creatively, handles Writing and Directing; Camera, handles RED Epic Rentals and Shooting. Call him if you’d like to simply rent a professional camera, or call him if you’d like to create professional content. 

On Set Photos

blank