I am trying to add a custom script via my functions.php file.
Here is the code. First I am loading jQuery and then the script
When I view my source code I can not see a link to the script.
By the way, let me know if you need to see more of my code I wasn't sure how much I should post.
// jQuery
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
wp_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
wp_enqueue_script('jquery');
}
// show Hide
function add_my_script() {
wp_enqueue_script(
'show-hide',
get_template_directory_uri() . '/js/show-hide.js',
array('jquery')
);
}
You're missing:
add_action( 'wp_enqueue_scripts', 'add_my_script' );
to hook add_my_script() function on to action.
Related
I'm working on a project that I have a child-theme on which I'm running specific functions from the function.php file.
My problem is that when I try to add an if condition to only run the script on a specific page, it doesn't work.
I'm using the functions.php from the child theme.
In other words... I need to be able to get the current page on the child theme.
What am I doing wrong?
add_action(
'init', function() {
if (is_page('contact')) {
wp_register_script( 'my-func', get_stylesheet_directory_uri() . 'my-func.js', '', '', false );
wp_enqueue_script( 'my-func' );
}
}
);
Thanks
for theme code will go to your functions.php file and for plugin code will go to the public functions.
add_action( 'wp_enqueue_scripts', 'my_assets' );
function my_assets()
{
if (is_page('booking')) {
/* for plugin */
wp_enqueue_style($this->plugin_name, plugin_dir_url(__FILE__) . 'css/custom.css', array(), $this->version, 'all');
/*for theme */
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
}
I want to call a jQuery from my functions.php in WordPress.
I'm using Divi Theme. When I add the script directly into Divi theme it works. But I want to add it to the functions.php form my child theme and this is where the problem start.
Functions.php
function coolbanner_enqueue() {
wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/js/coolbanner.js', array( 'jquery' ));
}
add_action( 'wp_enqueue_scripts', 'coolbanner_enqueue' );
Script:
jQuery(document).ready(function(){
jQuery('#cta-section').waypoint(function() {
jQuery('#cta-section').toggleClass('animate-cta');
}, {offset: '80%'});
});
Can somebody point out what I'm doing wrong?
Seems like you're missing the jQuery Waypoint JS file
Try enqueueing the jquery waypoint js file BEFORE using your custom script
function coolbanner_enqueue() {
wp_enqueue_script( 'jquery-waypoint', 'https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js', [ 'jquery' ] );
wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/js/coolbanner.js', array( 'jquery-waypoint' ));
}
add_action( 'wp_enqueue_scripts', 'coolbanner_enqueue' );
you can find the jquery waypoint github repo here...
https://github.com/imakewebthings/waypoints
Additionally the url I used below is from a cdn which you can find here:
https://cdnjs.com/libraries/waypoints
if you feel more comfortable using the github's url
then just substitute the cdn url with the following...
https://raw.githubusercontent.com/imakewebthings/waypoints/master/lib/jquery.waypoints.min.js
Solution:
function coolbanner_enqueue() {
wp_enqueue_script( 'custom-scripts-js', get_stylesheet_directory_uri() . '/js/coolbanner.js', array( 'jquery' ), '1.0', false);
}
add_action( 'wp_enqueue_scripts', 'coolbanner_enqueue' );
after adding this to functions.php, i get an error (white page), i have the open tag php and a closing.
<?php
add_theme_support('menus');
function my-theme_add_scripts() {
wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false', array(), '3', true );
wp_enqueue_script( 'google-map-init', get_template_directory_uri() . '/js/google-maps.js', array('google-map', 'jquery'), '0.1', true );
}
add_action( 'wp_enqueue_scripts', 'my-theme_add_scripts' );
?>
try function my_theme_add_scripts() instead of function my-theme_add_scripts(). You can't use - in your function names.
I have a query to get a post in wordpress:
<?php
$page_content = get_page(2);
echo do_shortcode($page_content->post_content);
?>
The page that is being loaded has a shortcode in it that loads a slider. The slider markup is loading but the javascript and css files required for the plugin are not showing up in the source code. How can I fix this?
you did not supply any relative source code or link, but did you load the JS and css ?
Is the slider comes from a plugin ? is it your plugin ? is the plugin activated for said page ? did you enqueue your styles and scripts ??
Anyhow, as a first measure , try to load it manually on the page
function my_scripts_enq()
{
// Register the script for a plugin:
wp_register_script( 'custom-script', plugins_url( '/js/custom-script.js', __FILE__ ) );
// or
// Register the script for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );
// then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enq' );
For fast debug you can can simply try :
if( is_page(42) ){
add_action( 'wp_enqueue_scripts', 'my_scripts_enq' );
}
for styles you should do :
function load_styles()
{
// Register the style for a plugin:
wp_register_style( 'custom-style', plugins_url( '/css/custom-style.css', __FILE__ ), array(), '20120208', 'all' );
// or
// Register the style for a theme:
wp_register_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css', array(), 'se16205117', 'all' );
// then enqueue the style:
wp_enqueue_style( 'custom-style' );
}
add_action( 'wp_enqueue_scripts', 'load_styles' );
BTW - as a side note , From codex
$page_id = 2;
$page_data = get_page( $page_id );
// You must pass in a variable to the get_page function. If you pass
in a value (e.g. get_page ( 123 ); ), WordPress will generate an
error. By default, this will return an object.
I want to add some custom jquery code to the Edit Post page, something really simple like showing a div when someone presses Publish.
The only restriction is that I want to achieve this through the use of a plugin, not hacking the admin template files.
I've tried echoing some script tags using some actions but it doesn't seem to be the way.
Use the admin_enqueue_scripts action and the wp_enqueue_script method to add custom scripts to the admin interface.
This assumes that you have myscript.js in your plugin folder. Change accordingly. The my_custom_script handle should be unique for your module and script.
function my_enqueue($hook) {
// Only add to the edit.php admin page.
// See WP docs.
if ('edit.php' !== $hook) {
return;
}
wp_enqueue_script('my_custom_script', plugin_dir_url(__FILE__) . '/myscript.js');
}
add_action('admin_enqueue_scripts', 'my_enqueue');
There is a snippet for Your functions.php file :
function custom_admin_js() {
$url = get_bloginfo('template_directory') . '/js/wp-admin.js';
echo '"<script type="text/javascript" src="'. $url . '"></script>"';
}
add_action('admin_footer', 'custom_admin_js');
Works fine on Wordpress 3.2.1.
<?php
function add_jquery_data() {
global $parent_file;
if ( isset( $_GET['action'] ) && $_GET['action'] == 'edit' && isset( $_GET['post'] ) && $parent_file == 'edit.php') {
// Do some stuff.
}
}
add_filter('admin_head', 'add_jquery_data');
?>
admin_enqueue_scripts and wp_enqueue_script are the preferred way to add javascript files to the dashboard.
// I'm using an anonymous function for brevity.
add_action( 'admin_enqueue_scripts', function() {
wp_enqueue_script( 'handle', plugin_dir_url( __FILE__ ) . '/script.js' );
} );
If you want to output the javascript using your PHP function however, wp_add_inline_script doesn't seem to work. Instead, you can use admin_print_scripts to directly echo out the script, including the script tags themselves. Just ensure to set the priority high so that it loads after any required libraries, such as jQuery.
add_action( 'admin_print_scripts', function() {
// I'm using NOWDOC notation to allow line breaks and unescaped quotation marks.
echo <<<'EOT'
<script type="text/javascript">
jQuery(function($){
// Do stuff here.
});
</script>
EOT;
}, PHP_INT_MAX );
If you want to get fancy and filter where you want to load the file or not, best to use get_current_screen.
function myproject_admin_enqueue() {
$screen = get_current_screen();
// load on the NEW and EDIT screens of all post types
if ( 'post' === $screen->base ) {
wp_enqueue_script('my_custom_script', plugin_dir_url( __FILE__ ) . 'all-admin.js');
}
// load on the NEW and EDIT screens of one post type
if ( 'post' === $screen->base && 'myposttype' === $screen->post_type ) {
wp_enqueue_script('my_custom_script', plugin_dir_url( __FILE__ ) . 'mypostype-admin.js');
}
// load only when adding a NEW post, not when editing an existing one.
if ( 'post' === $screen->base && 'add' === $screen->action ) {
wp_enqueue_script('my_custom_script', plugin_dir_url( __FILE__ ) . 'new-admin.js');
}
}
add_action('admin_enqueue_scripts', 'myproject_admin_enqueue');
Directly adding wp_enqueue_script to your code doesn't include the script in new versions of Wordpress (5.0 above).
The better way is to register the script with wp_register_script first to create a handle and then enqueue that handle.
function custom_script_in_admin($hook) {
if ('edit.php' !== $hook) {
return;
}
wp_register_script( 'custom_handle_name',plugin_dir_url( __FILE__ ) . '/script.js', '',true );
wp_enqueue_script('custom_handle_name');
}
add_action('admin_enqueue_scripts', 'custom_script_in_admin');
Somehow the accepted answer didn't work for me. Here is another solution I didn't found in the answers and this is what did it for me, WP 5.x, adding some css and js for my backend...
function suedsicht_theme_add_editor_assets() {
wp_enqueue_style( 'custom-gutenberg-stylesheet', get_template_directory_uri() . '/css/custom-editor-style.css', array(), wp_get_theme()->get( 'Version' ), 'all' );
wp_enqueue_script('suedsicht-admin-js', get_template_directory_uri() . '/js/admin.js');
}
add_action( 'enqueue_block_editor_assets', 'suedsicht_theme_add_editor_assets' );
By using the admin enqueue script hook you can easily add the script file for the admin panel.
function custom_admin_js() {
wp_enqueue_script( 'custom_wp_admin_js', get_template_directory_uri() . '/new-assets/js/admin_section.js', false, '1.0.0' );
wp_enqueue_script( 'custom_wp_admin_js' );
}
add_action('admin_enqueue_scripts', 'custom_admin_js');