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();
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 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.
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');
}
Can somebody help me? I'm feeling so stupid. I took example code from WordPress codex, made a example plugin in my webpage, but there no respond...
PHP code is here:
/**
* Plugin Name: Ada Ajax Test
* Description: WP Codex based ajax example
* Version: 1.0.0
* Author: M. A. Tomas
* Author URI: http://www.matomas.cz
* License: GPL2
*/
add_action( 'admin_enqueue_scripts', 'my_enqueue' );
function my_enqueue($hook) {
if( 'index.php' != $hook ) {
// Only applies to dashboard panel
return;
}
wp_enqueue_script( 'ajax-script', plugins_url( '/js/my_query.js', __FILE__ ), array('jquery') );
// in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value
wp_localize_script( 'ajax-script', 'ajax_object',
array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
}
// Same handler function...
add_action( 'wp_ajax_my_action', 'my_action_callback' );
function my_action_callback() {
global $wpdb;
$whatever = intval( $_POST['whatever'] );
$whatever += 10;
return $whatever;
wp_die();
}
// shortcode pro zobrazeni na strance
add_shortcode( 'ajax-zkouska', 'my_action_callback' );
and Javascript code in external file is here:
// JavaScript Document
jQuery(document).ready(function($) {
var data = {
'action': 'my_action',
'whatever': ajax_object.we_value // We pass php values differently!
};
// We can also pass the url value separately from ajaxurl for front end AJAX implementations
jQuery.post(ajax_object.ajax_url, data, function(response) {
alert('Got this from the server: ' + response);
});
});
Where I mistake?
You have a few things mixed up.
Front End
If you are targeting the frontend, then you need to use this hook:
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
This allows you to add the needed scripts to the front end and not the admin side.
Ajax Calls
All ajax calls are executed within the admin context. So you will need to test for it and add the ajax hooks accordingly.
if ( is_admin() ) {
add_action( 'wp_ajax_my_frontend_action', 'my_frontend_action_callback' );
add_action( 'wp_ajax_nopriv_my_frontend_action', 'my_frontend_action_callback' );
add_action( 'wp_ajax_my_backend_action', 'my_backend_action_callback' );
// Add other back-end action hooks here
} else {
// Add non-Ajax front-end action hooks here
}
No Priv
The no_priv hook is meant for users that are not logged in. Add it if that's your intention.
Here is my plugin code:
<?php
class myplugin{
function __construct(){
//stuff
add_action( 'admin_head', array(&$this, 'fb_add_tinymce') );
}
function fb_add_tinymce() {
global $typenow;
// only on Post Type: post and page
if( ! in_array( $typenow, array( 'post', 'page' ) ) )
return ;
add_filter( 'mce_external_plugins', array(&$this,'fb_add_tinymce_plugin' ));
// Add to line 1 form WP TinyMCE
add_filter( 'mce_buttons', array(&$this,'fb_add_tinymce_button' ));
}
// inlcude the js for tinymce
function fb_add_tinymce_plugin( $plugin_array ) {
$plugin_array['fb_test'] = plugins_url( 'lib/js/mce-buttons.js', __FILE__ );
// Print all plugin js path
var_dump( $plugin_array );
return $plugin_array;
}
// Add the button key for address via JS
function fb_add_tinymce_button( $buttons ) {
array_push( $buttons, 'fb_test_button_key' );
// Print all buttons
//var_dump( $buttons );
return $buttons;
}
}
$plg = new myplugin();
?>
mce-buttons.js file:
(function($) {
console.log(1);
alert('test');
})(jQuery);
The plugin is enabled but when i go to add a new post i cannot see the alert box popping up or the console log outputting the number 1 just to make sure it works.
I simply reinstalled AMPPS and that solved the issue.
You appear to be missing the wp_enqueue_script call.