How to connect a custom plugin in LightGallery - javascript

I am currently trying to make a custom plugin to lightgallery (2.7.0). My source code for lg currently is cdn and wordpress (using wp_enqueue_script). As far as I can tell, current lg plugins are coded in typescript rather than javascript.
Here is my cdn connections:
wp_enqueue_script( 'lightgallery', 'https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.0/lightgallery.min.js', array(), '1.1', 'all' );
wp_enqueue_script( 'lightgallery-settings', get_template_directory_uri() . '/assets/js/lightgallery-settings.js', array( 'jquery' ), '1.1', true );
wp_enqueue_script( 'lightgallery-gallery-plugin', get_template_directory_uri() . '/assets/js/lg-gallery-plugin.js', array( 'jquery' ), '1.1', true );
wp_enqueue_script( 'lightgallery-autoplay', 'https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.0/plugins/autoplay/lg-autoplay.min.js', array( 'jquery' ), null, true );
My settings file:
(function ($) {
'use strict';
$(document).ready(function () {
$('#dataTables-example').dataTable();
lightGallery(document.getElementById('lightgallery'), {
plugins: [lgAutoplay],
thumbnail: true,
selector: '.img-responsive'
});
});
}(jQuery));
I have tried older methods of creating plugins using javascript, however, it is pulling errors and I believe this is due to the fact that using js for plugins is a method for older versions of lightgallery.
Anyone have any experience with this?

Related

Add css js to a plugin wordpress which call a shortcode

I have to do a wp plugin, it calls a page with a shortcode:
function shortcode_flexSlide(){
include ('eleve.php');
}
add_shortcode('flexSlide', 'shortcode_flexSlide');
And now I must load css and js link to the page 'eleve.php'
I have already tried the following:
wp_enqueue_script( 'flexSlideStyle', plugins_url( '/css/style.css', __FILE__ ));
But it looks at wp root dir + /css/style.css
If you want to enqueue stylesheet, please use following syntax.
wp_enqueue_style( 'myCSS', plugins_url( '/css/style.css', __FILE__ ) );
Or you can use something like below:
wp_enqueue_style( 'style-name', get_stylesheet_directory_uri(). '/css/style.css' ); // for css
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true ); // for script, where 1.0.0 is the version
Hope this helps :)

I am having trouble applying a javascript file to Wordpress. How Do I Enqueue Scripts?

I am having trouble applying javascript with a dependency of jQuery on my wordpress site, The css function worked but not the javascript function. Any tips or help?
http://minecraftserverzz.com/youtube/
function wp_chiquedesigns_styles() {
wp_enqueue_style( 'style_css', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'wp_chiquedesigns_styles' );
function chiquedesigns_child_scripts() {
wp_enqueue_script( 'main js', get_stylesheet_directory_uri() . '/main.js', array( 'jquery' ), true);
}
add_action( 'wp_enqueue_scripts', 'wp_chiquedesigns_child_scripts' );
wp_enqueue_script( 'main js', get_stylesheet_directory_uri() . '/main.js', array( 'jquery' ), true);
The above code is producing the following path:
http://minecraftserverzz.com/youtube/wp-content/themes/Chique%20Designs.zip/js/main.js
Which is a 404 - file does not exist.
get_stylesheet_directory_uri() returns the following string.
http://minecraftserverzz.com/youtube/wp-content/themes/Chique%20Designs.zip/js
It looks like your main.js file is in the folder level above that. Try moving your main.js file into the js folder

WP enqueue javascript

I'm making a simple WP Plugin with Index.php and jquery.js files.
How do I link the JS to work together. This is what I tried adding to the index.php, but it did not work. No JS from jquery.js appeared.
function my_scripts() {
wp_enqueue_script( 'script-name', get_template_directory_uri() . 'jquery.js', array(), '1.0.0', true );
add_action('wp_enqueue_scripts','my_scripts');
}
The first thing to note is, like Meathanjay pointed out, your add_action needs to be outside the my_scripts() function or else it'll never execute.
get_template_directory_uri() is used to get the path to files in a theme. For a plugin, you need to use plugin_dir_url() and pass it the directory of a file in the plugin's main directory.
function my_scripts() {
wp_enqueue_script( 'script-name', plugin_dir_url( __FILE__ ) . 'jquery.js', array(), '1.0.0', true );
}
add_action('wp_enqueue_scripts','my_scripts');
Try this: your action call within the function and it never call.
Update
function my_scripts() {
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/jquery.js', array(), '1.0.0', true );
}
add_action('wp_enqueue_scripts','my_scripts')
You should Name Unique while adding any script/stylesheet. and you should use plugins_url(), or plugin_dir_url() in place of get_template_directory_uri().
You can try this if you have more than one scripts and style-sheets to add:
function my_scripts() {
// for Scripts
wp_enqueue_script('script-unique-name', plugins_url("js/jQuery.js", __FILE__));
// or
wp_enqueue_script('script-unique-name2', plugin_dir_url(__FILE__)."js/newjQuery.js");
// for stylesheet
wp_enqueue_style('style-unique-name', plugin_dir_url(__FILE__).'css/style.css');
}
add_action('wp_enqueue_scripts','my_scripts');
// Or
add_action('admin_footer', 'my_action_javascript'); // Write our JS below here
function my_action_javascript() {
?>
<script type="text/javascript">
//Javascript code Here...
</script>
<?php } ?>

Wordpress: JavaScript plugin with bootstrap and wordpress

So I cant get the js for a lightbox plugin to work correctly. The error I get is:
Uncaught TypeError: undefined is not a function
bootstrap-lightbox.js?ver=4.1:113
My functions.php:
function bootstrap_js() {
wp_enqueue_script( 'bootstrapjs', get_stylesheet_directory_uri() . '/js/bootstrap.js', array('jquery'), '', true );
wp_enqueue_script( 'bootstraplightbox', get_stylesheet_directory_uri() . '/js/bootstrap-lightbox.js', array('jquery'), '', true );
}
add_action( 'wp_enqueue_scripts', 'bootstrap_js');
And then I have this in my header.php
<?php wp_enqueue_script( 'jquery' ) ?>
I can find out whats wrong. I have been googling for hours now and none of the fixes I have found has worked for me (or understood them might be another reason).
I don't think you need the line to enqueue jQuery in your header, WordPress will handle that automagically as it is listed as a dependency of bootstrapjs. Additionally, you should probably list bootstrapjs as a dependency of bootstraplightbox like so:
wp_enqueue_script( 'bootstraplightbox', get_stylesheet_directory_uri() . '/js/bootstrap-lightbox.js', array('jquery', 'bootstrapjs'), '', true );
This will make sure that the bootstrapjs file is loaded before bootstraplightbox, as I am assuming that must happen.

How To Include CSS and jQuery in my WordPress plugin?

How To Include CSS and jQuery in my WordPress plugin ?
For styles wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );
Then use: wp_enqueue_style('namespace'); wherever you want the css to load.
Scripts are as above but the quicker way for loading jquery is just to use enqueue loaded in an init for the page you want it to load on: wp_enqueue_script('jquery');
Unless of course you want to use the google repository for jquery.
You can also conditionally load the jquery library that your script is dependent on:
wp_enqueue_script('namespaceformyscript', 'http://locationofscript.com/myscript.js', array('jquery'));
Update Sept. 2017
I wrote this answer a while ago. I should clarify that the best place to enqueue your scripts and styles is within the wp_enqueue_scripts hook. So for example:
add_action('wp_enqueue_scripts', 'callback_for_setting_up_scripts');
function callback_for_setting_up_scripts() {
wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );
wp_enqueue_style( 'namespace' );
wp_enqueue_script( 'namespaceformyscript', 'http://locationofscript.com/myscript.js', array( 'jquery' ) );
}
The wp_enqueue_scripts action will set things up for the "frontend". You can use the admin_enqueue_scripts action for the backend (anywhere within wp-admin) and the login_enqueue_scripts action for the login page.
Put it in the init() function for your plugin.
function your_namespace() {
wp_register_style('your_namespace', plugins_url('style.css',__FILE__ ));
wp_enqueue_style('your_namespace');
wp_register_script( 'your_namespace', plugins_url('your_script.js',__FILE__ ));
wp_enqueue_script('your_namespace');
}
add_action( 'admin_init','your_namespace');
It took me also some time before I found the (for me) best solution which is foolproof imho.
Cheers
To include CSS and jQuery in your plugin is easy, try this:
// register jquery and style on initialization
add_action('init', 'register_script');
function register_script() {
wp_register_script( 'custom_jquery', plugins_url('/js/custom-jquery.js', __FILE__), array('jquery'), '2.5.1' );
wp_register_style( 'new_style', plugins_url('/css/new-style.css', __FILE__), false, '1.0.0', 'all');
}
// use the registered jquery and style above
add_action('wp_enqueue_scripts', 'enqueue_style');
function enqueue_style(){
wp_enqueue_script('custom_jquery');
wp_enqueue_style( 'new_style' );
}
I found this great snipped from this site How to include jQuery and CSS in WordPress – The WordPress Way
Hope that helps.
Accepted answer is incomplete. You should use the right hook: wp_enqueue_scripts
Example:
function add_my_css_and_my_js_files(){
wp_enqueue_script('your-script-name', $this->urlpath . '/your-script-filename.js', array('jquery'), '1.2.3', true);
wp_enqueue_style( 'your-stylesheet-name', plugins_url('/css/new-style.css', __FILE__), false, '1.0.0', 'all');
}
add_action('wp_enqueue_scripts', "add_my_css_and_my_js_files");
Just to append to #pixeline's answer (tried to add a simple comment but the site said I needed 50 reputation).
If you are writing your plugin for the admin section then you should use:
add_action('admin_enqueue_scripts', "add_my_css_and_my_js_files");
The admin_enqueueu_scripts is the correct hook for the admin section, use wp_enqueue_scripts for the front end.
See http://codex.wordpress.org/Function_Reference/wp_enqueue_script
Example
<?php
function my_init_method() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js');
}
add_action('init', 'my_init_method');
?>
First you need to register the style and css using wp_register_script() and wp_register_style() functions
//registering javascript and css
wp_register_script ( 'mysample', plugins_url ( 'js/myjs.js', __FILE__ ) );
wp_register_style ( 'mysample', plugins_url ( 'css/mystyle.css', __FILE__ ) );
After this you can call the wp_enqueue_script() and wp_enqueue_style() functions for loading the js and css in required page
wp_enqueue_script('mysample');
wp_enqueue_style('mysample');
I fount a nice example here http://wiki.workassis.com/wordpress-create-advanced-custom-plugin-using-oop/
Very Simple:
Adding JS/CSS in the Front End:
function enqueue_related_pages_scripts_and_styles(){
wp_enqueue_style('related-styles', plugins_url('/css/bootstrap.min.css', __FILE__));
wp_enqueue_script('releated-script', plugins_url( '/js/custom.js' , __FILE__ ), array('jquery','jquery-ui-droppable','jquery-ui-draggable', 'jquery-ui-sortable'));
}
add_action('wp_enqueue_scripts','enqueue_related_pages_scripts_and_styles');
Adding JS/CSS in WP Admin Area:
function enqueue_related_pages_scripts_and_styles(){
wp_enqueue_style('related-pages-admin-styles', get_stylesheet_directory_uri() . '/admin-related-pages-styles.css');
wp_enqueue_script('releated-pages-admin-script', plugins_url( '/js/custom.js' , __FILE__ ), array('jquery','jquery-ui-droppable','jquery-ui-draggable', 'jquery-ui-sortable'));
}
add_action('admin_enqueue_scripts','enqueue_related_pages_scripts_and_styles');
You can use the following function to enqueue script or style from plugin.
function my_enqueued_assets() {
wp_enqueue_script('my-js-file', plugin_dir_url(__FILE__) . '/js/script.js', '', time());
wp_enqueue_style('my-css-file', plugin_dir_url(__FILE__) . '/css/style.css', '', time());
}
add_action('wp_enqueue_scripts', 'my_enqueued_assets');
You can add scripts and css in back end and front end with this following code:
This is simple class and the functions are called in object oriented way.
class AtiBlogTest {
function register(){
//for backend
add_action( 'admin_enqueue_scripts', array($this,'backendEnqueue'));
//for frontend
add_action( 'wp_enqueue_scripts', array($this,'frontendEnqueue'));
}
function backendEnqueue(){
wp_enqueue_style( 'AtiBlogTestStyle', plugins_url( '/assets/css/admin_mystyle.css', __FILE__ ));
wp_enqueue_script( 'AtiBlogTestScript', plugins_url( '/assets/js/admin_myscript.js', __FILE__ ));
}
function frontendEnqueue(){
wp_enqueue_style( 'AtiBlogTestStyle', plugins_url( '/assets/css/front_mystyle.css', __FILE__ ));
wp_enqueue_script( 'AtiBlogTestScript', plugins_url( '/assets/js/front_myscript.js', __FILE__ ));
}
}
if(class_exists('AtiBlogTest')){
$atiblogtest=new AtiBlogTest();
$atiblogtest->register();
}
For css
wp_register_style('style-css',plugin_dir_url(__FILE__).'css/style.css');
for js
wp_register_script('script-js', plugin_dir_url(__FILE__).'js/script.js',array(), '1.0.0', true);
you can use the css by enqueue them in any page like
wp_enqueue_style('style-css');
you can use the js by enqueue them in any page like
wp_enqueue_script('script-js');
Did you mean the js and css files or code? If you have very little scripts or styling used, you can simply use them inline. But it's recommended to use following wordpress plugin functions if you want to include files.
wp_register_script()
wp_enqueue_style()
Hope it helps.

Categories

Resources