Wordpress: JavaScript plugin with bootstrap and wordpress - javascript

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.

Related

How to enqueue javascript in my theme in wordpress that i created?

I converted a html,css,js template to a wordpress theme.
To enqueue my css it worked correctly, i just add the function in functions.php but to enqueue javascript it doesn't work i tryed a lot of modifications but nothing works
Here is my function.php
<?php
function load_stylesheets()
{
wp_register_style('normal',get_template_directory_uri() . '/css/normalize.css', array(), 1, 'all');
wp_enqueue_style('normal');
wp_register_style('demonstration',get_template_directory_uri() . '/css/demo.css', array(), 1, 'all');
wp_enqueue_style('demonstration');
}
add_action('wp_enqueue_scripts','load_stylesheets');
function addjs()
{
wp_register_script('anime', get_template_directory_uri() . '/js/anime.min.js', array(), 1,1, 1);
wp_enqueue_script('anime');
wp_register_script('imagesload', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array(), 1,1, 1);
wp_enqueue_script('imagesload');
wp_register_script('main', get_template_directory_uri() . '/js/main.js', array(), 1,1, 1);
wp_enqueue_script('main');
}
Please Try this
add_action('wp_footer','addjs');
function addjs() {
wp_register_script('anime', get_template_directory_uri() . '/js/anime.min.js', array ('jquery'),'',true);
wp_register_script('imagesload', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array ('jquery'),'',true);
wp_register_script('main', get_template_directory_uri() . '/js/main.js', array ('jquery'),'',true);
}
The short-and-sweet of it is that you're not calling your addjs function anywhere. If you added:
add_action( 'wp_enqueue_scripts', 'addjs' );
Then it should work. (Note: anyone that the above doesn't work for, look at the edit below)
However, there's a couple things you should note:
Make sure your indenting/spacing is consistent, and you don't have extraneous whitespace after lines. Clean code is key!
You don't need to add JS and CSS files separately, they can both be handled in the same add_action function callback.
Unless you're doing some really fancy stuff (enqueueing only while a shortcode is found on a page, etc.), wp_enqueue_{script/style} will take care of the wp_register_{script/style} function for you. In most cases you can use enqueue them instead of registering and then enqueueing them.
Take a look at the documentation and make sure your arguments are the same as the ones the function accepts. It will prevent warnings and errors in more extreme cases.
Here's a cleaned up example for you:
add_action( 'wp_enqueue_scripts', 'enqueue_theme_assets' );
function enqueue_theme_assets(){
// Styles
wp_enqueue_style( 'normal', get_template_directory_uri() . '/css/normalize.css', array(), '1.0' );
wp_enqueue_style( 'demonstration', get_template_directory_uri() . '/css/demo.css', array(), '1.0');
// Scripts
wp_enqueue_script( 'anime', get_template_directory_uri() . '/js/anime.min.js', array(), '1.0', true );
wp_enqueue_script( 'imagesload', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array(),'1.0', true );
wp_enqueue_script( 'main', get_template_directory_uri() . '/js/main.js', array(), '1.0', true );
}
EDIT:
I just saw your comment that add_action( 'wp_enqueue_scripts', 'addjs' ); wasn't working. Take a look at the wp_enqueue_script() docs. You'll note in the #Usage section, that it properly enqueuing scripts on the wp_enqueue_scripts hook relies on the wp_footer() and wp_head() functions being utilized in your theme, so **make sure you have wp_footer(); called in your theme, especially since you have the $in_footer argument set to true.
wp_enqueue_scripts is the proper hook to use when enqueuing scripts and styles that are meant to appear on the front end. Despite the name, it is used for enqueuing both scripts and styles.
So You have to add scripts and styles inside one function or you can add one more wordpress action with your existing code.
add_action( 'wp_enqueue_scripts', 'addjs' );

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 } ?>

Registering more than one script depend on jquery to wordpress theme?

function twentythirteen_scripts_styles()
{
... // Other code
// Load the Omedia's CSS files
wp_enqueue_style('css-bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '3.0.2');
wp_enqueue_style('css-index', get_template_directory_uri() . '/css/index.css', array(), '1.1');
wp_enqueue_style('css-kbc-styles', get_template_directory_uri() . '/css/kbc-styles.css', array(), '1.0');
wp_enqueue_style('css-menu', get_template_directory_uri() . '/css/menu.css', array(), '1.0');
wp_enqueue_style('css-rating', get_template_directory_uri() . '/css/rating.css', array(), '1.0');
// Load the Omedia's JS files
wp_enqueue_script('js-bootstrap-min', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '2013-11-14', true);
wp_enqueue_script('js-index', get_template_directory_uri() . '/js/index.js', array('jquery'), '2013-11-14', true);
wp_enqueue_script('js-kbcdeli', get_template_directory_uri() . '/js/kbcdeli.js', array('jquery'), '2013-11-20', true);
wp_enqueue_script('js-menu', get_template_directory_uri() . '/js/menu.js', array('jquery'), '2013-11-20', true);
wp_enqueue_script('js-nav', get_template_directory_uri() . '/js/nav.js', array('jquery'), '2013-11-20', true);
}
add_action('wp_enqueue_scripts', 'twentythirteen_scripts_styles');
Here is my code of registering scripts and styles in functions.php (I altered the original file of twentythirteen theme). I have 4 manual scripts file (index.js, kbcdeli.js, menu.js, nav.js). I test my theme on browsers, 4 files are loaded but only index.js can execute its script.
Someone help me, please!
If the 4 files are loaded , and you can see and read them in source ( not missing ) for example with firebug or going directly to the URL - then there is a different problem regarding to those scripts .
Without further info , It is very difficult to pinpoint , but as for your direct question and the function you posted for loading the scripts there are no problems and the function itself is fine .
( the only thing I would advise is to change the version to something like 20131120 without dashes - but I assume it will have little effect - although I remember one time to have a problem with loading scripts caused by letters in the version .. but I could not later reproduce it )
Also - do you have wp_footer() and wp_head in the theme ? ( I assume yes if you see them printed - but just in case .. )
I had the answer for my question. All my jquery code have to be wrapped by
(function ($) {
...
})(jQuery);
Just that, everything will be alright! Can someone explain to me the reason why I have to do so? Why not:
jQuery(document).ready(function ($) {
...
});
or
jQuery(function ($) {
...
});

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