I am developing a plugin in WordPress and for the same plugin in settings page I want to integrate a jquery in backend on edit.php. I have followed the below method but it is not working
function cs_colorpicker_js() {
wp_enqueue_script('cs_colorpicker_js',
plugin_dir_url(__FILE__).'js/cs_colorpicker.js'
);
}
add_action( 'admin_enqueue_scripts', 'cs_colorpicker_js' );
here is the screenshot of one error that i have found. http://goo.gl/wmgH60
Use the third variable of Wp_enqueue_script() like,
function cs_colorpicker_js() {
wp_enqueue_script('cs_colorpicker_js',
plugin_dir_url(__FILE__).'js/cs_colorpicker.js',
array('jquery') // jquery dependency
);
}
Related
I'm creating a custom plugin for WordPress and I'm trying to execute javascript file only on plugin deactivation.
I'm using register_deactivation_hook() and wp_enqueue_script() to execute file only on plugin deactivation.
There are no errors in the code since the javascript code works well if it is called outside the register_deactivation_hook()
This is what I've tried so far:
register_deactivation_hook( __FILE__, 'deactivation' );
function deactivation() {
function delete_rest_api() {
wp_enqueue_script('deactivation_data_api', plugins_url('assets/js/deactivation_data_api.js', __FILE__));
}
add_action( 'admin_enqueue_scripts', 'delete_rest_api' );
}
In the end, the plugin needs to execute that javascript file only during plugin deactivation.
Thanks in advance.
I'm new to jquery and php and trying to create my first Wordpress Plugin.
The plugin simply adds a metabox to posts which has a date field on the backend.
Metabox and field all added ok and appear when I go to create or edit a post.
However, I can't get the datepicker to work. Nothing happens when you click on the input box, the date selector does not show. Although the input box will only let me input numbers not letters.
The plugin is a single page of php code.
The top of my plugin file attempts to load the jquery:
function ca_load_jquery_datepicker() {
wp_enqueue_script('jquery-ui-datepicker');
wp_enqueue_style('jquery-style', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css');
}
add_action( 'admin_enqueue_scripts', 'ca_load_jquery_datepicker' );
Then this is the input and jquery in my form (lower down on the plugin file):
<input type="text" class="date" name="ca_expiry_date" value="">
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.date').datepicker({
dateFormat : 'yy-mm-dd'
});
});
</script>
Can anyone help advise where I am going wrong with the datepicker?
Thank you!
UPDATE
Thanks for the comments, I have discovered that if I instal the "Classic Editor" plugin, my code works. But when that is not activated and using Gutenberg it does not work.
The error is (without sharing the site url):
GET https://xxxx.co.uk/wp-content/themes/publisher/gutenberg-7.6.2.min.css?ver=7.6.2 net::ERR_ABORTED 404 (Not Found)
This error is still there even when my plugin is disabled.
However, if I activate the Twenty Nineteen theme there is no error but the date field in my plugin still does not work.
So clearly gutenberg does not like something in my code...
I would make sure to register the whole jquery-ui package from the remote official source in the functions.php of your current theme, like this:
function ca_load_jquery_ui() {
// first, register the style from the remote official source
wp_register_style('jqueryuicss', '//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.min.css', array('jquery-ui-styles'), '1.12.1');
wp_enqueue_style('jqueryuicss');
// then, register the core file from the remote official source, in footer
wp_register_script('jqueryui', '//code.jquery.com/ui/1.12.1/jquery-ui.min.js', array('jquery-ui'), '1.12.1', true);
wp_enqueue_script('jqueryui');
}
add_action( 'wp_enqueue_scripts', 'ca_load_jquery_ui' );
Note: if you want to use your calendar in the frontend, please make sure to use the function add_action( 'wp_enqueue_scripts', 'xxx' ); instead of add_action( 'admin_enqueue_scripts', 'xxx' ); which is only for the admin side.
UPDATE
You might also try to disable the default jQuery or jQuery-ui to see if that helps:
//remove the default jQuery script
function remove_default_jquery(&$scripts){
if(is_admin()){
// try this...
$scripts->remove('jquery');
// or...
$scripts->remove('jquery-ui');
}
}
add_filter( 'wp_default_scripts', 'remove_default_jquery' );
I've recently setup a new Wordpress install to act as a survey database. The purpose of the site is to collect survey data and allow the admin's to filter and search submitted survey data.
I've installed and configured the Algolia search WP plugin. Everything is working properly. If I navigate to 'mydomain.com/?s=' I see the search form and it's returning results.
My question is how can I set the Algolia search page as my Wordpress index/front page? Or, how can I import this form to a page that I can designate as my WP static front page?
Further info: I have a child theme installed and can create custom page templates/template-parts
The reason is this code here...
if ( is_search() && $settings->should_override_search_with_instantsearch() ) {
return $this->load_instantsearch_template();
}
from this file
https://github.com/algolia/algoliasearch-wordpress/blob/1a51d3e2e8be12bfcbccd1ef2a722911a99376e7/includes/class-algolia-template-loader.php
Essentially it isn't being loaded at present where you want.
Putting this code in your functions.php will fix it.
add_action( 'wp_enqueue_scripts', function () {
// Enqueue the instantsearch.js default styles.
wp_enqueue_style( 'algolia-instantsearch' );
// Ensure jQuery is loaded.
wp_enqueue_script( 'jquery' );
// Enqueue the instantsearch.js library.
wp_enqueue_script( 'algolia-instantsearch' );
// WordPress utility useful for using underscore templating.
wp_enqueue_script( 'wp-util' );
// Allow users to easily enqueue custom styles and scripts.
do_action( 'algolia_instantsearch_scripts' );
} );
Then just add the instantsearch.php code or include the file to the index page/page you want to load it on.
(I just replaced the index.php code with the code from instantsearch.php and it worked just fine)
Hope that helps.
I'm developing a plugin for wordpress. This plugin has to have an admin section for plugin set up but also has to have a custom front end page with forms.
I'm new into the wordpress plugin development world but I have not found specific information for this task.
Is there a way to add pages to front end from a plugin or is necessary to manually edit the current template and add the page?
Here is a way to add custom content on a front-end page when you create your plugin: http://blog.frontendfactory.com/how-to-create-front-end-page-from-your-wordpress-plugin/
function elegance_referal_init()
{
if(is_page('share')){
$dir = plugin_dir_path( __FILE__ );
include($dir."frontend-form.php");
die();
}
}
add_action( 'wp', 'elegance_referal_init' );
To add a page to Wordpress that runs custom code without adding the page as a post or page in the database, try this in your plugin file.
add_action ('pre_get_posts', function ($query) {
global $wp;
if ($wp->request == 'pageurl'){
$dir = plugin_dir_path( __FILE__ );
include $dir . "your_file.php";
die();
}
});
I think you looking for this for the admin settings page https://codex.wordpress.org/Function_Reference/add_options_page
Fot the front end, i would recommend to create a page with a template https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/
I want to register a script using when my plugin is activated. So I placed:
register_activation_hook(__FILE__, 'register_script');
function register_script(){
wp_register_script('addjs','http://example.com/exmple.js');
}
Next I created a meta box and enqueue the script in the add_meta_boxes hook:
wp_enqueue_script('addjs');
Why that doesn't work? My JS file is just a simple alert function. However, why when I register my script using init hook, or other hook, my code works?
Registering the script doesn't actually enqueues the script. And that's what needs to be optimized.
register_activation_hook runs only once, registering your script there won't keep it registered in subsequent WordPress loads. Neither the action hook init is the place to do this. It's either wp_enqueue_scripts (frontend) or admin_print_scripts (backend), despite their names they're used to enqueue styles and scripts.
Loading your scripts only in specific places is a great practice. Once my admin area broke because a theme was loading its scripts/styles everywhere, not only on the frontend. Crappy code at its best.
The main difference is that if you register a script, you'll only need to call wp_enqueue_script($handle) in other places of your code. But if it's not the case, you can drop the register part and enqueue directly.
A small trick is to add your wp_enqueue_script and wp_enqueue_style inside your add_meta_box() callback, and it will only load together with the Meta Box. Works the same for Shortcodes.
Another option,
add_action( 'admin_menu', function()
{
$page = add_submenu_page( $args );
add_action( "admin_print_scripts-$page", 'your_callback' );
});
Or,
add_action( 'wp_enqueue_scripts', function() {
if( is_single() )
wp_enqueue_style( $args );
});
References:
- conditional-wp-enqueue-script-on-a-page
- when-to-use-add-actioninit-vs-add-actionwp-enqueue-scripts
- register-and-enqueue-conditional-browser-specific-javascript-files
- how-to-load-scripts-and-css-for-admins-only-when-editing-or-adding-posts