I have a basic bunch of CSS/Js files defined in my functions.php file. There I register and enqueue those scripts and stylesheets.
But in specific situations I want to load additional scripts based on the site template which is used.
I tried to register and enqueue those additional scripts in the specific template file, but it didnt work. It does only work when included in the functions.php.
What is the correct way to do this?
You can try like this
add_action( 'wp_enqueue_scripts', 'enqueue_file' );
function enqueue_file() {
if(is_front() || is_archive()){ // you can set here condition
wp_enqueue_style( 'main-css', get_template_directory_uri() .
'/static/css/main.min.css"' );
}
}
add this to your functions.php in child theme:
add_action(
'wp_enqueue_scripts',
'loadActionFrontend'
);
function loadActionFrontend()
{
if( is_page( 'pageid here' ) ) {
wp_register_script(
'scriptName',
'scripturl',
[],
'',
true
);
wp_enqueue_script('scriptName');
}
}
with the query if( is_page( 'pageid here' ) ) you can insert your desired pageid where the script shold loaded.
Related
I've been usually to include JavaScript files in my plugins in the following way:
function A_pubblish_scriptFEnd(){
$A_scriptFE=plugins_url( 'Js/CPFront.js', __FILE__ );
wp_enqueue_script( 'CP-js-FE', $A_scriptFE, true );
}
add_action( 'wp_enqueue_scripts', 'A_pubblish_scriptFEnd' );
It worked for every single plugin but now I'm having a problem if I upload more than one plugin WordPress gives me an error, cause I can't repeat wp_enqueue_scripts more than one time.
How can I include in a correct way multiple js files for multiple plugin?
What is the correct way to include files in the main php file?
This is the correct way to enqueue scripts.
/**
* Proper way to enqueue scripts and styles.
*/
function themeslug_enqueue_style() {
wp_enqueue_style( 'my-theme', 'style.css', false );
}
function themeslug_enqueue_script() {
wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );
Having multiple actions on the wp_enqueue_scripts hook is perfectly fine.
( https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/ )
I am trying to find a way to dequeue styles and scripts on the "login, password reset and register " default wp pages.
I understand there is 'login_enqueue_scripts' but no such thing as login_dequeue_scripts.
Whats your approach ? Ive tried something like this:
add_filter('body_class', function($classes) {
if (in_array('login', $classes)) {
wp_dequeue_style( 'list-css' );
wp_dequeue_style( 'blog-css' );
wp_dequeue_style( 'dir-css' );
wp_dequeue_style( 'author-css' );
}
return $classes;
});```
You could just use the wp_dequeue_script/style function for the login_enqueue_script action. Like so:
function custom_login_page() {
wp_dequeue_style( 'list-css');
}
add_action( 'login_enqueue_scripts', 'custom_login_page' );
The action of 'login_enqueue_scripts' is what happens when the other scripts/styles are loaded on that page. You can create a custom function to run when that happens, which is what you want.
However, rather than dequeueing, why not just write some of your own CSS for the elements on the page, then enqueue whatever that custom CSS?
function custom_login_css() {
wp_enqueue_style( 'custom-login-styles', get_stylesheet_directory_uri() . '/custom-login.css' );
}
add_action( 'login_enqueue_scripts', 'custom_login_css' );
Here's a good reference for the different elements you can customize with CSS on the WP login page.
I want to work on my style.css file.
But It would be better if after all change and test I publish it for users.
So Is there any way to make another style.css which load just for admin user?
You need to check the logged in user role before queuing it.
So the code should be like bellow.
you need to replace the plugins_url( 'my-plugin/css/plugin.css' ) with your stylesheet's path
function register_only_for_admin_styles() {
if( current_user_can('editor') || current_user_can('administrator') ) {
wp_register_style( 'admin-style', plugins_url( 'my-plugin/css/plugin.css' ) );
wp_enqueue_style( 'admin-style' );
}
}
add_action( 'wp_enqueue_scripts', 'register_only_for_admin_styles' );
Try the code then let me know the result.
Thanks
I'm working on a WordPress plugin which works perfectly if I insert the shortcode in a page or an article, but if I insert the shortcode in a widget area the .js and .css files aren't loaded.
//CUSTOM JS FUNCTIONS
add_action( 'wp_enqueue_scripts', 'my_functions' );
function my_functions() {
wp_register_script( 'my-script-1', plugin_dir_url( __FILE__ ) . 'js/functions.js', array( 'jquery' ), '1.0', true );
}
//CUSTOM CSS
add_action( 'wp_enqueue_scripts', 'my_css' );
function my_css() {
wp_register_style('my-css', plugin_dir_url( __FILE__ ) . 'css/style.css' );
}
//INCLUDE JS IF SHORTCODE EXIST
add_action( 'wp_print_styles', 'form_my_include' );
function form_my_include() {
global $post;
if (strstr($post->post_content, 'my_form_shortcode')) {
wp_enqueue_script('my-script-1');
wp_enqueue_style('my-css');
}
}
//SHORTCODE
function my_shortcode_add(){
ob_start();
include("include/my_function.php");
return ob_get_clean();
}
add_shortcode('my_shortcode', 'my_shortcode_add');
// Enable shortcodes in text widgets
add_filter('widget_text', 'do_shortcode');
You need to enqueue your script and stylesheet directly inside the shortcode. You can also load both the script and stylesheet inside the same wp_enqueue_scripts() hook.
//CUSTOM JS FUNCTIONS
add_action( 'wp_enqueue_scripts', 'my_scripts_and_stylesheets' );
function my_scripts_and_stylesheets() {
wp_register_script( 'my-script-1', plugin_dir_url( __FILE__ ) . 'js/functions.js', array( 'jquery' ), '1.0', true );
wp_register_style('my-css', plugin_dir_url( __FILE__ ) . 'css/style.css' );
}
//SHORTCODE
function my_shortcode_add(){
wp_enqueue_script('my-script-1'); //loaded here
wp_enqueue_style('my-css'); //loaded here
ob_start();
include("include/my_function.php");
return ob_get_clean();
}
add_shortcode('my_shortcode', 'my_shortcode_add');
// Enable shortcodes in text widgets
add_filter('widget_text', 'do_shortcode');
Your current code grabs to content inside post, and checks for the shortcode in there. Depending on where your shortcode is called, it might not actually be present in the post content, despite being present on the page.
By adding the wp_enqueue_script() & wp_enqueue_style() to your shortcode function, it will enqueue your whenever your shortcode is present on a page, regardless of where on the page it is.
Add this code to your plugin.
// Enable shortcodes in text widgets
add_filter('widget_text','do_shortcode');
This code simply adds a new filter allowing shortcodes to run inside widget.
I have a page that I want to apply custom css file, but I am having difficulty loading the custom css file for my page 'homepage'. If anyone could help me out, it would be highly appreciated. thank you!
This part works:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css');
}
this part does not :(
function addcssAndScripts()
{
if ( is_page( 'homepage' ) )
{
wp_enqueue_style( '/stylehome.css', get_stylesheet_uri() );
}
}
add_action( 'wp_enqueue_scripts', 'addcssAndScripts');
You're misunderstanding how wp_enqueue_style should be used.
In the example below the first argument I pass in is a handle, 'style-home'. The second argument is the path to the file.
function wpse_load_scripts_styles() {
if ( is_page( 'homepage' ) ) {
wp_enqueue_style( 'style-home', get_stylesheet_directory_uri() . '/stylehome.css' );
}
}
add_action( 'wp_enqueue_scripts', 'wpse_load_scripts_styles' );
get_stylesheet_directory_uri() gets the URL to your child theme folder. get_template_directory_uri() which is used in the first block of code in your question gets the path to the parent theme directory. Select the correct function based on where the file is located.
My guess would be that you've set the page, homepage, as your front page therefore you may want to replace the conditional with is_front_page().
Replace:
if ( is_page( 'homepage' ) ) {
With:
if ( is_front_page() ) {
Finally get_stylesheet_uri() as used in the second block of code in your question will return the URL of the child theme's stylesheet (or the parent theme if you don't have a child theme setup).
Further reading: http://codex.wordpress.org/Function_Reference/wp_enqueue_style
Will this work for you?
function addcssAndScripts()
{
if ( is_page( 'homepage' ) )
{
wp_enqueue_style( 'child-home-style', get_stylesheet_directory_uri . '/stylehome.css');
}
}
add_action( 'wp_enqueue_scripts', 'addcssAndScripts');
http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri
http://codex.wordpress.org/Function_Reference/wp_enqueue_style