I created a plugin to export some specific content in Wordpress ( called cav and located in /wp-content/plugins/cav ) and I added its admin menu link in the Tools main menu as follows:
define( 'CAV_DIR', plugin_dir_path( __FILE__ ) );
define( 'CAV_URL', plugins_url()."/cav" );
function cavlfo_admin_enqueue($hook) {
global $post;
if ( $hook == 'post-new.php' || $hook=='tools.php?page=CAV' ) {
wp_enqueue_style( 'cavlfo_style', CAV_URL. '/css/cav.css' );
wp_enqueue_style( 'cavlfo_targetted', CAV_URL.'/css/targettedcss.css' );
wp_enqueue_script( 'cavlfo_targetted', CAV_URL.'/js/targetted.js', array("jquery") );
}
}
add_action( 'admin_enqueue_scripts', 'cavlfo_admin_enqueue' );
All this works fine when I used
if( $hook == 'post-new.php' || $hook=='tools.php' ){ . . .}
but I want it to work ONLY when it's actually
if( $hook == 'post-new.php' || $hook=='tools.php?page=CAV' ){ . . .} (Only on the page is CAV )
Any suggestion?
After some digging I got this:
function CAV_options_page()
{
$submenu= add_submenu_page(
'tools.php',
'Cav Options',
'Cav Options',
'manage_options',
'CAV',
'CAV_options_page_html'
);
add_action( 'admin_print_styles-' . $submenu, 'CAV_custom_enqueue' );
add_action( 'admin_print_scripts-' . $submenu, 'CAV_custom_enqueue' );
}
add_action('admin_menu', 'CAV_options_page');
Then I put the styles and scripts that need to be enqueued in a function
function CAV_custom_enqueue(){
wp_enqueue_style( 'cav_targetted', CAV_URL.'/css/targettedcss.css' );
wp_enqueue_script( 'cav_targetted', CAV_URL.'/js/targetted.js', array("jquery") );
}
I hope it helps someone.
Related
I am struggling with finishing a basic plugin I created.
I have a plugin folder with the following structure:
Folder_name: Booking
booking.php
js - script.js
css - style.css
js and css are sub folders in the Booking folder.
I have the following function in the booking.php file:
function sc_booking_process() {
return 'html content which uses divs which connect to js and css files';
}
add_shortcode('cinema-booking', 'sc_booking_process');
?>
The booking.php needs to link to the javascript and css files to work properly but no matter what method I do it wont work.
I have tried putting the following before the above function but they still aren't linked to it:
function my_scripts_and_css() {
wp_enqueue_style( 'my-plugin-css', 'css/style.css' );
wp_enqueue_script( 'my-plugin-js', 'js/script.js', array('jquery'), '20200110' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_and_css' );
Any advise would be really appreciated.
function my_scripts_and_css() {
wp_enqueue_style( 'my-plugin-css', plugins_url( '/css/style.css', __FILE__ ) );
wp_enqueue_script( 'my-plugin-js', plugins_url( '/js/script.js',__FILE__ ), array('jquery'), '20200110' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_and_css' );
It should work now! Please try with this
function my_scripts_and_css() {
wp_enqueue_style( 'my-plugin-css', plugin_dir_url( __FILE__ ).'/css/style.css' );
wp_enqueue_script( 'my-plugin-js', plugin_dir_url( __FILE__ ).'/js/script.js', array('jquery'), '20200110' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_and_css' );
You call wrong dir for css and js, please try this one! hope it will work for you
I'm new to the world of Wordpress and I just started developing my first plugin.
When it's activated it should load one javascript file to wp-admin/post-new.php (Add new post) page.
Here is how I tried to do this:
Plugin
class WP_Blog_Customizer{
function __construct() {
add_action( 'wp_enqueue_scripts', array($this, 'load_dependencies') );
register_activation_hook( __FILE__, array( $this, 'wpa_install' ) );
register_deactivation_hook( __FILE__, array( $this, 'wpa_uninstall' ) );
}
public function load_dependencies(){
wp_enqueue_script('blog-customizer', plugins_url('js/blog-customizer.js', __FILE__),array('jquery'),'1.0.0', true);
}
}
new WP_Blog_Customizer();
wp-admin/post-new.php
if(is_plugin_active( 'blog-customizer/blog-customizer.php' )){
$plugin = new WP_Blog_Customizer();
}
Shouldn't this add_action( 'wp_enqueue_scripts', array($this, 'load_dependencies') ); from the __construct of my plugin class include this js file?
Note
This js file is located under the js folder in my plugin's folder, so the path is correct.
Can anyone tell me why this is not working, and how to make it work?
For loading scripts in admin side we have to use admin_enqueue_scripts hook. So something like this should do the job:
class WP_Blog_Customizer{
function __construct() {
add_action( 'admin_enqueue_scripts', array($this, 'load_dependencies') );
//...other constructor things
}
public function load_dependencies( $hook ){
if ( $hook == 'post-new.php' ) { // for loading script also on post edit screen use ( $hook == 'post-new.php' || $hook == 'post.php' )
wp_enqueue_script('blog-customizer', plugins_url('js/blog-customizer.js', __FILE__),array('jquery'),'1.0.0', true);
}
}
}
new WP_Blog_Customizer();
I'm trying to optimize site speed by I seem to get the following message:
"Eliminate render-blocking JavaScript and CSS in above-the-fold content"
Source:
[https://developers.google.com/speed/pagespeed/insights/?url=wwwallaboutcats.com][1]
I looked through the functions.php file and It seems to be something to do with:
Enqueue scripts and styles for front-end.
/**
* Enqueue scripts and styles for front-end.
*
* #since Ribosome 1.0
*/
add_action( 'wp_enqueue_scripts', 'ribosome_scripts_styles' );
function ribosome_scripts_styles() {
global $wp_styles;
/*
* Adds JavaScript to pages with the comment form to support
* sites with threaded comments (when in use).
*/
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
// Adds JavaScript for handling the navigation menu hide-and-show behavior.
wp_enqueue_script( 'ribosome-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20140711', true );
$font_url = ribosome_get_font_url();
if ( ! empty( $font_url ) )
wp_enqueue_style( 'ribosome-fonts', esc_url_raw( $font_url ), array(), null );
// Loads our main stylesheet.
wp_enqueue_style( 'ribosome-style', get_stylesheet_uri(), '', RIBOSOME_VERSION );
// Custom style
wp_enqueue_style('ribosome-custom-style', get_template_directory_uri()."/custom-style.css");
// Loads the Internet Explorer specific stylesheet.
wp_enqueue_style( 'ribosome-ie', get_template_directory_uri() . '/css/ie.css', array( 'ribosome-style' ), '20121010' );
$wp_styles->add_data( 'ribosome-ie', 'conditional', 'lt IE 9' );
// Dashicons
wp_enqueue_style( 'dashicons' );
// Font Awesome
wp_enqueue_style('font-awesome', get_template_directory_uri() .'/css/font-awesome-4.4.0/css/font-awesome.min.css');
// Toggle search
wp_enqueue_script('ribosome-toggle-search', get_template_directory_uri() .'/js/ribosome-toggle-search.js', array('jquery'), RIBOSOME_VERSION, true);
}
Besides the standard page.php in my Wordpress theme, I have an additional page template called full-page.php.
I want to enqueue an additional script ( script-4.js ) in full-page.php that I don't want to enqueue in the default template. At the moment I have enqueued them using the method below, with if and else statements – the same way in which my stylesheets are enqueued.
I'm wondering if there's a way to do this without enqueuing everything twice? For example, in full-page.php, is it possible for me to just enqueue script-4.js whilst getting it to automatically take scripts 1, 2 and 3 from the default template?
function enqueue_my_styles_and_scripts() {
if (is_page_template('page-templates/full-page.php')) {
wp_enqueue_script(
'mytheme-script-1',
get_template_directory_uri() . '/js/script-1.js' );
wp_enqueue_script(
'mytheme-script-2',
get_template_directory_uri() . '/js/script-2.js' );
wp_enqueue_script(
'mytheme-script-3',
get_template_directory_uri() . '/js/script-3.js' );
wp_enqueue_script(
'mytheme-script-4',
get_template_directory_uri() . '/js/script-4.js' );
}
else {
wp_enqueue_script(
'mytheme-script-1',
get_template_directory_uri() . '/js/script-1.js' );
wp_enqueue_script(
'mytheme-script-2',
get_template_directory_uri() . '/js/script-2.js' );
wp_enqueue_script(
'mytheme-script-3',
get_template_directory_uri() . '/js/script-3.js' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles_and_scripts' );
Do you mean something like this:
function enqueue_my_styles_and_scripts() {
wp_enqueue_script(
'mytheme-script-1',
get_template_directory_uri() . '/js/script-1.js' );
wp_enqueue_script(
'mytheme-script-2',
get_template_directory_uri() . '/js/script-2.js' );
wp_enqueue_script(
'mytheme-script-3',
get_template_directory_uri() . '/js/script-3.js' );
if (is_page_template('page-templates/full-page.php')) {
wp_enqueue_script(
'mytheme-script-4',
get_template_directory_uri() . '/js/script-4.js' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles_and_scripts' );
I want to call a js file which have a ready function to call my api. My Code is..
<?php
.
. // rest all code.................................
.
.
/* Runs on plugin deactivation*/
register_deactivation_hook( __FILE__, 'Pushbiz_remove' );
function Pushbiz_remove() {
/* Deletes the database field */
delete_option('PushBIZ_firstCreation');
delete_option('VarPushBIZapikey');
delete_option('PushBIZRegUrl');
wp_register_script( 'DeactivationJS', plugins_url( '/admin/js/deactivation.js', __FILE__ ));
wp_enqueue_script( 'DeactivationJS' );
}
?>
I am unable to call deactivation.js on on the deactivation of plugin. How can i call this java script on the event of deactivation.
Can you please check below code?
/* Runs on plugin deactivation*/
register_deactivation_hook( __FILE__, 'Pushbiz_remove' );
function Pushbiz_remove() {
/* Deletes the database field */
delete_option('PushBIZ_firstCreation');
delete_option('VarPushBIZapikey');
delete_option('PushBIZRegUrl');
add_action( 'wp_enqueue_scripts', 'DeactivationJS_scripts' );
}
function DeactivationJS_scripts(){
wp_enqueue_script( 'DeactivationJS', plugin_dir_url( __FILE__ ) .'/admin/js/deactivation.js');
}