Jump to content

Style a wordpress admin dashboard for page of a plugin


Nonno
Go to solution Solved by Nonno,

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.