Excuse me, I'm very new to PHP and WordPress, but I'm trying to link to an exterenal js file called trans.js, that relies on jQuery. Here is the code at the beginning of the header.php:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/trans.js"></script>
and here is the enqueue within the functions.php
function twentytwelve_scripts_styles() {
global $wp_styles;
wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );
function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/trans.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
Yet it still does not link up with the trans.js — does anyone know why this is?
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
wp_register_script( 'my-first-script', get_stylesheet_directory_uri() . '/js/trans.js', );
wp_enqueue_script( 'my-first-script' );
}
Try this, i guess you dint register the script.
Related
I have been struggling with diagnosing a bug on a project for hours now. I have currently narrowed it down to what is happening, I'm just not sure why:
I have a template partial called "testimonials.php" which enqueues styles at the top of the file:
<?php
add_action("wp_enqueue_scripts", function() {
wp_enqueue_style("testimonials-style", get_stylesheet_directory_uri() . "/partials/testimonials.css");
});
?>
However, when I try to render this as a partial in a parent template, using get_template_part('partials/testimonials') the partial is rendered, but the CSS is not enqueued. Same for enqueueing JS files. I have verified that the pathways are correct, etc.
If I enqueue the style in the parent Template, then the styles show up.
Do I really need to enqueue the styles into every parent template in which I wish to include this partial?? I must be missing something, because this doesn't seem modular at all!
Can someone please help?
Try this
CSS
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css');
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css');
}
JS
function wpdocs_scripts_method() {
wp_enqueue_script( 'form-script', get_template_directory_uri() . '/js/form.js', array( 'jquery' ) );
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
<?php
add_action( 'wp_enqueue_scripts', 'my_stylesheet' );
function my_stylesheet() {
wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/partials/testimonials.css', false, '1.0', 'all' );
}
For more understanding you can see following doc
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
function mytheme_scripts_styles() {
wp_enqueue_script( 'app-script', get_template_directory_uri() . '/assets/js/app.6e31112b.js', array('jquery'), 1.0, true);
wp_enqueue_style('app-css', get_stylesheet_directory_uri() . "/assets/css/build.css",false,'','all');
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts_styles' );
I'm trying to make a child theme off the html5blank theme. I've managed to get my child theme CSS working using the following:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'main-css', get_stylesheet_directory_uri() . '/css/main.css' );
}
?>
But the styles from the parent are still inherited. These are style.css and normalize.css. I have no need for these files at all.
So I've been told I need to use wp_dequeue_style(). to "remove parent enqueued files with wp_dequeue_style()" and add your hook with a later priority than the default 10. This is a third, optional parameter for add_action(). Something like 100.
Unfortunately I'm really struggling with this basic task, I've tried but I can't get it working. I tried the following but obviously it's totally wrong!
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'main-css', get_stylesheet_directory_uri() . '/css/main.css' );
wp_dequeue_style( 'parent-style-css', get_template_directory_uri() . '/style.css', 100 );
wp_dequeue_style( 'parent-normalize-css', get_template_directory_uri() . '/normalize.css', 100 );
}
?>
Can anyone help with this? I'm sure it's straight forward but I don't have a clue!
Also, I'm guessing if I don't need the JS from the parent either as I'll use that in my child them, I guess I'd use the methods to enqueue/dequeue them?
EDIT
Is this more like it...
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 100 );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'main-css', get_stylesheet_directory_uri() . '/css/main.css' );
wp_dequeue_style( 'normalize');
wp_dequeue_style( 'html5blank');
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts', 100 );
function my_theme_enqueue_scripts() {
wp_deregister_script( 'conditionizr');
wp_deregister_script( 'modernizr');
wp_deregister_script( 'html5blankscripts');
wp_register_script('jquery', get_template_directory_uri() . '/js/jquery-1.12.0.min.js', array('jquery'), '1.12.0'); // Custom scripts
wp_enqueue_script('jquery'); // Enqueue it!
wp_register_script('responsive-nav', get_template_directory_uri() . '/js/responsive-nav.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('responsive-nav'); // Enqueue it!
wp_register_script('uniform-js', get_template_directory_uri() . '/js/jquery.uniform.min.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('uniform-js'); // Enqueue it!
wp_register_script('main-js', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('main-js'); // Enqueue it!
}
?>
The instructions were simply telling you to change this...
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
into this...
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 100 );
The full method call is...
add_action( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )
Only the first two are required, the others have defaults they will use in case you leave them blank.
Also, to dequeue, you only need the name of the parent identifier, not all of the file details.
wp_dequeue_style( 'name-of-identifier-in-parent-theme' );
It looks like you put the priority on the wrong function call.
And Yes, you can dequeue javascript files as well using this method.
Read the wordpress codex several times and I was still unable to link the files so that my dropdown menu could work. Is there anything I need to do that is not in the functions.php?
<?php
function load_js() {
wp_enqueue_script( 'mytheme-jquery', get_template_directory_uri() . '/js/jquery-2.1.4.min.js', array( 'jquery' ) );
wp_enqueue_script( 'mytheme-bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'load_js' );
?>
In my theme header.php i added:
<?php wp_enqueue_script("jquery"); ?>
And try to use jquery in functions.php:
function remove_xprofile_links() {
remove_filter( 'bp_get_the_profile_field_value', 'xprofile_filter_link_profile_data', 9, 2 );
global $current_user;
get_currentuserinfo();
$user_id = $current_user->ID;
$field = xprofile_get_field_data(3, $user_id);
if($field="Покупатель")
{
?>
<script type="text/javascript">
jQuery(document).ready(function( $ ){
$("#nickname,#display_name").parent().parent().hide();
});
</script>
<?php
}
}
add_action( 'bp_init', 'remove_xprofile_links' );
But in console still ReferenceError: jQuery is not defined
How to use jquery correctly?
Probably you added the wp_enqueue_script line in your header.php after the wp_head() function has already been executed, but that's not the real issue.
The problem is that you shouldn't enqueue your scripts in header.php, but in your theme's functions.php file, adding an action to the wp_enqueue_scripts hook, like explained in this example:
/**
* Proper way to enqueue scripts and styles
*/
function theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
In your case this should be enough:
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_script('jquery');
} );
it will probably something stupid as ussual but.. I can't get my style.css or custom.css to override the bootstrap css. I don't wanna put all my custom css in my header file because that is not really the way to do it I suppose..
Now I Tried to add it in my functions.php like this:
//Enqueue scripts and styles
function horizon_scripts() {
//Load the theme CSS
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css');
wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css');
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/css/custom.css', array(), '1.0.1', 'all' );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'horizon_scripts' );
So it loads my bootstrap css first and then the style.css and custom.css but that didn't quite hit it..
So any help would be appreciated :)
You should be using get_stylesheet_directory_uri(). Here's just the css, without your js:
function horizon_scripts() {
wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
wp_enqueue_style( 'main', get_stylesheet_uri(), array('bootstrap') );
wp_enqueue_style( 'custom', get_stylesheet_directory_uri() . '/custom.css', array('main') );
}
add_action( 'wp_enqueue_scripts', 'horizon_scripts' );
Note that the third parameter of wp_enqueue_style() is "dependencies". Read more in the Codex.