I'm using wordpress 3.3.1 and it seems that jquery is there by default, all i need to do is to enqueue the file through wp_enqueue_script function. What if i want to put this function inside another plugin that is already installed. For example, i'm using jwplayer plugin for wordpress now if i want the jwplayer plugin to enqueue the jquery file for me where do i tell it to do this, the main plugin file for jwplayer is named as jwplayermodule.php and it's at the root of the jwplayer plugin directory.
Regards
You enqueue jquery like so:
// Function to perform any things that need to be done BEFORE the header is called
function my_wp_init() {
wp_enqueue_script('jquery');
}
// Enable the widgets, prepare the function for the head call, etc.
add_action('init', 'my_wp_init');
The best place to do this would be in your theme's functions.php file. This way, jQuery is always loaded in your theme.
ALTERNATIVELY, you can drop the same code into the plugin php file you mentioned - jwplayermodule.php
Related
I'm trying to make changes to a WordPress theme via FTP, and it doesn't appear to update on the live website.
In this case I made changes to a JavaScript file:
../wp-content/themes/Divi/includes/builder/scripts/frontend-builder-global-functions.js
Currently a child version of the theme is active on the site. Is there a process I'm missing to have my live website reflect the changes? Also, in Chrome developer tools, the file I tried to update has ?ver=3.17.6 at the end of the filename.
The easiest way would be to copy the updated JavaScript file from the parent into the child theme's folder, next in your child theme functions.php file use the built in WordPress functions wp_deregister_script and wp_register_script. Your code should be like this:
function new_child_script() {
// De-register the Divi default theme script
wp_deregister_script('frontend-builder-global'); //check the name of the default script in page source
// Register the updated script from the child theme
wp_register_script('frontend-builder-global-custom-script', get_template_directory_uri() . '/js/frontend-builder-global-functions.js',
array('jquery'));
// Enqueue the script
wp_enqueue_script('frontend-builder-global-custom-script');
}
add_action('wp_enqueue_scripts', 'new_child_script');
I am new to wordpress and want to know best way to add css from installed and activated plugin.
I have one activated plugin called "social-media" and in that plugin i have created one css file called "social-login-style.css"
I want to include this css file and apply style to my content. How should I add css file in any page so that I can see the effects.
In Short, I want to add social-login-style.css on wp-login.php file.
Whether it is theme or plugin, css or js, any custom addition, wp_enqueue_scripts is the only acton you need for all.
https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts
function additional_custom_styles() {
/* Enqueue The Styles */
wp_enqueue_style( 'custom-login-style', plugins_url( 'social-login-style.css', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'additional_custom_styles' );
If you it to be added only on login screen then use the following condition,
if ( $GLOBALS['pagenow'] === 'wp-login.php' ) {
// We're on the login page!
}
Hope this one help :)
UPDATE
Please check login_enqueue_scripts. it is designed to add custom scripts into login page only. Works well without any login condition.
https://codex.wordpress.org/Plugin_API/Action_Reference/login_enqueue_scripts
Without saying what you want to achieve is impossible, it certainly is against how WordPress is designed to work. Plugins are supposed to be modules that add to or modify how WordPress works. The folder of a plugin should only hold files pertaining to what the plugin does and, if it's a public plugin, its contents are controlled by a versioning (SVN) system.
In short, adding a file to an existing plugin will not have any effect, regardless of whether the plugin is active or not. And you should not add files to plugins you haven't developed yourself.
To load a CSS file on the login page, one should add an action hook to login_enqueue_scripts, as instructed in Customizing Login Form page of the codex. The stylesheet itself should be placed in either a custom plugin (you could create for your use-case) or inside the current theme folder.
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
A WordPress theme I am developing has an integrated custom post type called "albums" which utilizes a few custom templates (archive-albums.php, content-albums.php, etc.). What I want to do is transfer this functionality, along with the template files, into a plugin for the sake of portability.
I transferred the CPT code from the functions.php with success, but when I try to move the template files from the theme folder to the plugin folder, things fall apart. I feel like it should be simple to somehow register the templates so WordPress knows to load them.
Can my WordPress custom templates be in plugin folder or only theme folder?
Things are falling apart because when you move those files, you're violating WP's native template hierarchy. You'll need to explicitly declare the location of those files. Using the archive as an example, you could add something like this to functions.php (to tell WP to look elsewhere):
add_filter('template_include', 'include_album_template', 1);
function include_album_template($template_path) {
if(get_post_type() == 'albums') {
if(!is_single()) {
$theme_file = 'path-to-your-plugin-directory';
$template_path = $theme_file;
}
}
return $template_path;
}
Obviously you'd use your own path, and I wrote this hastily so you might want to refactor.
I have the same issue. I'm already using add_filter ('template_include', ...) problem is that I need to specify a file to return, and in this case being it,index.php. This raises an issue with the theme not running entirely as if installed via themes folder, because what I need is to have WP selecting the appropriate file to render without any conditional logic from my part. So if it is a post it will select the single.php and so on. Another problem raised with this method is that in header.php the call get_header (); ignores the local file header.php and loads the default theme installed file instead.
I can't get any enqueue_script to work, here is my code (which is in my plugin file)
function load_custom_wp_admin_style() {
wp_enqueue_script( 'jquery-ui-datepicker', '', array('jquery'));
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );
Where am i going wrong? I can't seem to load my own scripts either
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-datepicker');
I am now getting jquery-ui script loaded, but the datepicker script is not being loaded
jquery-ui-datepicker is bundled with WordPress (recent versions) so you don't need to tell it anything more than the script handle.
wp_enqueue_script('jquery-ui-datepicker');
But: "can't get it to work" means what exactly? Have you looked in the page source and not found the script being loaded? Or it loads, but has no CSS styling it? I suspect your problem is the latter, because you aren't enqueuing any CSS for the datepicker (above, at least).
Now, the problem is that WordPress doesn't actually bundle in any supporting CSS for the datepicker, since WordPress itself doesn't use it. So, you need to either:
add some supporting CSS to your admin stylesheets
enqueue a compatible standard jquery-ui theme, e.g. from a CDN
For the latter, I blogged about that a while ago; here's some code that should handle that for you; add it to your function, above.
global $wp_scripts;
// get registered script object for jquery-ui
$ui = $wp_scripts->query('jquery-ui-core');
// tell WordPress to load the Smoothness theme from Google CDN
$url = "https://ajax.googleapis.com/ajax/libs/jqueryui/{$ui>ver}/themes/smoothness/jquery.ui.all.css";
wp_enqueue_style('jquery-ui-smoothness', $url, false, null);
That loads the whole enchilada, but you might want to pare it back to just the CSS that the datepicker needs.
Edit: to get the datepicker script on an older version of WordPress which doesn't bundle the datepicker script with the other jquery-ui scripts, the easiest solution is to install Use Google Libraries. This plugin will replace the local jquery scripts with Google's CDN hosted versions, and all jquery-ui scripts will be downloaded as a single (well-cached!) script.