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
Related
I am writing my first plugin for wordpress and I'm attempting to load scripts in with my plugin.
function somadome_enqueue_script() {
wp_enqueue_script( 'somajQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',array(), '1.0');
wp_enqueue_script( 'logoslickjs', plugin_dir_url( __FILE__ ) . 'js/slick.js',array('jQuery'), '1.0');
wp_enqueue_script( 'logoslider', plugin_dir_url( __FILE__ ) . 'js/somaslick.js',array('jQuery'), '1.0');
wp_enqueue_style('slickcss', plugin_dir_url( __FILE__ ) . '/css/slick.css', array(), '1.0', 'all');
wp_enqueue_style('logocss', plugin_dir_url( __FILE__ ) . '/css/somaslide.css', array(), '1.0', 'all');
}
/*Create Plugin Parts*/
add_action('init', 'create_carousel');
add_action('wp_enqueue_scripts', 'somadome_enqueue_script');
The issue is the CSS loads (two lines at the bottom) but the code at the top (the scripts) doesn't Load and I'm trying to figure out why the Javascript/JQuery code isn't loading.
I echo'd the paths to check them and they load into the browser fine, so they exist. But aren't being loaded by wordpress.
From looking at the code, I'm assuming it's not loading because you've missed the forward slash from the JavaScript files in the enqueue function.
function somadome_enqueue_script() {
wp_enqueue_script( 'somajQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',array(), '1.0');
wp_enqueue_script( 'logoslickjs', plugin_dir_url( __FILE__ ) . '/js/slick.js',array('jQuery'), '1.0');
wp_enqueue_script( 'logoslider', plugin_dir_url( __FILE__ ) . '/js/somaslick.js',array('jQuery'), '1.0');
wp_enqueue_style('slickcss', plugin_dir_url( __FILE__ ) . '/css/slick.css', array(), '1.0', 'all');
wp_enqueue_style('logocss', plugin_dir_url( __FILE__ ) . '/css/somaslide.css', array(), '1.0', 'all');
}
...should get things working.
I guess its just a dependencies issue. You've set your logoslickjs depends on array('jQuery') and The dependencies argument of wp_enqueue_script() is case sensetive, so it should be array('jquery')
But, since you're loading a custom version of jQuery called 'somajQuery', you need to change the script depends array('jQuery') to array('somajQuery') so your code should be:
function somadome_enqueue_script() {
wp_enqueue_script( 'somajQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',array(), '1.0');
wp_enqueue_script( 'logoslickjs', plugin_dir_url( __FILE__ ) . '/js/slick.js',array('somajQuery'), '1.0');
wp_enqueue_script( 'logoslider', plugin_dir_url( __FILE__ ) . '/js/somaslick.js',array('somajQuery'), '1.0');
wp_enqueue_style('slickcss', plugin_dir_url( __FILE__ ) . '/css/slick.css', array(), '1.0', 'all');
wp_enqueue_style('logocss', plugin_dir_url( __FILE__ ) . '/css/somaslide.css', array(), '1.0', 'all');
}
Now, logoslickjs and logoslider are depends on custom jQuery somajQuery and so on.
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');
}
Checked around various tutorial/forum sites but can't crack this problem I'm having getting Greensock JS Animation Platform running in WordPress.
I've got a WP site up and running and have linked all relevant (as far as I can see) GS files as follows:
function greensock_scripts()
{
wp_register_script( 'mytweenmax', get_template_directory_uri() . '/js/minified /TweenMax.min.js');
wp_register_script( 'myeasepack', get_template_directory_uri() . '/js/minified/easing/EasePack.min.js');
wp_register_script( 'mycssplugin', get_template_directory_uri() . '/js/minified/plugins/CSSPlugin.min.js');
wp_register_script( 'mygsext', get_template_directory_uri() . '/js/greensock_ext.js');
wp_register_style( 'mygscss', get_template_directory_uri() . '/css/gs_styles.css');
wp_enqueue_script( 'mytweenmax' );
wp_enqueue_script( 'myeasepack' );
wp_enqueue_script( 'mycssplugin' );
wp_enqueue_script( 'mygsext' );
wp_enqueue_style( 'mygscss' );
}
add_action( 'wp_enqueue_scripts', 'greensock_scripts' );
Double-checked pathway to files ... all OK.
The greensock_ext.js contains my call to scripts:
window.onload = function(){
var thebox = document.getElementById("mybox");
TweenMax.to(thebox, 2, {left:"632px", delay:4});
}
Styles are working:
#mycontainer{
width:600px;
height:50px;
background-color: #ccc;
}
#mybox{
width:20px;
height:20px;
background-color:#f00;
position:relative;
}
All good, but can't get any animation happening :(
Any advice would be greatly appreciated.
Mekong