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

Linking the PHP file to the CSS file – WordPress

I want to style the WordPress admin area.
For this purpose, I have copied the following code in the function file and started styling it:

 function custom_css()
    
    { echo '<style>
    
    .widefat {
        width: 1700px !important;
        max-width: 1700px !important;
    }
    
    </style>'; }
 add_action('admin_head','custom_css');

this way, the function file becomes very crowded, and that’s why I want to style it in a separate CSS file; How can I enter the link of my style.css file in the code above?

I have used this code but it did not work:

{ echo include ("/style.css"); }
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I found the answer to my question. The answer is as follows:

    function custom_css() { 
    echo wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', array(), '4.0.0' ); 
}

add_action('admin_head','custom_css');

  2. 0 
    /* admin_enqueue_scripts is the proper hook to use when enqueuing scripts and styles that are meant to be used in the administration panel. Despite the name, it is used for enqueuing both scripts and styles. */


Enqueue a custom stylesheet in the admin

Sometimes you want to load a set of CSS and/or Javascript documents to all admin pages. You can do this from within your plugin or from your themes function file:

/**
 * Register and enqueue a custom stylesheet in the WordPress admin.
 */

// get_template_directory_uri() -> Retrieves template directory URI for the active theme.

function wpdocs_enqueue_custom_admin_style() {

        // loading css
        
        wp_register_style( 'custom_wp_admin_css', get_template_directory_uri(). '/admin-style.css',             false, '1.0.0' );
        
        wp_enqueue_style( 'custom_wp_admin_css' ); // Enqueue a style.
        
        // loading js
        
        wp_register_script( 'custom_wp_admin_js', get_template_directory_uri().'/admin-script.js',             array('jquery-core'),false, true );
        
        wp_enqueue_script( 'custom_wp_admin_js' ); // Enqueue a script.
}

add_action( 'admin_enqueue_scripts', 'wpdocs_enqueue_custom_admin_style' );
    Login or Signup to reply.
  3. 0

    WordPress theme’s css files are responsible for the styling and look of the website. They are located in the /wp-content/themes/ directory. The css files are usually named style.css, there are some additional options you can try:

    Inside style.css use the @import at-rule to link to another file (if it is hosted externally).

    @import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");

    Edit the header.php theme to link to an external stylesheet.

    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

    In order to link a CSS file in WordPress header, you need to first enqueue the file using wp_enqueue_scripts from functions.php After that, you can then link to it using get_stylesheet_uri

    function roofers_wp_resources(){
    wp_enqueue_style('style', get_stylesheet_uri());
    wp_enqueue_style('name css file', get_template_directory_uri() . 'css file');
}
add_action('wp_enqueue_scripts', 'roofers_wp_resources');

    or enqueue file pointing to your external css url

    add_action( 'wp_enqueue_scripts', 'register_custom_plugin_styles' );

function register_custom_plugin_styles() {
    wp_register_style( 'style', 'CSS URL' );
    wp_enqueue_style( 'style' );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search