• Resolved Carl Brubaker

    (@imconfused4sure)


    I find learning WordPress like learning a foreign language. I have a dictionary but no idea how to make sentences.

    my current plugin directory structure is:

    
    my-plugin
        |-admin
        |    |-css
        |    |    |-style.css
        |    |    |-index.php
        |    |    
        |    |-admin-menu.php
        |    |-index.php
        |    |-settings-page.php
        |
        |-index.php
        |-my-plugin.php
    

    I want style.css to load with settings-page.php. I know I need to use some form of wp_enqueue_style() or the admin version with an add_action(). I can find all of that information all over the place. What I can’t find is what is the proper file I am supposed to put those functions in to make it work properly.

    Any help greatly appreciated.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Joy

    (@joyously)

    Can I assume that those index.php files are all /* Silence is golden */?
    The file in the plugin folder that has the plugin headers is loaded on every page request to WP. That file can choose to use add_action calls to implement whatever is needed, but the action handler has to be loaded or it can’t execute.
    You can add an action to the admin enqueue hook, and it should check if the current page is your plugin page, and if so, then enqueue the style.

    Howdy_McGee

    (@howdy_mcgee)

    The Plugin Developer Handbook is a good start. There’s a section on Enqueueing Your Scripts with the following example:

    /**
     * Admin Enqueue Scripts
     *
     * @param String $hook
     */
    function my_enqueue( $hook ) {
        
        // The page slug
        if ( 'myplugin_settings.php' !== $hook ) {
            return;
        }
    
        wp_enqueue_script(
            'ajax-script',
            plugins_url( '/js/myjquery.js', __FILE__ ), // URL relative to file directory.
            array( 'jquery' ),
            '1.0.0',
            true
        );
    
    }
    add_action( 'admin_enqueue_scripts', 'my_enqueue' );

    Passing __FILE__ to the plugins_url() will return the directory the file is in. For example, if you run this in the main plugin file, in the root directory of your plugin you would get:

    {$website_url}/wp-content/plugins/{$my_plugin}/js/myjquery.js.

    Thread Starter Carl Brubaker

    (@imconfused4sure)

    Thanks @joyously, that was the info I was looking for. I guess the index.php was a little redundant.

    Thanks @howdy_mcgee as well. That was the information I was finding, but uncertain as to where it was supposed to go.

    Moderator bcworkz

    (@bcworkz)

    add_action() calls and the respective callback declarations can go on any file that is loaded when your plugin is first loaded. From your example, my-plugin.php, or any file that is required or included from that file.

    The “admin_enqueue_scripts” hook only fires for admin requests. A “hook_suffix” is passed to your callback, which indicates what admin page had been requested. Your callback can verify your settings page was requested before enqueuing any styles or scripts.

    Thread Starter Carl Brubaker

    (@imconfused4sure)

    @howdy_mcgee @bcworkz This is what I ended up with in my-plugin.php. I tried the @param String $hook but I couldn’t get it to work after multiple attempts of different iterations I found across the web. I would like to learn it, if possible, as it seems it would be easier and make the code more readable. If you have anymore suggestions towards that I would appreciate it.

    
    if (!defined("ABSPATH")) {
        exit;
    }
    
    if (is_admin()) {
        require_once plugin_dir_path(__FILE__) . "admin/admin-menu.php";
        require_once plugin_dir_path(__FILE__) . "admin/settings-page.php";
    }
    
    function my_plugin_styles()
    {
        if (get_current_screen()->id !== "toplevel_page_my-plugin") {
            return;
        }
        wp_enqueue_style(
            "custom_wp_admin_css", plugins_url("admin/css/style.css", __FILE__)
        );
    }
    
    add_action("admin_enqueue_scripts", "my_plugin_styles");
    
    
    Joy

    (@joyously)

    Does your file have the plugin headers, as I mentioned?
    https://developer.www.ads-software.com/plugins/plugin-basics/header-requirements/

    Thread Starter Carl Brubaker

    (@imconfused4sure)

    @joyously yes my-plugin.php has the headers.

    Moderator bcworkz

    (@bcworkz)

    The same screen ID is passed to your callback. It needs to collect it, for example function my_plugin_styles( $screen_id )

    Then you can check the value of $screen_id instead of checking the value returned from get_current_screen()->id. Same end through different means.

    Does the link to your stylesheet appear at all in the source HTML for your my-plugin admin page? Is the status in your browser’s network developer tool for this request 200? If so, the enqueuing is successful and the problem lies elsewhere.

    Thread Starter Carl Brubaker

    (@imconfused4sure)

    @bcworkz Got it! Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Plugin Location/Structure for wp_enque_style() Admin Page’ is closed to new replies.