I am embedding my Jplayer code into my website however there is already jquery within the wordpress installation but when I copy my code across the player is broken as it shows no the volume icon with the x over it. When I include an external jquery script it breaks the entrie site but the player works. Is there any better way for me to include jPlayer into my wordpress site?
The jPlayer script enqueueing has to play by WordPress rules. The easiest (and maybe only) way is with a Shortcode. There are lot of developers, mainly Theme developers, that ignore that we don't dequeue the bundled jQuery version and load any version from some CDN (at least, we don't do it without knowing exactly what we're doing).
Here's a rough test, the shortcode callback function has to be polished a lot.
public function plugin_setup() // hooked into plugins_loaded
{
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue' ) );
add_shortcode( 'jplayer', array( $this, 'shortcode' ) );
}
public function enqueue()
{
wp_register_script(
'sj-jplayer',
$this->plugin_url . 'js/jquery.jplayer.min.js',
array( 'jquery' ), // <------- Dependencies
false,
true
);
wp_register_style( 'sj-skin', $this->plugin_url . 'skin/blue.monday/jplayer.blue.monday.css' );
wp_enqueue_script( 'sj-jplayer' );
wp_enqueue_style( 'sj-skin' );
}
public function shortcode( $atts, $content )
{
ob_start();
require_once('html-shortcode.php');
$var = ob_get_clean();
return $var;
}
The file html-shortcode is basically this demo code adapted like:
<?php
/*
* Prints the shortcode
*/
?>
<script type="text/javascript">
jQuery(document).ready(function($) // <------ WP noConflict
{
$("#jquery_jplayer_1").jPlayer({});
});
</script>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
I tested this jPlayer shortcode inside another that does a jScrollPane, and it worked on the iPad.
Related
I am setting up a new Wordpress plugin with a custom metabox. This box contains sets of fields that I store in an array. I want the user to be able to add a new set of fields by clicking a button on the admin-page.
I read different posts on how to accomplish this but I havent succeeded yet. For testing purposes I created a real simple setup in the metabox to change a text of a element. This is also not working so I think it is a problem with loading the scripts correctly.
So what I did so far:
- add action through admin_enqueue_scripts
- register the script using wp_register_script
- enqueue script using wp_enqueue_script
- setup the js file (choose for testpurpose to store it in same dir as the plugin
function amai_woordjes_scripts() {
wp_register_script( 'amai_woordjes_updaten', 'amai_woordjes_updaten.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'amai_woordjes_updaten' );
}
add_action( 'admin_enqueue_scripts', 'amai_woordjes_scripts' );
//HTML code I use in the function which is called by add_meta_box
echo '<p id="demo">Current text</p>';
echo '<button id="woordje_toevoegen" onclick="woordjesToevoegen();">Woorden toevoegen</button>';
//amai_woordjes_updaten.js
<script>
function woordjesToevoegen() {
document.getElementById("demo").innerHTML = "New texxt";
}
</script>
You need use function wp_enque_script(). You use incorrect script path.
plugin_dir_path( __DIR__ ) . path/to/script.js
First You have to set the file path
Create js folder in your plugin root directory and move the 'amai_woordjes_updaten.js' file in js folder
function amai_woordjes_scripts() {
wp_register_script( 'amai_woordjes_updaten', plugin_dir_url( __FILE__ ).'js/amai_woordjes_updaten.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'amai_woordjes_updaten' );
}
add_action( 'admin_enqueue_scripts', 'amai_woordjes_scripts' );
I am learning to develop WordPress and I build my theme from the scratch. I read that the best way to include Google Fonts into the theme is to use the WebFont Loader. This method help improve score in PageSpeed test.
I try to add WebFont Loader from function.php and wfloader.js file. Unfortunately, the font doesn't load into my theme. What am I doing wrong? I can't figure out myself.
So here is my code in the function.php file:
add_action( 'wp_enqueue_scripts', 'wpb_scripts_styles' );
function wpb_scripts_styles() {
wp_register_script(
'web-font-loader',
'//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js',
array( '' ),
''
);
wp_enqueue_script(
'fonts-to-load',
esc_url( get_stylesheet_directory_uri() ) . '/assets/js/wfloader.js',
array( 'web-font-loader' ),
''
);
}
Here is from wfloader.js
function webfontload() {
WebFont.load({
google: {
families: [
'Playfair+Display:400,700,900&subset=latin-ext'
]
}
});
}
Thanks for any advice!
I fixed my code and it works :)
function custom_scripts_styles() {
wp_register_script(
'web-font-loader',
'//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js',
array(),
null );
wp_enqueue_script(
'fonts-to-load',
get_template_directory_uri() . '/assets/js/wfloader.js',
array( 'web-font-loader' ),
null,
true );
}
Just 2 remarks not concering the main issue. I would not start your functions with wpb_ because a famous page builder plugin does it, you could have conflicts if you active that plugin with your theme. You don't need esc_url for the function get_stylesheet_directory_uri(), you can trust the result of this WordPress function.
Have you checked if the script //ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js is really loaded? I mean Inspect elements and search //ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js in the HTML. If so, check if in the console you have errors, I mean F12 -> console
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.
Recently I found the following javascript from another thread on this forum;
var $content=$('div.leg_ol');
var $links=$('.leg_test').hover(function(){
var index= $links.index(this);
$content.stop(true,true).hide().eq(index).fadeIn();
},function(){
$content.stop(true,true).hide().eq(index);
});
(I would link to the OP, but unfortunately have lost the page).
JSFIDDLE: https://jsfiddle.net/mfyctwvs/1/
The code does exactly what I want to do - in theory, now I am pretty much completely new to js, so this is a very tricky area for me - please bear with me on this.
When I post the code in functions.php it causes my whole site to stop working, I assume because it cannot read it or there is some conflict?
So my first thought, looking at jsfiddle was the js version and that it is specified as no wrap in . If I change either of these the code does not work.. ..so 1. Am I making a newb mistake trying to include incompatible js in my functions.php (probably yes?) & 2. is there a straightforward change I can make to get this working in my functions.php?
I have been searching on this for hours & am sure that I could get this working with some adjustments?
FYI; Functions.php
<?php// Set path to WooFramework and theme specific functions
$functions_path = get_template_directory() . '/functions/';
$includes_path = get_template_directory() . '/includes/';
// Don't load alt stylesheet from WooFramework
if ( ! function_exists( 'woo_output_alt_stylesheet' ) ) {
function woo_output_alt_stylesheet () {}
}
// WooFramework
require_once ( $functions_path . 'admin-init.php' ); // Framework Init
if ( get_option( 'woo_woo_tumblog_switch' ) == 'true' ) {
//Enable Tumblog Functionality and theme is upgraded
update_option( 'woo_needs_tumblog_upgrade', 'false' );
update_option( 'tumblog_woo_tumblog_upgraded', 'true' );
update_option( 'tumblog_woo_tumblog_upgraded_posts_done', 'true' );
require_once ( $functions_path . 'admin-tumblog-quickpress.php' ); // Tumblog Dashboard Functionality
}
/*-----------------------------------------------------------------------------------*/
$includes = array(
'includes/theme-options.php', // Options panel settings and custom settings
'includes/theme-functions.php', // Custom theme functions
'includes/theme-actions.php', // Theme actions & user defined hooks
'includes/theme-comments.php', // Custom comments/pingback loop
'includes/theme-js.php', // Load JavaScript via wp_enqueue_script
'includes/theme-plugin-integrations.php', // Plugin integrations
'includes/sidebar-init.php', // Initialize widgetized areas
'includes/theme-widgets.php', // Theme widgets
'includes/theme-advanced.php', // Advanced Theme Functions
'includes/theme-shortcodes.php', // Custom theme shortcodes
'includes/woo-layout/woo-layout.php', // Layout Manager
'includes/woo-meta/woo-meta.php', // Meta Manager
'includes/woo-hooks/woo-hooks.php' // Hook Manager
);
// Allow child themes/plugins to add widgets to be loaded.
$includes = apply_filters( 'woo_includes', $includes );
foreach ( $includes as $i ) {
locate_template( $i, true );
}
// Load WooCommerce functions, if applicable.
if ( is_woocommerce_activated() ) {
locate_template( 'includes/theme-woocommerce.php', true );
}
/*-----------------------------------------------------------------------------------*/
/* You can add custom functions below */
/*-----------------------------------------------------------------------------------*/
add_action( 'init', 'woo_custom_move_navigation', 10 );
function woo_custom_move_navigation () {
// Remove main nav from the woo_header_after hook
remove_action( 'woo_header_after','woo_nav', 10 );
// Add main nav to the woo_header_inside hook
add_action( 'woo_header_inside','woo_nav', 10 );
} // End woo_custom_move_navigation()
/* Testing stuff for mobile */
function woo_load_responsive_meta_tags () {
$html = '';
$html .= "\n" . '<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->' . "\n";
$html .= '<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />' . "\n";
echo $html;
} // End woo_load_responsive_meta_tags()
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script(
'user-scripts',
get_template_directory_uri() . '/functions/user-scripts.js',
array('jquery') // any script dependancies. i.e. jquery
);
});
?>
In wordpress you in ject your javascript files into your theme using the wordpress api/hooks. the method you want is wp_enqueue_script. Here are the docs
It's used like this:
add_action('wp_enqueue_scripts', 'addScript');
function addScript() {
wp_enqueue_script(
'script-name',
get_template_directory_uri() . '/path-to-your-script.js',
array('jquery') // any script dependancies. i.e. jquery
);
}
Depending on the version of php you have, you can inline the function:
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script(
'script-name',
get_template_directory_uri() . '/path-to-your-script.js',
array('jquery') // any script dependancies. i.e. jquery
);
});
From the script provided by #atmd the following code worked.
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script(
'script-name',
get_template_directory_uri() . '/path-to-your-script.js',
array('jquery') // any script dependancies. i.e. jquery
);
});
A precondition required was that the script was located in the /functions/ folder of the theme used. The original code posted works perfectly on the site.
Within a wp plugin, I see the following code on the php file of the plugin.
public function register_plugin_scripts() {
/*** Styles ***/
$cyclone_css = add_query_arg(array('cyclone_templates_css' => 1), home_url( '/' ));
wp_register_style( 'cyclone-slider-plugin-styles', $cyclone_css );//contains our combined css from ALL templates
wp_enqueue_style( 'cyclone-slider-plugin-styles' );
/*** Scripts ***/
wp_register_script( 'cycle', $this->plugin_url.'js/jquery.cycle.all.min.js', array('jquery') );
wp_enqueue_script( 'cycle' );
}
Now, I want to alter some of it. Right now, this plugin is used at every single page. Implying both the 1) combined css 2) jquery.cycle.all.min.js is requested each page. However, I only use this plugin for the main page. So how do I fix it, making the css file + js to only be loaded for the main page, nothing else.
Next, I do not want to combine css from all templates. Instead, it should be pinpointed to a selected location. How to do that?. Thanks in advance. Plugin is Cyclone Slider 2.
If you were happy to edit the plugin code directly, it would be a simple matter of making the wp_enqueue_script() calls conditional on being on the home page.
public function register_plugin_scripts() {
/*** Styles ***/
$cyclone_css = add_query_arg(array('cyclone_templates_css' => 1), home_url( '/' ));
wp_register_style( 'cyclone-slider-plugin-styles', $cyclone_css );//contains our combined css from ALL templates
/*** Scripts ***/
wp_register_script( 'cycle', $this->plugin_url.'js/jquery.cycle.all.min.js', array('jquery') );
if (is_front_page()){
wp_enqueue_style( 'cyclone-slider-plugin-styles' );
wp_enqueue_script( 'cycle' );
}
}
However, you almost certainly don't want to edit the plugin, because your changes will get overwritten when the plugin is updated.
I would therefore use wp_dequeue_script and wp_dequeue_style to get stop the scripts loading where you don't want them to.
Per Wordpress Function reference, you could add this code in your theme function.php file or similar:
/**
* Dequeue a queued script.
*
* Hooked to the wp_print_scripts action, with a late priority (100),
* so that it is after the script was enqueued.
*/
function wpcyclone_dequeue_script() {
wp_dequeue_script( 'cycle' );
wp_dequeue_script( 'cyclone-slider-plugin-styles' );
}
if (!is_front_page()){
add_action( 'wp_print_scripts', 'wpcyclone_dequeue_script', 100 );
}