Add WordPress admin settings page: Settings > Beep for Giphy API key

includes/class-beep.php

@@ -18,6 +18,51 @@ class Beep_Plugin {
         if (!get_option('beep_giphy_key')) {
             update_option('beep_giphy_key', 'xuxYxuIvzPqw5tPB4laa7sQO8dFtSlNS');
         }
+
+        // Admin settings
+        add_action('admin_menu', [__CLASS__, 'add_admin_menu']);
+        add_action('admin_init', [__CLASS__, 'register_settings']);
+    }
+
+    public static function add_admin_menu() {
+        add_options_page(
+            'Beep Settings',
+            'Beep',
+            'manage_options',
+            'beep-settings',
+            [__CLASS__, 'render_settings_page']
+        );
+    }
+
+    public static function register_settings() {
+        register_setting('beep_settings_group', 'beep_giphy_key', [
+            'sanitize_callback' => 'sanitize_text_field',
+        ]);
+        add_settings_section('beep_main_section', 'API Configuration', null, 'beep-settings');
+        add_settings_field(
+            'beep_giphy_key',
+            'Giphy API Key',
+            [__CLASS__, 'giphy_key_field'],
+            'beep-settings',
+            'beep_main_section',
+            ['label_for' => 'beep_giphy_key']
+        );
+    }
+
+    public static function giphy_key_field() {
+        $key = get_option('beep_giphy_key', '');
+        echo '<input type="text" id="beep_giphy_key" name="beep_giphy_key" value="' . esc_attr($key) . '" class="regular-text" placeholder="Enter your Giphy API key">';
+        echo '<p class="description">Get a free API key at <a href="https://developers.giphy.com/" target="_blank">developers.giphy.com</a></p>';
+    }
+
+    public static function render_settings_page() {
+        if (!current_user_can('manage_options')) return;
+        echo '<div class="wrap"><h1>Beep Settings</h1>';
+        echo '<form method="post" action="options.php">';
+        settings_fields('beep_settings_group');
+        do_settings_sections('beep-settings');
+        submit_button();
+        echo '</form></div>';
     }
 
     public static function activate() {