place a direct link to custom-stylesheet, under appearance menu in wp-admin

Question

FINAL UPDATE: Updated code from @birgire solved my issue. If you are facing a similar issue, please read the accepted answer.

---

ORIGINAL QUESTION IN DETAIL: Currently under the appearance menu in admin, there is a link called 'editor', which when clicked leads to editable main-stylesheet, my effort is to put a link to a custom-stylesheet instead, because it is more convenient and I could save me a lot of time in the long run. This link may appear as a sub-menu item under appearance (direct link to my custom-stylesheet.css), which I tend to click more often than anything else.

In effort to achieve that I followed the instructions given in this article on how to add menu items in wp and I was able to construct a code below.

add_action('admin_menu', 'add_appearance_menu');
          function add_appearance_menu() {
add_submenu_page( 'themes.php', 'Custom Stylesheet', 'customstyle', 'manage_options', 'custom-style.css', '$function'); }

However, the code is still not complete as you can see I had no clue what to insert in the actual function in line 3. If you must know, the custom-stylesheet.css is in the root of theme folder and also that I am using a premium theme, but I am not sure if this is a theme level issue.

This incomplete code still seems to work well otherwise, as I can see an added menu under the appearance menu. So, It does not seem absurd, what I am trying to achieve. Although it throws an invalid function error when I click the created menu link. Please give me a hint as to where I should be looking for this function.

Answer 1

You can check out this excellent answer by @Eugene Manuilov. In your case the relevant admin page action is:

load-appearance_page_customstyle

and the url to the custom stylesheet you want to edit:

get_admin_url().'theme-editor.php?file=custom-stylesheet.css&theme='. get_stylesheet().'&scrollto=0';

Then your code example would be:

add_action('admin_menu', 'add_appearance_menu');    
function add_appearance_menu() {
    add_submenu_page( 'themes.php', 'Custom Stylesheet', 'customstyle', 'manage_options', 'customstyle', '__return_null'); 
}

add_action( 'load-appearance_page_customstyle', 'custom_redirect' );
function custom_redirect() {
    if ( 'customstyle' === filter_input( INPUT_GET, 'page' ) ) {
        $file2edit = "custom-stylesheet.css"; // change this to your needs
        $location = get_admin_url().'theme-editor.php?file='.$file2edit.'&theme='. get_stylesheet().'&scrollto=0';
        wp_redirect( $location, 301);
        exit();
    }
}

When you click the submenu link

http://example.com/wp-admin/themes.php?page=customstyle

the hook load-appearance_page_customstyle from

do_action('load-' . $page_hook);

in /wp-admin/admin.php is activated with the redirect defined above.

Answer 2

From the documentation:

$function

(callback) (optional) The function to be called to output the content for this page.

In other words, this is the function that will be responsible for outputting content on your submenu page. You need to create it, give it a nice unique name, and then specify this name as the last argument into add_submenu_page:

public function wp2804_submenu_output_function {
    ?>
    <h1>here be the title</h1>
    <?php
} // end of wp2804_submenu_output_function 
add_submenu_page( 'themes.php', /* all the other stuff */ 'wp2804_submenu_output_function');

Answer 3

You can try to insert css menu widgets with submenu on it.You can download some decent widgets from

http://freebietemplate.com/css_designs/css_designs.html