I was trying to include a css file in my WordPress plugin admin page. I have tried below method
function theme_name_scripts() {
wp_enqueue_style( 'jspro', '/includes/parts/css/jspro.min.css');
}
But unfortunately it doesn't work. My css file path is correct as given here,and I have tried almost every method. Any idea?
You need to have an absolute URL to your css file, and hook into the correct admin hook (in this case, 'admin_init'):
add_action( 'admin_init', 'theme_name_scripts' );
function theme_name_scripts() {
wp_enqueue_style( 'jspro', plugins_url('includes/parts/css/jspro.min.css', __FILE__));
}
In admin mode there is a special hook 'admin_enqueue_scripts' that WP reccomends to use.
add_action('admin_enqueue_scripts', 'theme_name_scripts');
function theme_name_scripts() {
wp_enqueue_style('jspro', '/includes/parts/css/jspro.min.css');
}
Also, hook can also be used to check the name of current admin page:
function theme_name_scripts( $hook ) {
if ( $hook != 'edit.php' )
return;
wp_enqueue_style('jspro', '/includes/parts/css/jspro.min.css');
}
Related
I have a basic bunch of CSS/Js files defined in my functions.php file. There I register and enqueue those scripts and stylesheets.
But in specific situations I want to load additional scripts based on the site template which is used.
I tried to register and enqueue those additional scripts in the specific template file, but it didnt work. It does only work when included in the functions.php.
What is the correct way to do this?
You can try like this
add_action( 'wp_enqueue_scripts', 'enqueue_file' );
function enqueue_file() {
if(is_front() || is_archive()){ // you can set here condition
wp_enqueue_style( 'main-css', get_template_directory_uri() .
'/static/css/main.min.css"' );
}
}
add this to your functions.php in child theme:
add_action(
'wp_enqueue_scripts',
'loadActionFrontend'
);
function loadActionFrontend()
{
if( is_page( 'pageid here' ) ) {
wp_register_script(
'scriptName',
'scripturl',
[],
'',
true
);
wp_enqueue_script('scriptName');
}
}
with the query if( is_page( 'pageid here' ) ) you can insert your desired pageid where the script shold loaded.
I am trying to find a way to dequeue styles and scripts on the "login, password reset and register " default wp pages.
I understand there is 'login_enqueue_scripts' but no such thing as login_dequeue_scripts.
Whats your approach ? Ive tried something like this:
add_filter('body_class', function($classes) {
if (in_array('login', $classes)) {
wp_dequeue_style( 'list-css' );
wp_dequeue_style( 'blog-css' );
wp_dequeue_style( 'dir-css' );
wp_dequeue_style( 'author-css' );
}
return $classes;
});```
You could just use the wp_dequeue_script/style function for the login_enqueue_script action. Like so:
function custom_login_page() {
wp_dequeue_style( 'list-css');
}
add_action( 'login_enqueue_scripts', 'custom_login_page' );
The action of 'login_enqueue_scripts' is what happens when the other scripts/styles are loaded on that page. You can create a custom function to run when that happens, which is what you want.
However, rather than dequeueing, why not just write some of your own CSS for the elements on the page, then enqueue whatever that custom CSS?
function custom_login_css() {
wp_enqueue_style( 'custom-login-styles', get_stylesheet_directory_uri() . '/custom-login.css' );
}
add_action( 'login_enqueue_scripts', 'custom_login_css' );
Here's a good reference for the different elements you can customize with CSS on the WP login page.
I'm developing my first WordPress plugin. I need to use a custom CSS for the settings pages that I created for the plugin but when I enqueue my stylesheet file, it affects the whole WordPress backend and not just my plugin's settings page.
Is possible to solve this problem? How?
When you want to add styles or scripts in WordPress you enqueue them using hooks. For the admin side the hook you are looking for is called admin_enqueue_scripts.
You can add something like
/**
* Register and enqueue a custom stylesheet in the WordPress admin.
*/
function wpdocs_enqueue_custom_admin_style() {
wp_register_style( 'custom_wp_admin_css', plugin_dir_url( __FILE__ ) . 'css/woo-solo-api-admin.css', false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'wpdocs_enqueue_custom_admin_style' );
You just need to be careful to correctly specify the url of the css script you want to enqueue.
Hope this helps.
Oh and https://developer.wordpress.org page is great for finding out about WordPress functionality, core functions, hooks etc.
Also check out the plugin handbook: https://developer.wordpress.org/plugins/
Loads of useful information can be found there :)
EDIT:
admin_enqueue_scripts has a parameter you can use read more
/**
* Register and enqueue a custom stylesheet in the WordPress admin.
*/
function wpdocs_enqueue_custom_admin_style( $hook ) {
if ( $hook === 'edit.php' ) {
wp_register_style( 'custom_wp_admin_css', plugin_dir_url( __FILE__ ) . 'css/woo-solo-api-admin.css', false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' );
}
}
add_action( 'admin_enqueue_scripts', 'wpdocs_enqueue_custom_admin_style' );
This will load the script only on the edit post screen.
You can see what hook is loaded on your screen by adding
error_log( print_r( $hook, true ) );
In your wpdocs_enqueue_custom_admin_style function before the condition. Enable the debug log in your wp-config.php and you'll get a name of your custom post screen hook.
Alternatively, you could target the $current_screen to match the CPT's screen. This will load the script only on that page.
I want to add a stylesheet for the options_page of my plugin only. But how to do that? My code so far:
function add_options_page_style() {
wp_register_style('options_page_style', plugins_url('css/options_style.css',__FILE__));
wp_enqueue_style('options_page_style');
}
add_action( 'admin_menu', 'add_options_page_style' );
I could place an if statement before the line with add_action... but I'm not sure how to filter my options page. I already tried the $pagename variable and also this line: $wp_query->queried_object->post_name; but it didn't work.
The filter $_GET['page'] does work but might break in future versions.
Somewhere you'll be registering page like this:-
function register_page(){
global $page_hook_suffix;
$page_hook_suffix = add_options_page('Your_plugin', 'Your_plugin', 'manage_options', __FILE__, 'display_form');
}
add_action('admin_menu', 'register_page');
And while enqueueing script you'll do something like this:-
function my_enqueue($hook) {
global $page_hook_suffix;
if( $hook != $page_hook_suffix )
return;
wp_register_style('options_page_style', plugins_url('css/options_style.css',__FILE__));
wp_enqueue_style('options_page_style');
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );
function load_custom_wp_admin_style($hook) {
// Load only on ?page=mypluginname
if($hook != 'toplevel_page_mypluginname') {
return;
}
wp_enqueue_style( 'custom_wp_admin_css', plugins_url('admin-style.css', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );
add your page slug as suffix to toplevel_page_
e.g. if page slug is this-plugin-options
then
if($hook != 'toplevel_page_this-plugin-options') {
return;
}
here is wordpress doc with
Example: Load CSS File on All Admin Pages,
Example: Load CSS File from a plugin on specific Admin Page
What I want is to add my custom javascript to my plugin's home page only.
Here is what I did:
1. First registered my script,
function register_my_plugin_script() {
/* Register our script. */
wp_register_script( 'my-plugin-script', plugins_url('/script.js', __FILE__), array('jquery'));
}
add_action( 'admin_init', 'register_my_plugin_script' );
2. Then made a call to it,
function call_my_script(){
wp_enqueue_script( 'my-plugin-script' );
}
3. Then tried to call it only in my home page like this:
function my_home_page(){
add_action('admin_enqueue_scripts', 'call_my_script');
}
But it did not add the script.
Further code of adding menu page :
function my_menu_pages(){
add_menu_page('some title', 'some menu', 'manage_options', 'my-plugin-homepage', 'my_home_page');
}
add_action('admin_menu', 'my_menu_pages');
Note:
if I include my script directly in my_home_page function without registering or calling like this, then it works.
function my_home_page(){
wp_enqueue_script( 'my-plugin-script', plugins_url('/script.js', __FILE__), array('jquery'));
}
What is the best way to do this?
There is a hook for your plugin's pages in the admin area - but it can be difficult to work out exactly what it is called.
Try this first:
add_action('admin_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts($hook)
{
echo "<!-- Hook = {$hook} -->" . PHP_EOL;
}
... then visit your plugin's page in the admin area and view the HTML source to find the output of that variable. Alternatively, set a breakpoint and view it in your debugger.
Once you've found the hook name, you can do the following in your plugin code:
add_action('admin_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts($hook)
{
if ($hook == 'my_plugin_page_hook-location')
{
wp_register_script(...);
wp_enqueue_script(...);
wp_register_style(...);
wp_enqueue_style(...);
}
}