In Wordpress, I have a page template that uses a specific JS file and CSS file that no other part of the site uses. On this specific template page, is there any way to add these items to the head, before wp_head is called?
I realize I could use is_page_template() in a conditional but my head file is getting out of control.
If you look here http://codex.wordpress.org/Plugin_API/Action_Reference you can see that the hook called just before wp_head is get_header
So what you need to do is: add an action called on that hook, test if you are on the page that you want and if you are add the script and the css
This would happen in a plugin (not in the theme files like header.php or functions.php) and it would look something like this:
// call the function that adds your current script
add_action('get_header', 'add_that_script');
function add_that_script()
{
if (is_page(SOME_PAGE_IDENTIFIER)) // this is the page you need; check http://codex.wordpress.org/Function_Reference/is_page on how to use this function; you can provide as a parameter the id, title, name or an array..
{
wp_register_script( 'mycustomscript', 'http://www.example.com/script.css'); // register your script
wp_enqueue_script( 'mycustomscript' ); // enqueue it to be added in the head section
wp_register_style( 'mycustomstyle', 'http://www.example.com/example.css'); // register your css
wp_enqueue_style( 'mycustomstyle' ); // enqueue it to be added in the head section
}
}
You just need to replace the id for your page and the urls to the js file and to the css. Sure, maybe you want to test some other way if you are on the right page, but I think that this shows the idea.
What about using?
if(is_page('Your Page Name')):
// do something for me
endif;
i believe u can do it from functions.php. it's tidier if you do it from there. i suggest, unless that js file is really big, you are better off including it everywhere and use wp-minify to group all js files together into one.
Related
I'm pretty new to WordPress and want to remove some unneeded js/css files that are loaded inside of the html-head of the page.
In wp-content/themes/x/framework/views/header/base.php I found the following code:
<head>
<?php wp_head(); ?>
</head>
This obviously doesn't help me at all. I have no idea what WordPress' "wp_head()"-function does next. Isn't there some simple file where I can just write/edit simple HTML for the "head" somewhere?
wp_head() is a function that fires the wp_head action hook. Wordpress is built on action hooks and filters, which means that not only can plugins and themes add things to your setup through these hooks, but you have the ability to remove things as well. Most of this is done programmatically (in PHP) instead of there just being an html template, although that's not always the case... but it IS the case in your case.
Scripts and styles, for the most part, are enqueued through the wp_enqueue_scripts action hook. You'll want to perform your script removals here.
The problem is, you'll have to know the name the script was registered as before you can remove it. For instance, jQuery is registered as 'jquery'. Pretty simple, right? However, not all scripts are going to be that simple, and you'll have to browse through the code to find the registered handles (names) for those scripts. Styles are a bit easier, as when you inspect your page in the browser, styles will have an id attribute set to 'example-style-css'. Wordpress appends the '-css' to registered and enqueued styles, so the name of your style is actually 'example-style'.
In your theme's functions.php, you can dequeue scripts and styles so they won't be included on your page like so:
function stack_46669800_dequeue(){
wp_dequeue_script('the-script-you-want-to-remove');
wp_dequeue_style('the-style-you-want-to-remove');
}
add_action('wp_enqueue_scripts','stack_46669800_dequeue',100);
(Notice the 100 in the add_action function here... This is the 'priority', or the order in which all added actions are fired. Most are at 10, so I changed the priority here to 100 so this would be fired presumably later than whatever is enqueueing your unwanted scripts. You can't dequeue something that hasn't been enqueued yet.)
Bit is a basic question here but can someone confirm that this statement be confirmed: WordPress Pages (certain templates created within) can pull different CSS and JS?
Or - does WordPress only permit universal CSS + JS to be pulled across the entire site?
Thanks for clearing this up.
Depends on what plugin and themes you use. The WordPress/PHP functions wp_enqueue_style() and wp_enqueue_script() can be used literally by everyone (core, themes, plugins, you) to request WordPress to load styles or JavaSctript. You can combine this with WordPress functions to check whether the current page is something you want to filter for (post type, post, front-page, category archive, template, etc.). Here is an example to load a custom style if on front page :
if (is_front_page()) {
wp_enqueue_style('custom-frontpage', 'my/path/to/frontpage.css');
}
You will have to hook this piece of code to the wp_enqueue_script action so that WordPress executes it at the appropriate time. Here is an example using an anonymous function:
add_action('wp_enqueue_scripts', function() {
if (is_front_page())
wp_enqueue_style('custom-frontpage', 'my/path/to/frontpage.css');
});
You can also register your code as a "normal" function and pass the functions name to add_action() instead.
Edit: Enabling and disabling plugins is a bit more difficult, since you can never know how they implement their features without examining the source code. Here are my thoughts on this:
The plugin likely uses the above method (wp_enqueue_styles, wp_enqueue_scripts) to register it's styles and scripts. The plugin, since it assumes to be needed on all pages and posts, does this on every page without the conditional checking described earlier.
You could do one of the following to stop the plugin from doing this:
Identify the place where the plugin loads the styles and scripts and add the if-statement to only do so if the post-ID matches your desired post-ID. This method is bad since your changes are lost every time the plugin is updated.
Write a "counter plugin" (you could just add it to your theme or find a plugin that allowes you to add PHP to your page) that "dequeues" the style and script added by the plugin with inversed conditional tag
The counter-plugin approach would look as follows:
function custom_unregister_plugin() {
if (not the desired blog post) {
wp_dequeue_style('my-plugin-stylesheet-handle');
wp_dequeue_script('my-plugin-script-handle');
}
}
Make sure this function is executed after the enqueuing-code of your plugin by giving it a low priority in the same hook (999 is just an example, test it yourself):
add_action('wp_enqueue_scripts', 'custom_unregister_plugin', 999);
With wp_enqueue_style() you can add stylesheet (https://developer.wordpress.org/reference/functions/wp_enqueue_style/)
You can use it after detecting which template is used
function enqueue_custom_stylesheet() {
if(get_page_template() == 'contact.php')
wp_enqueue_style( 'contact-style', get_template_directory_uri().'/contact.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_stylesheet' );
You can use wp_enqueue_style for your CSS, wp_enqueue_script for your JS, wp_localize_script to pass variables from PHP to JS.
You can call these with hooks like:
funtion enqueue_my_stuff()
{
// your enqueue function calls
}
add_action('wp_enqueue_scripts','enqueue_my_stuff'); //front end
add_action('admin_enqueue_scripts','enqueue_my_stuff'); //admin panel
add_action('login_enqueue_scripts','enqueue_my_stuff'); //login screen
I have created a plugin which has it's own custom page template. I dont want this apge to use the default themes css, so have excluded get_header(), and used the following which just pulls in the wordpress functionality
require_once('../../../wp-load.php'); global $wpdb, $woocommerce;
My problem now is i am trying to enqueue a style, but as my template is not including get_header() or wp_head() it doesnt look like it is working. Is there a way around this?
I am using wp_enqueue_style like this:
function woops_styles() {
wp_register_script('packing-slip', plugins_url('/my-plugin/style.css', __FILE__));
wp_enqueue_script('packing-slip');
}
add_action( 'wp_enqueue_scripts', 'woops_styles' );
You will need to include wp_head(), so you will need to have a header. wp_enqueue_scipts hooks on wp_head().
What I would suggest if you need a diffirent styling for this page is to assign a body_class() to this page and then style that accordingly. You can use a conditional statement (is_page_template()) to only assign the body_class() to this specific page template.
If you really don't need a header to show up, simply hide it with css
I am attempting to load a script using wp_enqueue_style following the advice on the Wordpres Codex, but the script doesn't seem to be included in the source. Is this the correct way to do it?
function load_scripts() {
wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
Your action and function looks fine from here. The wp_enqueue_scripts hook should work perfectly for both stylesheets and scripts.
Have you tried echoing something out in the function to see if it's actually being called at all? I.e:
function load_scripts() {
echo "Does this output to the actual page?";
wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
If it's not, you might have a problem with your placement of the code, but if you keep everything in functions.php and outside of any other scope this shouldn't be a problem.
Another thing that can cause this behaviour is if you have already registered a stylesheet or script with the same handle ("bootstrap.css" in this case). The first argument in the wp_enqueue_style() function is just a handle for internal dependency management and should be unique, try renaming it to something else and see if that fixes your problem.
Okay, first step is to ensure you are using the correct path of the CSS file.
Add the following line in the functions.php of your theme or other appropriate place.
print( get_template_directory_uri() . '/css/bootstrap.min.css' );
This should print the URL of your desired stylesheet on top of the page. Copy and paste this URL in a new tab, if it opens a stylesheet then you are good to go. Otherwise, there is a mistake in the path.
Second step is to ensure that wp_head() is being called on the page you are displaying. It can be placed in your header template or top of archives/post files etc. This function actually renders the styles and scripts on the page.
Without wp_head(), its basically useless to enque anything as you can add links and scripts manually if you know the exact paths.
Note that in admin mode there is a special hook 'admin_enqueue_scripts'. So, if there is need to load CSS in both modes, it should be done on two hooks.
function load_scripts() {
wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
add_action('admin_enqueue_scripts', 'load_scripts');
You are trying to enqueue style on wp_enqueue_scripts hook.
Try wp_print_styles.
add_action('wp_print_styles', 'load_scripts');
Also try to register style, first.
in case you don't want to use wp_head(); in your template, you could also include your styles directly:
<link rel="stylesheet" href="<?php echo get_theme_file_uri( 'style.css' ); ?>">
beware though: wp_head() includes tons of stuff (scripts, styles,...), by wordpress itself as well as most plugins, so only omit it if you know what you're doing.
Register the style first:
function register_plugin_styles() {
wp_register_style('my-plugin', plugins_url('my-plugin/css/plugin.css'));
wp_enqueue_style('my-plugin');
}
http://codex.wordpress.org/Function_Reference/wp_register_style
Do that way. Dont try to enqueue directly. And put code into functions.php of course.
Fist confirm path of the css file is correct or not if is it a correct try with below code :
function load_scripts() {
wp_enqueue_style('load-custom-css-new', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
or Go with this URL.
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
I had the same problem. Although I have implemented this many times before, I lost many hours to find out what went wrong with this.
Because I made my own themes, I had declared this file unit as “fuctions.php” (I lost the -n- letter).
So, besides all the things described above you should also consider, take a good look at the file name and confirm that is “functions.php” (not fuctions, not function etc).
This might be also the reason for you.
I had the same issue. I fixed it by hard refreshing the page with Ctrl + F5 to clear cache and the css loaded normally.
If you are protecting the directory with .htpasswd, the https call generated by get_stylesheet... will fail, and you might lose some time chasing that one.
Not sure if I worded it correctly but basically I wanted to load plugin CSS/JS on pages only that uses the actual plugins.. I have gotten a lot of it done by search thru the plugin files for any handles used in wp_enqueue_script within the plugins and simply wp_dequeue_script them in functions.php
However, there are some enqueues for style that include a .php and not a css file, for example.. in the plugin it enqueues a file
wp_enqueue_style("myrp-stuff", MYRP_PLUGIN_URL . "/myrp-hotlink-css.php");
so I've tried:
wp_dequeue_style('myrp-stuff');
wp_deregister_style('myrp-stuff');
It doesn't work
However, when the page/post is rendered it shows as
<link rel='stylesheet' id='myrp-stuff-css' href='http://www.modernlogic.co/wp/wp-content/plugins/MyRP/myrp-hotlink-css.php?ver=3.4.2' type='text/css' media='all' />
It addes -css to the id and it refuses to dequeue/deregister and be moved.
I have also tried the following with no luck
wp_dequeue_style('myrp-stuff-css');
wp_deregister_style('myrp-stuff-css');
Any suggestions?
Scripts and styles can be enqueued in any order and at anytime before wp_print_* actions are triggered. Which can make it difficult to remove them from the queue before output.
To make dequeue work consistently hook into into wp_print_styles or wp_print_scripts with a high priority, as this will remove the scripts and styles just before output.
For instance in your plugin loader code or template's functions.php file you could have a function and action hook like this:
function remove_assets() {
wp_dequeue_style('myrp-stuff');
wp_deregister_style('myrp-stuff');
}
add_action( 'wp_print_styles', 'remove_assets', PHP_INT_MAX );
Setting a high priority (third argument to add_action) when hooking into the action will help ensure that the callback remove_assets gets called last, just before scripts/styles are printed.
Note, while this technique is legitimate for removing scripts/styles it should't be used for adding assets. See this Wordpress Core blog post for more info.
Just to be sure, have you placed your code inside a function called by an action like this?:
add_action('wp_enqueue_scripts', 'dequeue_function');
function dequeue_function() {
wp_dequeue_style( array('myrp-stuff', 'myrp-stuff-css') );
wp_deregister_style( array('myrp-stuff', 'myrp-stuff-css') );
}