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
* Description: Blocks access to content behind a content warning popup with optional trigger warnings.
* Version: 1.0
* Version: 1.1
* Author: Sophia Atkinson
* Author URI: https://sophia.wtf
* Text Domain: better-content-warning
@ -16,7 +16,7 @@
// Add metabox
add_action(
'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;
}
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_enabled', isset($_POST['cw_enabled']) ? 'on' : '');
update_post_meta($post_id, '_cw_warnings', sanitize_text_field($_POST['cw_warnings']));
}
);
@ -62,30 +62,31 @@ add_filter(
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;
}
$post_id = get_the_ID();
$warnings = trim(get_post_meta($post_id, '_cw_warnings', true));
$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.');
$button = get_option('cw_button_text', 'Continue');
$cookie_duration = 180;
$exit_button = get_option('cw_exit_button_text', 'Exit');
$post_id = get_the_ID();
$warnings = trim(get_post_meta($post_id, '_cw_warnings', true));
$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.');
$continue_button = get_option('cw_button_text', 'Continue');
$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);
$warning = $warnings ? esc_html($warnings) : esc_html($default);
ob_start();
?>
ob_start();
?>
<div id="cw-popup" class="cw-overlay">
<div class="cw-box">
<p><strong><?php echo $header; ?></strong></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>
<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>
<script>
@ -114,20 +115,20 @@ add_filter(
});
})();
</script>
<?php
return ob_get_clean() . '<div id="cw-content">' . $content . '</div>';
<?php
return ob_get_clean() . '<div id="cw-content">' . $content . '</div>';
}
);
// Add styles
add_action(
'wp_head', function () {
$bg = esc_attr(get_option('cw_bg_color', '#1E1F22'));
$overlay_bg = esc_attr(get_option('cw_overlay_bg_color', '#2E3035'));
$font = esc_attr(get_option('cw_font_size', '1.1em'));
$btn = esc_attr(get_option('cw_button_color', '#9E93DC'));
$btn_hover = esc_attr(get_option('cw_button_hover_color', '#8179d5'));
echo "
$bg = esc_attr(get_option('cw_bg_color', '#1E1F22'));
$overlay_bg = esc_attr(get_option('cw_overlay_bg_color', '#2E3035'));
$font = esc_attr(get_option('cw_font_size', '1.1em'));
$btn = esc_attr(get_option('cw_button_color', '#9E93DC'));
$btn_hover = esc_attr(get_option('cw_button_hover_color', '#8179d5'));
echo "
<style>
.cw-overlay {
position: fixed;
@ -169,32 +170,39 @@ add_action(
// Settings menu
add_action(
'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_filter(
'plugin_action_links_' . plugin_basename(__FILE__), function ($links) {
$settings_link = '<a href="options-general.php?page=cw-settings">Settings</a>';
array_unshift($links, $settings_link);
return $links;
$settings_link = '<a href="options-general.php?page=cw-settings">Settings</a>';
array_unshift($links, $settings_link);
return $links;
}
);
// Register settings
add_action(
'admin_init', function () {
register_setting('cw_settings_group', 'cw_prefix');
register_setting('cw_settings_group', 'cw_default_message');
register_setting('cw_settings_group', 'cw_button_text');
register_setting('cw_settings_group', 'cw_bg_color');
register_setting('cw_settings_group', 'cw_font_size');
register_setting('cw_settings_group', 'cw_button_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_show_to_admins');
register_setting('cw_settings_group', 'cw_exit_button_text');
}
register_setting('cw_settings_group', 'cw_prefix');
register_setting('cw_settings_group', 'cw_default_message');
register_setting('cw_settings_group', 'cw_button_text');
register_setting('cw_settings_group', 'cw_exit_button_text');
register_setting('cw_settings_group', 'cw_font_size');
register_setting('cw_settings_group', 'cw_bg_color');
register_setting('cw_settings_group', 'cw_overlay_bg_color');
register_setting('cw_settings_group', 'cw_button_color');
register_setting('cw_settings_group', 'cw_button_hover_color');
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
@ -202,60 +210,77 @@ function cw_settings_page()
{
?>
<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">
<?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">
<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>
<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>
</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>
</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>
</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>
</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>
</tr>
<tr>
<th><label for="cw_bg_color">Popup Background Color</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>
<th scope="row"><label for="cw_font_size"><?php esc_html_e('Font Size', 'better-content-warning'); ?></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>
</tr>
<tr>
<th><label for="cw_button_color">Button Color</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>
<th scope="row"><label for="cw_bg_color"><?php esc_html_e('Popup Background Color', '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 wp-color-picker"></td>
</tr>
<tr>
<th><label for="cw_button_hover_color">Button Hover Color</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>
<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_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>
</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>
</div>
</div>
<div style="margin-top:2em; color:#666;">
<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>
<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>
</div>
<?php
}