Adding Custom Admin Menu Icon

favourite-Coder · Jan 19, 2024 · c1780c9 · c1780c9
1 parent 8948fae
commit c1780c9
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 12 deletions.
diff --git a/custom.svg b/custom.svg
diff --git a/index.php b/index.php
@@ -24,17 +24,16 @@ function __construct()
     //MENU
     function ourMenu()
     {
-        add_menu_page(
+        $mainPageHook = add_menu_page(
             'Words To Filter',
             'Word Filter',
             'manage_options',
             'ourwordfilter',
-            array(
-                $this, 'wordFilterPage'
-            ),
-            'dashicons-smiley',
+            array($this, 'wordFilterPage'),
+            'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMCAyMEMxNS41MjI5IDIwIDIwIDE1LjUyMjkgMjAgMTBDMjAgNC40NzcxNCAxNS41MjI5IDAgMTAgMEM0LjQ3NzE0IDAgMCA0LjQ3NzE0IDAgMTBDMCAxNS41MjI5IDQuNDc3MTQgMjAgMTAgMjBaTTExLjk5IDcuNDQ2NjZMMTAuMDc4MSAxLjU2MjVMOC4xNjYyNiA3LjQ0NjY2SDEuOTc5MjhMNi45ODQ2NSAxMS4wODMzTDUuMDcyNzUgMTYuOTY3NEwxMC4wNzgxIDEzLjMzMDhMMTUuMDgzNSAxNi45Njc0TDEzLjE3MTYgMTEuMDgzM0wxOC4xNzcgNy40NDY2NkgxMS45OVoiIGZpbGw9IiNGRkRGOEQiLz4KPC9zdmc+Cg==',
             100
-        );
+        ); // plugin_dir_url(__FILE__) . 'custom.svg',
+        // To use custom color on svg
 
         //SUB-MENU Word List
         add_submenu_page(
@@ -59,19 +58,42 @@ function ourMenu()
                 $this, 'optionsSubPage'
             )
         );
+
+        //LOAD CSS
+        add_action("load-{$mainPageHook}", array($this, 'mainPageAssets'));
+
     }
 
-    //SUB-MENU
-    function optionsSubPage()
-    { ?>
-        Hello Developer
-    <?php   }
+    //LOAD CSS
+    function mainPageAssets() {
+         wp_enqueue_style('filterAdminCss', plugin_dir_url(__FILE__) . 'styles.css');
+    }
 
     //MENU
     function wordFilterPage()
     { ?>
-        Hello Developer
+               <div class="wrap">
+            <h1>Word Filter</h1>
+            <form  method="POST">
+             <label for="plugin_words_to_filter">
+                  <p>Enter a <strong>comma-seprated</strong> list of words to filter from your site's content.</p>
+             </label>
+             <div class="word-filter__flex-container">
+                <textarea name="plugin_words_to_filter" 
+                id="plugin_words_to_filter" 
+                placeholder="Fool, bad, Idiot, awful, horrible"></textarea>
+             </div>
+             <input type="submit" name="submit" id="submit" class="button button-primary" value="Save Changes">
+            </form>
+        </div>
 <?php   }
+
+    //SUB-MENU
+    function optionsSubPage()
+    { ?>
+
+    <?php   }
+
 }
 
 $ourWordFilterPlugin = new ourWordFilterPlugin();
diff --git a/styles.css b/styles.css
@@ -0,0 +1,9 @@
+.word-filter__flex-container{
+    display: flex;
+}
+
+.word-filter__flex-container textarea{
+flex: 1;
+height: 200px;
+margin-bottom: 20px;
+}