CODEWITHSUNDEEP
phpcsswordpress
Developer
Developer

Reputation: 230

Linking the PHP file to the CSS file

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"); }

Upvotes: 0

Views: 433

Answers (3)

user11717481
user11717481

Reputation: 1602

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' );
}

Upvotes: 1

Developer
Developer

Reputation: 230

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');

Upvotes: 1

vijay pancholi
vijay pancholi

Reputation: 154

/* 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' );

Upvotes: 0

Related Questions