I used:
wp_register_style("jquery.myplugin-1.0.css", "http://wordpress.loc/wp-content/plugins/myplugin/css" , "jquery.myplugin-1.0.css" , array(), "1.0");
wp_enqueue_style( 'jquery.myplugin-1.0.css');
But it get to
http://wordpress.loc/wp-content/plugins/myplugin/css?ver=3.4.2
What's possibly wrong I'm doing?
This works
wp_register_style("jquery.myplugin-1.0.css", "http://wordpress.loc/wp-content/plugins/myplugin/css/jquery.myplugin-1.0.css");
wp_enqueue_style( 'jquery.myplugin-1.0.css');
But this is better:
wp_enqueue_style( 'jquery.myplugin-1.0.css', plugins_url( '/css/jquery.myplugin-1.0.css' , __FILE__ ));
If you register and enqueue at the same time all can be done with wp_enqueu_style, it has the same arguments.
Second you used your url hardcoded. In my second example the plugin url will be dynamic so it will work on every WordPress without changing the url.
Related
in the index.php of a custom plugin i have put this :
wp_enqueue_style( 'style_overview', get_stylesheet_directory_uri() . 'http://127.0.0.1/wp-content/plugins/profile_plugin/css/style_overview.css',false,'1.1','all');
But it returns this in the final head :
href="http://127.0.0.1/wp-content/themes/alchemistshttp://127.0.0.1/wp-content/plugins/profile_plugin/css/style_overview.css?ver=1.1"
Thanks all.
You are defining this path in the enqueue style function. With the dot . you are connecting with the following string.
You can use this to get the current plugins url:
plugin_dir_url( __FILE__ ) . '/css/style_overview.css'
Or you can just define it hard coded as you did:
'style_overview', 'http://127.0.0.1/wp-content/plugins/profile_plugin/css/style_overview.css'
The function you are using gives you the url where the style.css of your active theme is located:
get_stylesheet_directory_uri()
That is why you are getting your theme path followed by the url you added as a string.
Use plugins_url() and then append your directory or file structure on the end of that.
https://developer.wordpress.org/reference/functions/plugins_url/
Example:
wp_register_style(
'my-css',
plugins_url( '/blocks/dist/style.css', __FILE__ ),
array( 'wp-blocks' )
);
I am trying, essentially, to add the ?ver=1.0 tag to the end of my stylesheet, which I have included in my child theme's function file (enqueued). I have read the documentation in the codex but it does not seem to be applying in the source code, and it is not updating/cache breaking as intended when I apply updates.
The stylesheet itself is being included, however, the version is not applying, so I'm somewhat at a loose end here.
This is my current code:
add_action( 'wp_enqueue_scripts', 'kl_child_scripts',11 );
function kl_child_scripts() {
wp_deregister_style( 'kallyas-styles' );
wp_enqueue_style( 'kallyas-styles', get_template_directory_uri().'/style.css', '' , ZN_FW_VERSION );
wp_enqueue_style( 'kallyas-child', get_stylesheet_uri(), array('kallyas-styles') , filemtime(get_stylesheet_directory() . '/style.css'));
N.B. It is the last line to which I am trying to apply the version. (kallyas-child). The previous line (kallyas-styles) does appear to have some form of version ZN_FW_VERSION, but that does not produce the desired effect.
filemtime(get_stylesheet_directory() . '/style.css') is intended to break cache and update the version number each time the file is saved. Edit: I do, now, believe that this code does in fact work, but the theme (as it is a pre-build) is preventing it from applying properly. I will update if and when I figure this out, hoping to get to talk to the theme developers.
The issue is that your are using filemtime which return an int and you should have a string. As you can read in the documentation :
$ver
(string|bool|null) (Optional) String specifying stylesheet
version number, if it has one, which is added to the URL as a query
string for cache busting purposes. If version is set to false, a
version number is automatically added equal to current installed
WordPress version. If set to null, no version is added. Default value:
false
so you may try this :
add_action( 'wp_enqueue_scripts', 'kl_child_scripts',11 );
function kl_child_scripts() {
wp_deregister_style( 'kallyas-styles' );
wp_enqueue_style( 'kallyas-styles', get_template_directory_uri().'/style.css', '' , ZN_FW_VERSION );
wp_enqueue_style( 'kallyas-child', get_stylesheet_uri(), array('kallyas-styles') , strval(filemtime(get_stylesheet_directory() . '/style.css')));
I added the strval that will convert the int to string
Use below code
define('ZN_FW_VERSION','1.0');
add_action( 'wp_enqueue_scripts', 'kl_child_scripts',11 );
function kl_child_scripts() {
wp_deregister_style( 'kallyas-styles' );
wp_dequeue_style( 'kallyas-styles' );
wp_enqueue_style( 'kallyas-styles', get_template_directory_uri().'/style.css', array() , ZN_FW_VERSION );
wp_enqueue_style( 'kallyas-child', get_stylesheet_uri(), array('kallyas-styles') , ZN_FW_VERSION);
}
in functions.php I added
wp_enqueue_style( 'kallyas-child',
get_stylesheet_directory_uri() . '/style.css',
array( 'kallyas-styles' ),
filemtime(__DIR__.'/style.css')
);
tested it at tmp.demos.rent-a-ninja.org
worked with divi theme
how do I actually add jQuery to html5blank wordpress theme by toddmotto?
I'm quite new to wordpress so I'm not really sure how does this work.
For normal html, I'll just link a script tag of jquery and another script tag with $(document).ready.. . . . . and start the jquery codes.
Would really love if someone who had experience using html5blank theme could shed some light.
Thanks much!
The WordPress recommends add jquery from WordPress itself.So you can add jquery using following way.
Add code to your current theme functions.php file.
function func_add_my_jquery() {
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'func_add_my_jquery' );
I load all my scripts from functions.php by using wp_enqeue_script. This will avoid duplicate loading.
If you only want to load Query, you can do this by:
function load_my_scripts() {
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'load_my_scripts' );
This will load the jQuery that follows WP. You can see other default scripts you can load here:
If you want to load other JS scripts, then you must use this:
function theme_name_scripts() {
wp_register_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js', array('jquery') );
wp_enqueue_script( 'my-script' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
The array('jquery') is for dependencies and in this case means that jQuery must be loaded before this script can be loaded.
If you want to register a newer version of jQuery, you first have to deregister the loaded jQuery:
wp_deregister_script( 'jquery' );
This question may seem too dummy, I found the info on codex (its my first project on wordpress) and I want this style to be for the admin and for the frontend... they wrote I can use this
wp_register_style( 'uni-bootstrap', DS.'plugins'.DS.'uni-info'.DS.'css'.DS.'bootstrap.min.css' );
wp_enqueue_style('uni-bootstrap');
I even named a DS variable, in case is linux or windows (directory slash) , still, I look on the loaded page, and the route is correct, but no slashes. I try to write them by my own with "/" and still, no success..
I get the absolute path, but when I see what it loads it says UNDEFINED
So, I changed and try other way(for the admin only)
add_action( 'admin_head', 'admin_css' );
function admin_css(){
echo '<link rel="stylesheet" type="text/css" href="MYPATH">';
}
Still, the same UNDEFINED result, I really dont know how to load it, and how to use the paths, due I dont know how wordpress manage the folders and so on, any idea?
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );
function register_plugin_styles() {
wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) );
wp_enqueue_style( 'my-plugin' );
}
and for admin
add_action( 'admin_enqueue_scripts', 'register_plugin_styles' );
I am using jQuery load() to load a PHP page at runtime. And I am not using an elegant way to get the PHP URL. Somebody tell me an elegant way?
My method:
'http://' + document.domain + '/wp-content/themes/mytheme/ajax/myload.php'
If my wp is under a sub dir,I have to change the url to this:
'http://' + document.domain + '/mysubdir/wp-content/themes/mytheme/ajax/myload.php'
this is so ugly!
Structure of code is;
index.php contains a.js
a.js uses ajax to load tpl.php (just echo some div) into index.php
tpl.php is in my theme path.
So the question is how to get the URL of tpl.php in a.js?
You should be able to use get_template_directory_uri.
http://codex.wordpress.org/Function_Reference/get_template_directory_uri
Also, get_site_url may come in handy as well.
http://codex.wordpress.org/Function_Reference/get_site_url
And get_bloginfo gives you a bunch of stuff, like the site url and home directory url.
http://codex.wordpress.org/Function_Reference/get_bloginfo
Also, It sounds like you need to add a parameter to your JS code, which is "passed" from PHP.
For example (in pseudocode)
a.js:
loadDivFromThemePage(var themePagePath)
{
// call ajax load with themePagePath variable
}
index.php:
<script>
loadDivFromThemePage(<?php echo get_template_directory_uri() . "/tpl.php" ?>)
</script>
You need to use wp_localize_script.
https://codex.wordpress.org/Function_Reference/wp_localize_script
For example, in my javascript I call the variable 'myLocalized' when I need my path. I use Angular with WordPress. My code is below:
function() mes_scripts{
wp_register_script(
'angularjs',
get_stylesheet_directory_uri() . '/bower_components/angular/angular.min.js'
);
wp_register_script(
'angularjs-route',
get_stylesheet_directory_uri() . '/bower_components/angular-route/angular-route.min.js'
);
wp_enqueue_script(
'my-scripts',
get_stylesheet_directory_uri() . '/js/scripts.min.js',
array('angularjs', 'angularjs-route' )
);
wp_localize_script(
'my-scripts',
'myLocalized',
array(
'partials' => trailingslashit( get_template_dir
)
);
}
add_action( 'wp_enqueue_scripts', 'mes_scripts' );