CODEWITHSUNDEEP
phpcsswordpresswoocommerceelementor
Edouard
Edouard

Reputation: 403

How to modify CSS in a specific page of the WP admin dashboard (backend)

I'm trying to remove both padding and the title of the dashboard page of the admin panel of WordPress. The dashboard was redesigned with the "Welcome Dashboard for elementor" + Elementor.

I tried this script:

var domainURL = window.location.origin;
var path = window.location.pathname;
if ((path == "/wp-admin/" || path == "/wp-admin" || path == "/wp-login.php") && domainURL+path)
{
    document.getElementsByClassName("h1").style.display = "none";
}

It is not working. Would you have fixes or ideas to achieve this, please?

Upvotes: 2

Views: 2351

Answers (4)

Walf
Walf

Reputation: 9288

To add a CSS snippet to specific pages in admin, the easiest way is a combination of others' answers:

add_action('admin_head', function() {
    if (get_current_screen()->id === 'settings_page_your_plugin') {
        echo <<<'EOHTML'
            <style>
                /* Your CSS rulesets */
            </style>
            EOHTML;
    }
});

You can also target other attributes of the current screen. Log/dump the result of get_current_screen() to see them.

Upvotes: 0

SimonMayer
SimonMayer

Reputation: 4916

I had a similar problem, so I stumbled across this, but eventually I was able to load a css file from my template in WP admin. So it shouldn't be necessary to inject a <style> element, and instead you can do:

function enqueue_admin_stylesheet()
{
    if ('a-specific-page' == get_current_screen()->base) {
        wp_enqueue_style(
            'your-admin-css',
            sprintf('%s/assets/css/admin-style.css', get_template_directory_uri())
        );
    }
}

add_action('admin_enqueue_scripts', 'enqueue_admin_stylesheet');

Upvotes: 1

amarinediary
amarinediary

Reputation: 5439

You have to inject the css into the wordpress header to actually modify the wordpress css admin console. In your function.php file add the following:

<?php function theme_admin_css() {
echo '
<style>
/* ... Your custom css goes here ... */
</style>
'; }
add_action( 'admin_head', 'theme_admin_css' ); ?>

Now to easily find your the element you want to target and style you can do the following:

In your browser: Right click on the element > Inspect. Find your element in the source code: Right Click > Copy > Copy selector

Now you can paste your selector in-between the style tag and customize it.

One more thing, you should use the !important statement (eg: background-color:red!important)

Upvotes: 1

7uc1f3r
7uc1f3r

Reputation: 29624

In general, the <body> classes contain a unique class specific to that one page (e.g. page name), you could add this as the first selector to your CSS code.

// Backend
function filter_admin_body_class( $classes ) {  
    // Current url
    $current_url = '//' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
    
    // Get last part from url. Expl: index.php
    $last_part = basename( parse_url( $current_url, PHP_URL_PATH ) );
    
    if ( $last_part == 'index.php' ) {
        // String
        $classes .= 'my-custom-backend-class';
    }
    
    return $classes;
}
add_filter( 'admin_body_class', 'filter_admin_body_class', 10, 1 );

Additional: For frontend pages you could use body_class

  • Note: The Conditional Tags of WooCommerce and WordPress can be used in your template files to change what content is displayed based on what conditions the page matches.
// Frontend
function filter_body_class( $classes ) {
    // Returns true on the cart page.
    if ( is_cart() ) {
        // Array
        $classes[] = 'my-custom-frontend-class';
    }
    
    return $classes;
}
add_filter( 'body_class', 'filter_body_class', 10, 1 );

Upvotes: 1

Related Questions