Develop Reference

Link Javascript file with wordpress plugin

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

How to enqueue my scripts and style for the best page speed score

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

Custom css and JS on some admin pages in Wordpress

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.

Is there a simpler way of enqueuing scripts for multiple page templates in Wordpress?

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

Wordpress plugin pass javascript variable to php

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.