Linking the PHP file to the CSS file

Question

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

jv-k · Accepted Answer · 2023-01-07 12:47:52Z

1

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

edited Jan 7, 2023 at 12:47

jv-k

7112 gold badges6 silver badges24 bronze badges

answered Jan 6, 2023 at 3:47

Developer

2101 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user11717481 · Accepted Answer · 2023-01-07 17:26:27Z

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

vijay pancholi · Accepted Answer · 2023-01-06 06:13:43Z

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

Collectives™ on Stack Overflow

Linking the PHP file to the CSS file

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related