Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – I'm looking for a way for my own Plugin to integrate my own CSS

Good morning

I have programmed my own WordPress plugin. But I don’t like the output in the backend. For example, I want a heading not in black but in white and I want it to be larger.
Since I don’t want to write the styles directly into the code, I need my own CSS file.
The problem is, I don’t know how to integrate a CSS file into my plugin so that it makes my heading bigger in the backend.
Can you give me some tips?

So far I have entered the CSS styles directly into the code.
But I can’t change tables created by WordPress.
For example the style table.widefat

Tags:

2

Answers


  1. 0

    you can call back your function in wordpress hook, given example below

    my-plugin is handle, its always change for entering new file
    plugin_url(), is wp built in function where you specify your css file directory/file-name.css

        function getdata_wp_code_in_wp_head(){
     wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) );
     wp_enqueue_style( 'my-plugin' );
    }
   add_action('wp_head' , 'getdata_wp_code_in_wp_head');

    you can also use the below code

    function code_head(){
  wp_enqueue_style( 'vscf_style', plugins_url('/css/vscf-style.min.css') );
}
add_action( 'wp_enqueue_scripts', 'code_head' );
    Login or Signup to reply.
  2. 0

    To integrate your own CSS file into your WordPress plugin for the backend, you need to enqueue the CSS file properly using the admin_enqueue_scripts action hook. Here’s how you can do it:

    Create a CSS file (e.g., custom-admin-styles.css) and place it in your plugin folder.

    In your main plugin PHP file, use the following code to enqueue your CSS file:

        function my_plugin_admin_styles() {
    wp_enqueue_style(
        'my-custom-admin-styles', // Unique handle for your stylesheet
        plugin_dir_url(__FILE__) . 'custom-admin-styles.css', // URL to your CSS file
        array(), // Dependencies (if any)
        '1.0' // Version number
    );
}
add_action('admin_enqueue_scripts', 'my_plugin_admin_styles');

    Example for CSS (custom-admin-styles.css):

     h1, h2, h3 {
    color: white;
    font-size: 2em; /* Adjust size as needed */
}

table.widefat {
    background-color: #f0f0f0; /* Example: Changing the background color */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search