Added color picker to the settings page

and and added that you can set the titles for the buttons to!
This commit is contained in:
2025-06-29 23:33:54 -07:00
parent 7cac0343ba
commit ee36079405
3 changed files with 95 additions and 66 deletions

View File

@ -0,0 +1,3 @@
jQuery(document).ready(function ($) {
$('.wp-color-picker').wpColorPicker();
});

1
assets/js/cw-color-picker.min.js vendored Normal file
View File

@ -0,0 +1 @@
jQuery(document).ready(function(o){o(".wp-color-picker").wpColorPicker()});

View File

@ -2,7 +2,7 @@
/** /**
* Plugin Name: Better Content Warning * Plugin Name: Better Content Warning
* Description: Blocks access to content behind a content warning popup with optional trigger warnings. * Description: Blocks access to content behind a content warning popup with optional trigger warnings.
* Version: 1.0 * Version: 1.1
* Author: Sophia Atkinson * Author: Sophia Atkinson
* Author URI: https://sophia.wtf * Author URI: https://sophia.wtf
* Text Domain: better-content-warning * Text Domain: better-content-warning
@ -16,7 +16,7 @@
// Add metabox // Add metabox
add_action( add_action(
'add_meta_boxes', function () { 'add_meta_boxes', function () {
add_meta_box('cw_meta_box', 'Better Content Warning', 'cw_meta_box_callback', ['post', 'page'], 'side', 'high'); add_meta_box('cw_meta_box', 'Better Content Warning', 'cw_meta_box_callback', ['post', 'page'], 'side', 'high');
} }
); );
@ -46,8 +46,8 @@ add_action(
if (!current_user_can('edit_post', $post_id)) { return; if (!current_user_can('edit_post', $post_id)) { return;
} }
update_post_meta($post_id, '_cw_enabled', isset($_POST['cw_enabled']) ? 'on' : ''); update_post_meta($post_id, '_cw_enabled', isset($_POST['cw_enabled']) ? 'on' : '');
update_post_meta($post_id, '_cw_warnings', sanitize_text_field($_POST['cw_warnings'])); update_post_meta($post_id, '_cw_warnings', sanitize_text_field($_POST['cw_warnings']));
} }
); );
@ -62,30 +62,31 @@ add_filter(
return $content; return $content;
} }
$enabled = get_post_meta(get_the_ID(), '_cw_enabled', true); $enabled = get_post_meta(get_the_ID(), '_cw_enabled', true);
if ($enabled !== 'on') { return $content; if ($enabled !== 'on') { return $content;
} }
$post_id = get_the_ID(); $post_id = get_the_ID();
$warnings = trim(get_post_meta($post_id, '_cw_warnings', true)); $warnings = trim(get_post_meta($post_id, '_cw_warnings', true));
$prefix = get_option('cw_prefix', 'Content Warning'); $prefix = get_option('cw_prefix', 'Content Warning');
$default = get_option('cw_default_message', 'This post contains content that may be triggering to some people, Continue forward at your discretion.'); $default = get_option('cw_default_message', 'This post contains content that may be triggering to some people, Continue forward at your discretion.');
$button = get_option('cw_button_text', 'Continue'); $continue_button = get_option('cw_button_text', 'Continue');
$cookie_duration = 180; $exit_button = get_option('cw_exit_button_text', 'Exit');
$exit_button = get_option('cw_exit_button_text', 'Exit'); $exit_button_title = esc_attr(get_option('cw_exit_button_title', 'No shame in exiting <3'));
$continue_button_title = esc_attr(get_option('cw_continue_button_title', 'Lets get this party started /s'));
$cookie_duration = 180;
$header = esc_html($prefix);
$warning = $warnings ? esc_html($warnings) : esc_html($default);
$header = esc_html($prefix); ob_start();
$warning = $warnings ? esc_html($warnings) : esc_html($default); ?>
ob_start();
?>
<div id="cw-popup" class="cw-overlay"> <div id="cw-popup" class="cw-overlay">
<div class="cw-box"> <div class="cw-box">
<p><strong><?php echo $header; ?></strong></p> <p><strong><?php echo $header; ?></strong></p>
<p><?php echo $warning; ?></p> <p><?php echo $warning; ?></p>
<button title="Lets get this party started /s" id="cw-continue"><?php echo esc_html($button); ?></button> <button title="<?php echo esc_html($continue_button_title); ?>" id="cw-continue"><?php echo esc_html($continue_button); ?></button>
<br> <br>
<button title="No shame in exiting <3" id="cw-exit" aria-label="<?php echo esc_attr($exit_button); ?>"><?php echo esc_html($exit_button); ?></button> <button title="<?php echo esc_html($exit_button_title); ?>" id="cw-exit" aria-label="<?php echo esc_attr($exit_button); ?>"><?php echo esc_html($exit_button); ?></button>
</div> </div>
</div> </div>
<script> <script>
@ -114,20 +115,20 @@ add_filter(
}); });
})(); })();
</script> </script>
<?php <?php
return ob_get_clean() . '<div id="cw-content">' . $content . '</div>'; return ob_get_clean() . '<div id="cw-content">' . $content . '</div>';
} }
); );
// Add styles // Add styles
add_action( add_action(
'wp_head', function () { 'wp_head', function () {
$bg = esc_attr(get_option('cw_bg_color', '#1E1F22')); $bg = esc_attr(get_option('cw_bg_color', '#1E1F22'));
$overlay_bg = esc_attr(get_option('cw_overlay_bg_color', '#2E3035')); $overlay_bg = esc_attr(get_option('cw_overlay_bg_color', '#2E3035'));
$font = esc_attr(get_option('cw_font_size', '1.1em')); $font = esc_attr(get_option('cw_font_size', '1.1em'));
$btn = esc_attr(get_option('cw_button_color', '#9E93DC')); $btn = esc_attr(get_option('cw_button_color', '#9E93DC'));
$btn_hover = esc_attr(get_option('cw_button_hover_color', '#8179d5')); $btn_hover = esc_attr(get_option('cw_button_hover_color', '#8179d5'));
echo " echo "
<style> <style>
.cw-overlay { .cw-overlay {
position: fixed; position: fixed;
@ -169,32 +170,39 @@ add_action(
// Settings menu // Settings menu
add_action( add_action(
'admin_menu', function () { 'admin_menu', function () {
add_options_page('Better Content Warning Settings', 'Better Content Warning', 'manage_options', 'cw-settings', 'cw_settings_page'); add_options_page('Better Content Warning Settings', 'Better Content Warning', 'manage_options', 'cw-settings', 'cw_settings_page');
} }
); );
// Add settings link to plugin page // Add settings link to plugin page
add_filter( add_filter(
'plugin_action_links_' . plugin_basename(__FILE__), function ($links) { 'plugin_action_links_' . plugin_basename(__FILE__), function ($links) {
$settings_link = '<a href="options-general.php?page=cw-settings">Settings</a>'; $settings_link = '<a href="options-general.php?page=cw-settings">Settings</a>';
array_unshift($links, $settings_link); array_unshift($links, $settings_link);
return $links; return $links;
} }
); );
// Register settings // Register settings
add_action( add_action(
'admin_init', function () { 'admin_init', function () {
register_setting('cw_settings_group', 'cw_prefix'); register_setting('cw_settings_group', 'cw_prefix');
register_setting('cw_settings_group', 'cw_default_message'); register_setting('cw_settings_group', 'cw_default_message');
register_setting('cw_settings_group', 'cw_button_text'); register_setting('cw_settings_group', 'cw_button_text');
register_setting('cw_settings_group', 'cw_bg_color'); register_setting('cw_settings_group', 'cw_exit_button_text');
register_setting('cw_settings_group', 'cw_font_size'); register_setting('cw_settings_group', 'cw_font_size');
register_setting('cw_settings_group', 'cw_button_color'); register_setting('cw_settings_group', 'cw_bg_color');
register_setting('cw_settings_group', 'cw_overlay_bg_color'); register_setting('cw_settings_group', 'cw_overlay_bg_color');
register_setting('cw_settings_group', 'cw_button_hover_color'); register_setting('cw_settings_group', 'cw_button_color');
register_setting('cw_settings_group', 'cw_show_to_admins'); register_setting('cw_settings_group', 'cw_button_hover_color');
register_setting('cw_settings_group', 'cw_exit_button_text'); register_setting('cw_settings_group', 'cw_show_to_admins');
} register_setting('cw_settings_group', 'cw_continue_button_title');
register_setting('cw_settings_group', 'cw_exit_button_title');
});
add_action('admin_enqueue_scripts', function ($hook) {
if ($hook !== 'settings_page_cw-settings') return;
wp_enqueue_style('wp-color-picker');
wp_enqueue_script('cw-color-picker-init', plugin_dir_url(__FILE__) . 'assets/js/' . 'cw-color-picker.js', ['wp-color-picker'], null, true);
}
); );
// Settings page output // Settings page output
@ -202,60 +210,77 @@ function cw_settings_page()
{ {
?> ?>
<div class="wrap"> <div class="wrap">
<h1>Content Warning Settings</h1> <h1><?php esc_html_e('Content Warning Settings', 'better-content-warning'); ?></h1>
<form method="post" action="options.php"> <form method="post" action="options.php">
<?php settings_fields('cw_settings_group'); do_settings_sections('cw_settings_group'); ?> <?php settings_fields('cw_settings_group'); do_settings_sections('cw_settings_group'); ?>
<br>
<legend><strong><?php esc_html_e('Main Options', 'better-content-warning'); ?></strong></legend>
<table class="form-table"> <table class="form-table">
<tr> <tr>
<th><label for="cw_show_to_admins">Show Popup to Admins</label></th> <th scope="row"><label for="cw_show_to_admins"><?php esc_html_e('Show Popup to Admins', 'better-content-warning'); ?></label></th>
<td> <td>
<input name="cw_show_to_admins" type="checkbox" id="cw_show_to_admins" value="1" <?php checked(get_option('cw_show_to_admins'), '1'); ?>> <input name="cw_show_to_admins" type="checkbox" id="cw_show_to_admins" value="1" <?php checked(get_option('cw_show_to_admins'), '1'); ?>>
<label for="cw_show_to_admins">Enable content warnings for administrator accounts</label> <label for="cw_show_to_admins"><?php esc_html_e('Enable content warnings for administrator accounts', 'better-content-warning'); ?></label>
</td> </td>
</tr> </tr>
<tr> <tr>
<th><label for="cw_prefix">Warning Prefix</label></th> <th scope="row"><label for="cw_prefix"><?php esc_html_e('Warning Prefix', 'better-content-warning'); ?></label></th>
<td><input name="cw_prefix" type="text" id="cw_prefix" value="<?php echo esc_attr(get_option('cw_prefix', 'Content Warning:')); ?>" class="regular-text"></td> <td><input name="cw_prefix" type="text" id="cw_prefix" value="<?php echo esc_attr(get_option('cw_prefix', 'Content Warning:')); ?>" class="regular-text"></td>
</tr> </tr>
<tr> <tr>
<th><label for="cw_default_message">Default Warning Message</label></th> <th scope="row"><label for="cw_default_message"><?php esc_html_e('Default Warning Message', 'better-content-warning'); ?></label></th>
<td><input name="cw_default_message" type="text" id="cw_default_message" value="<?php echo esc_attr(get_option('cw_default_message', 'This post contains content that may be triggering to some people, Continue forward at your discretion.')); ?>" class="regular-text"></td> <td><input name="cw_default_message" type="text" id="cw_default_message" value="<?php echo esc_attr(get_option('cw_default_message', 'This post contains content that may be triggering to some people, Continue forward at your discretion.')); ?>" class="regular-text"></td>
</tr> </tr>
<tr> <tr>
<th><label for="cw_button_text">Continue Button Text</label></th> <th scope="row"><label for="cw_button_text"><?php esc_html_e('Continue Button Text', 'better-content-warning'); ?></label></th>
<td><input name="cw_button_text" type="text" id="cw_button_text" value="<?php echo esc_attr(get_option('cw_button_text', 'Continue')); ?>" class="regular-text"></td> <td><input name="cw_button_text" type="text" id="cw_button_text" value="<?php echo esc_attr(get_option('cw_button_text', 'Continue')); ?>" class="regular-text"></td>
</tr> </tr>
<tr> <tr>
<th><label for="cw_exit_button_text">Exit Button Text</label></th> <th scope="row"><label for="cw_exit_button_text"><?php esc_html_e('Exit Button Text', 'better-content-warning'); ?></label></th>
<td><input name="cw_exit_button_text" type="text" id="cw_exit_button_text" value="<?php echo esc_attr(get_option('cw_exit_button_text', 'Exit')); ?>" class="regular-text"></td> <td><input name="cw_exit_button_text" type="text" id="cw_exit_button_text" value="<?php echo esc_attr(get_option('cw_exit_button_text', 'Exit')); ?>" class="regular-text"></td>
</tr> </tr>
<tr> <tr>
<th><label for="cw_bg_color">Popup Background Color</label></th> <th scope="row"><label for="cw_font_size"><?php esc_html_e('Font Size', 'better-content-warning'); ?></label></th>
<td><input name="cw_bg_color" type="text" id="cw_bg_color" value="<?php echo esc_attr(get_option('cw_bg_color', '#1E1F22')); ?>" class="regular-text"></td>
</tr>
<tr>
<th><label for="cw_overlay_bg_color">Overlay Background Color</label></th>
<td><input name="cw_overlay_bg_color" type="text" id="cw_overlay_bg_color" value="<?php echo esc_attr(get_option('cw_overlay_bg_color', '#2E3035')); ?>" class="regular-text"></td>
</tr>
<tr>
<th><label for="cw_font_size">Font Size</label></th>
<td><input name="cw_font_size" type="text" id="cw_font_size" value="<?php echo esc_attr(get_option('cw_font_size', '1.1em')); ?>" class="regular-text"></td> <td><input name="cw_font_size" type="text" id="cw_font_size" value="<?php echo esc_attr(get_option('cw_font_size', '1.1em')); ?>" class="regular-text"></td>
</tr> </tr>
<tr> <tr>
<th><label for="cw_button_color">Button Color</label></th> <th scope="row"><label for="cw_bg_color"><?php esc_html_e('Popup Background Color', 'better-content-warning'); ?></label></th>
<td><input name="cw_button_color" type="text" id="cw_button_color" value="<?php echo esc_attr(get_option('cw_button_color', '#e67c73')); ?>" class="regular-text"></td> <td><input name="cw_bg_color" type="text" id="cw_bg_color" value="<?php echo esc_attr(get_option('cw_bg_color', '#1E1F22')); ?>" class="regular-text wp-color-picker"></td>
</tr> </tr>
<tr> <tr>
<th><label for="cw_button_hover_color">Button Hover Color</label></th> <th scope="row"><label for="cw_overlay_bg_color"><?php esc_html_e('Overlay Background Color', 'better-content-warning'); ?></label></th>
<td><input name="cw_button_hover_color" type="text" id="cw_button_hover_color" value="<?php echo esc_attr(get_option('cw_button_hover_color', '#8179d5')); ?>" class="regular-text"></td> <td><input name="cw_overlay_bg_color" type="text" id="cw_overlay_bg_color" value="<?php echo esc_attr(get_option('cw_overlay_bg_color', '#2E3035')); ?>" class="regular-text wp-color-picker"></td>
</tr>
<tr>
<th scope="row"><label for="cw_button_color"><?php esc_html_e('Button Color', 'better-content-warning'); ?></label></th>
<td><input name="cw_button_color" type="text" id="cw_button_color" value="<?php echo esc_attr(get_option('cw_button_color', '#9E93DC')); ?>" class="regular-text wp-color-picker"></td>
</tr>
<tr>
<th scope="row"><label for="cw_button_hover_color"><?php esc_html_e('Button Hover Color', 'better-content-warning'); ?></label></th>
<td><input name="cw_button_hover_color" type="text" id="cw_button_hover_color" value="<?php echo esc_attr(get_option('cw_button_hover_color', '#8179d5')); ?>" class="regular-text wp-color-picker"></td>
</tr> </tr>
</table> </table>
<?php submit_button(); ?>
<fieldset style="margin-top: 2em;">
<legend><strong><?php esc_html_e('Extra Options', 'better-content-warning'); ?></strong></legend>
<table class="form-table">
<tr>
<th scope="row"><label for="cw_continue_button_title"><?php esc_html_e('Continue Button Title', 'better-content-warning'); ?></label></th>
<td><input name="cw_continue_button_title" type="text" id="cw_continue_button_title" value="<?php echo esc_attr(get_option('cw_continue_button_title', 'Lets get this party started /s')); ?>" class="regular-text"></td>
</tr>
<tr>
<th scope="row"><label for="cw_exit_button_title"><?php esc_html_e('Exit Button Title', 'better-content-warning'); ?></label></th>
<td><input name="cw_exit_button_title" type="text" id="cw_exit_button_title" value="<?php echo esc_attr(get_option('cw_exit_button_title', 'No shame in exiting <3')); ?>" class="regular-text"></td>
</tr>
</table>
</fieldset>
<?php submit_button(__('Save Changes', 'better-content-warning')); ?>
</form> </form>
</div> </div>
</div> <div>
<div style="margin-top:2em; color:#666;"> <p><?php echo wp_kses_post(__('If you like this plugin, please consider supporting my work on <a href="https://liberapay.com/sophiaxd" target="_blank">Liberapay</a> or <a href="https://ko-fi.com/sophiaatkinson" target="_blank">Ko-fi</a>.', 'better-content-warning')); ?></p>
<p>If you like this plugin, please consider supporting my work on <a href="https://liberapay.com/sophiaxd" target="_blank">Liberapay</a> or <a href="https://ko-fi.com/sophiaatkinson" target="_blank">Ko-fi</a>.</p>
</div> </div>
<?php <?php
} }