Style a wordpress admin dashboard for page of a plugin

[Nonno]

Hi,

I start learning php making a plugin and I am stuck and out of ideas.

I cant manage to aply a style to a page that I made for a plugin in the administrator view of wordpress.

The page name is hotels.php and the css name is hotels.css

 

Please give me a hint where I am wrong.

Thank you for your time

In hotels.css I wrote just a rule for the selector h2 {font-size:7em;} to pop out when is working.

<?php

// definesc constatele pluginului pe care le voi folosi mai tarziu in functii
define( 'HOTELS__PLUGIN_URL', plugin_dir_url( __FILE__ ) );
define( 'HOTELS_VERSION', '1.0' );

// adaug style pentru pagina pluginului din adminul WP
function my_enqueue($hook) {
    if ( 'hotels.php' != $hook ) {
        return;
    }

    wp_enqueue_script( 'hotels.css', plugins_url( 'hotels.css' ) );
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );
}

// Hook care imi adauga un link in meniul de admin al wordpresului
add_action('admin_menu', 'mt_add_pages');
// functie care imi adauga meniul
function mt_add_pages() {
// optiunile din linkul (meniul WP)
add_menu_page(__('Hotels','menu'), __('Hotels','menu'), 'manage_options', 'hotel-admin-page', 'mt_toplevel_page','dashicons-building' );
}
// imi arata continului pluginului in pagina de administrare din WP
function mt_toplevel_page() {
echo "<h2>" . __( 'Hotels Menu', 'menu' ) . "</h2>";
}

// adauga o functie care reaza baza de date si o activeaza

global $jal_db_version;
$jal_db_version = '1.0';

function jal_install() {
   global $wpdb;
   global $jal_db_version;

   $table_name = $wpdb->prefix . 'hotels';
   
   $charset_collate = $wpdb->get_charset_collate();

   $sql = "CREATE TABLE $table_name (
      id mediumint(9) NOT NULL AUTO_INCREMENT,
      name varchar(155) DEFAULT '' NOT NULL,
      area varchar(155) DEFAULT '' NOT NULL,
      email varchar(254) DEFAULT '' NOT NULL,
      url varchar(155) DEFAULT '' NOT NULL,
      UNIQUE KEY id (id)
   ) $charset_collate;";

   require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
   dbDelta( $sql );

   add_option( 'jal_db_version', $jal_db_version );
}
register_activation_hook( __FILE__, 'jal_install' );
?>

Regards.

[ginerjm]

Uh....

 

1 - maybe you want to post in a CMS forum or a specific Wordpress forum

2 - What is the exact problem? Your whole idea? OR the single CSS selector for that heading?

3 - If it actually is that single CSS selector you should have posted it - in the css forum.

[maxxd]

Try using wp_enqueue_style() instead of wp_enqueue_script() to queue up your style sheet. Not sure if it'll make a difference, but it might...

[Nonno]

 

I want to style this page in the wordpress admin area of the plugin.

For this area I made a stylesheet.

[Nonno]

Try using wp_enqueue_style() instead of wp_enqueue_script() to queue up your style sheet. Not sure if it'll make a difference, but it might...

 

 

I just tried. No difference. Thank you for the tip maxxd.

[maxxd]

So, wait - do you want to style the page, or add controls to the page?

 

If you're looking to style what's there, check the page source and make sure that your style sheet is being included. It could just be a targeting issue within the .css. Also, try printing the value of $hook to screen - looking at it, I'm not sure that WP is going to deliver "hotels.php", but rather something along the lines of "admin.php?page=hotels".

 

If you want to add controls, start reading here - https://codex.wordpress.org/Settings_API and here - https://codex.wordpress.org/Creating_Options_Pages.

[Nonno]

Regarding codex this was my page of inspiration: https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts

 

I try to target that page with hotels.css . But I am not sure if I am thinking this wright.

[maxxd]

admin_enqueue_scripts is the correct hook to use, but your unction checks the value of $hook that gets passed in. Print that out and make sure that it equals 'hotels.php', not 'admin.php?page=hotels' or something else.

[Nonno]

I wrote this in the file but it still does not work:

function my_enqueue($hook) {
    if ( 'hotels.php' != $hook ) {
        return;
    }

    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'hotels.php' );
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );

I will study other plugins in how they implement the style in their page.

[Nonno]

I found the solution here: https://css-tricks.com/snippets/wordpress/apply-custom-css-to-admin-area/

 

The code that worked is:

function my_admin_theme_style() {
    wp_enqueue_style('my-admin-theme', plugins_url('hotels.css', __FILE__));
}
    add_action('admin_enqueue_scripts', 'my_admin_theme_style');
    add_action('login_enqueue_scripts', 'my_admin_theme_style');

Thank you all for your time.