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' )
);
Related
This is my plugin directory access when I use plugin_dir_url(__FILE__)
http://127.0.0.1/WordPressProject/myplugin/wp-content/plugins/advanced-plugin/admin/
But I want to access to http://127.0.0.1/WordPressProject/myplugin/wp-content/plugins/advanced-plugin/
After using the function it includes with
admin
folder. not the base plugin base url
Thanks
Use plugin_dir_url( __FILE__ ); for the URL and plugin_dir_path( __FILE__ ); for the path.
Pass the plugin’s main file to both functions to get similar results.
plugins_url( string $path = '', string $plugin = '' )
Retrieves a URL within the plugins or mu-plugins directory.
For more information
Thanks
Finally I got a solution by using
plugin_dir_url(dirname(FILE))
I am new to Wordpress and I need to convert a PSD int a Wordpress theme.
For that I downloaded a naked wordpress theme to start with and I tried to add my own css style in function.php as follows:
function naked_scripts() {
// get the theme directory style.css and link to it in the header
wp_enqueue_style( 'main-style', get_template_directory_uri() . '/style/main.css' );
wp_enqueue_style( 'responsive-style', get_template_directory_uri() . '/style/responsive.css' );
wp_enqueue_style( 'bootstrap-style', get_template_directory_uri() . '/style/bootstrap.min.css' );
// add fitvid
wp_enqueue_script( 'jquery-js', get_template_directory_uri() . '/js/jquery.js', array( 'jquery' ), '1.10.2', true );
// add theme scripts
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.0.3', true );
}
add_action( 'wp_enqueue_scripts', 'naked_scripts' ); // Register this fxn and allow Wordpress to call it automatcally in the header
but in the browser I did not get my style and I have his error:
GET http://rota.alwaysdata.net/wp-content/themes/theme1/style/main.css?ver=4.1
what's ver=4.1 ??
It's a cache-buster added by WordPress. You can set it to any number you want using the $ver argument in wp_enqueue_style
http://codex.wordpress.org/Function_Reference/wp_enqueue_style
The ?ver=X.XX has NO effect on the content of the stylesheet.
CSS Cache-busting references:
http://css-tricks.com/snippets/wordpress/prevent-css-caching/
https://www.mojowill.com/developer/get-your-wordpress-css-changes-noticed-immediately/
I suggest if it's your first time creating a wordpress template using these resources:
Underscores blank wordpress theme:
http://underscores.me/
Lynda.com underscores tutorial:
http://www.lynda.com/underscores-tutorials/WordPress-Building-Themes-from-Scratch-Using-Underscores/163092-2.html
This is what i used to make my first wordpress project and it worked out grate , here is the result: ibreatheart.com
Hope it helps .
I am having an issue with loading some javascript in a child theme I am creating for one of my themes.
Essentially I do:
get_stylesheet_directory() . '/path/to/javascript.js'
which is what your suppose to do, But , as per the documentation, I am getting:
mysite.com/dev/home/path/to/wordpress/path/to/theme/path/to/js.js
which is causing it to not find the required file. because home is at the root of the site.
any ideas on what I can do to fix this?
get_stylesheet_directory() returns a server path. I'm pretty sure you want:
get_bloginfo('stylesheet_directory');
That will return a URL of your stylesheet directory in relation to your Wordpress Installation so you can load external assets like Javascript files that reside in your theme.
I think this will do the trick:
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/path/to/javascript.js"></script>
It's better to enqueue scripts and styles the WordPress way.
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
Put this in functions.php
add_action( 'wp_enqueue_scripts', 'enqueue' );
function enqueue() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'theme-style', get_stylesheet_directory_uri().'/css/theme.css' );
wp_enqueue_script( 'theme-scripts', get_stylesheet_directory_uri().'/js/theme.js' );
}
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.
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' );