WP ULike
Get Pro

Developer Tools & Scripts

Custom CSS, PHP snippets, JavaScript snippets, and loading spinner — without editing plugin files.

Need a small customization without building a separate plugin? WP ULike includes a Developer Tools section in Settings for CSS, PHP, and JavaScript — all saved in your database and loaded on the front end.

WP ULike → Settings → Developer Tools → Scripts

Tip: For colors, spacing, and button styling with live preview, start with Customize → Button Templates. Use Developer Tools when you need logic, hooks, or CSS the customizer does not cover.

Custom CSS

Add CSS that styles like buttons, counters, likers boxes, and toast messages site-wide.

When to use it: One-off layout tweaks, theme-specific fixes, or overrides that do not belong in your theme stylesheet.

Example:

.wpulike-heart .wp_ulike_btn {
  border-radius: 999px;
}

Enable Inline Custom CSS

By default, WP ULike saves your CSS to a file and loads it as a stylesheet. Turn on Enable Inline Custom CSS to print styles in the page <head> instead.

Use this when:

  • A cache or optimization plugin merges CSS aggressively
  • You need styles to load in a specific order

The CSS file is still generated in the background for debugging — only the delivery method changes.

Custom Spinner

Upload an image (GIF, PNG, etc.) to replace the default loading animation shown while a vote is processing.

Keep the file small — it appears on every click.

PHP Snippets

Run PHP on your site without opening theme files.

Rules:

  • Do not wrap code in <?php ?> tags — WP ULike adds them for you
  • Snippets run on every front-end request — keep them lightweight
  • For large projects, use the Code Snippets plugin instead

Example — log every like to your error log:

add_action('wp_ulike_after_process', function($id, $key, $user_id, $status, $has_log, $slug) {
    if ($status === 'like') {
        error_log("Post {$id} liked by user {$user_id}");
    }
}, 10, 6);

Example — change button text:

add_filter('wp_ulike_button_text', function($value, $option_name, $setting_key) {
    if ($option_name === 'like') {
        return 'Love this';
    }
    return $value;
}, 10, 3);

See Hooks & Filters and Developer Functions for more examples.

JavaScript Snippets

Add front-end JavaScript printed just before the closing </body> tag.

Rules:

  • Do not wrap code in <script> tags — WP ULike adds them
  • Runs on all public pages — avoid heavy scripts

Example — track likes in Google Analytics:

document.addEventListener('WordpressUlikeUpdated', function(event) {
  var el = event.detail;
  if (typeof gtag === 'undefined' || !el) return;
  gtag('event', 'like', {
    item_id: el.getAttribute('data-ulike-id'),
    item_type: el.getAttribute('data-ulike-type')
  });
});

See JavaScript Events for all available events.

When snippets are hidden

If your host or a security plugin disables code snippets in admin, the PHP and JavaScript fields may not appear. In that case, add snippets to a child theme functions.php or a small custom plugin instead.

Related articles

Continue with these guides