Wordpress media library not working - mediaelementplayer is not a function - wordpress

Uncaught TypeError: b(...).not(...).filter(...).mediaelementplayer is not a function
I am getting this issue after wordpress latest update 4.9. I am using this library in my plugin to allow users to upload images using the wp media upload. It was working fine, but after the latest update it is returning the error as I mentioned above.

By adding the following code in functions.php file, error should be resolved.
add_action('wp_enqueue_scripts', 'my_register_javascript', 100);
function my_register_javascript() {
wp_register_script('mediaelement', plugins_url('wp-mediaelement.min.js', __FILE__), array('jquery'), '4.8.2', true);
wp_enqueue_script('mediaelement');
}

Does it appear on post/page edit?
'Add Media' button is not working?
If you answer 'yes' on both questions take a look if jQuery is not loaded twice, if so, load one only or implement JQuery.noConflict().

Related

Wordpress functions.php file not working ...Undefined function 'wp_enqueue_style'

I don't know why I'm having this issue. I'm new to wordpress and I am following along with a 'freecodecamp' tutorial(youtube) on how to make a custom wordpress theme from scratch.
In the video, the instructor is enqueueing his style sheet using the functions.php file. Here is the exact code he is using...
Click here for code image
<?php
function followandrew_register_style() {
wp_enqueue_style('followandrew-bootstrap', get_template_directory_uri() . "/style.css", array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'followandrew_register_style' );
?>
Click here for error image
Visual Studios is prompting this error as soon as I write out the commands...
"Undefined function 'wp_enqueue_style', and undefined function 'add_action'.
I am including "wp_head()" inside my front-page.php to output the stylesheet.
Everything else is working fine. I am able to see my basic html setup when posting in inside the "front-page.php". My wordpress is connected correctly and I have access to the backend admin.
If I hardcode the path to the style sheet inside of front-page.php, it works fine.
So basically, any functions or commands I try to run inside the functions.php file are coming back undefined!
Nevermind, it looks like everything is working fine. I just had the wrong source path for the custom css link.
VS code is still displaying the undefined error but everything is working.
Best 5 hours Ive ever wasted :)

TypeError: Cannot read property 'MediaFrame' of undefined

I am randomly getting this error when I edit a page, for example at /wp-admin/post.php?post=5323&action=edit
I don't think I need to include any code because this doesn't seem to reference any plugins. All of the problems are in /wp-includes/js
TypeError: Cannot read property 'MediaFrame' of undefined
at Object.wp.media (/wp-includes/js/media-models.min.js?ver=5.4.1:2:1052)
at new t (/wp-includes/js/dist/media-utils.min.js?ver=591443ff969b73a6db3bc4d8cc57722d:2:5719)
at Ag (/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.9.0:63:107)
at Vg (/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.9.0:89:442)
at ph (/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.9.0:217:70)
at lh (/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.9.0:126:409)
at O (/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.9.0:121:71)
at ze (/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.9.0:118:14)
at /wp-includes/js/dist/vendor/react-dom.min.js?ver=16.9.0:53:49
at unstable_runWithPriority (/wp-includes/js/dist/vendor/react.min.js?ver=16.9.0:26:340)
WordPress version 5.4.1
The problem can be caused by a plugin, so it would be worth a try deactivating all of them and using a wordpress theme (like twentytwenty) to check if the problem is still occurs.
You should make sure that you have a footer.php in your theme, because the wp_enqueue_media() calls scripts there and maybe it cannot be loaded.
The TypeError sounds like not all the media scripts could be loaded on admin pages. You can try adding this to the end of your functions.php of your theme:
add_action('admin_enqueue_scripts', function()
{
wp_enqueue_media();
});
An alternative way to write is the following, maybe it is a bit more readable. The code does exactly the same:
function load_my_wp_media() {
wp_enqueue_media();
}
add_action( 'admin_enqueue_scripts', 'load_my_wp_media' );
This hook enqueue all media scripts, so 'MediaFrame' should no longer be undefined.

Calling wp_enqueue_media() in a custom theme widget on WordPress 3.5.x cause js error

I am writing a custom widget for my own WordPress theme.
From WordPress 3.5 there is a new Media Uploader instead of the old ThickBox.
My widget used to work fine on WordPress versions older than 3.5, but now the new media uploader prevent the old working behavior.
I added a check in the costructor for the presence of wp_enqueue_media function:
if( function_exists( 'wp_enqueue_media' ) ) {
wp_enqueue_media();
}
but when this part of cose is executed javascript throw an error in the console stopping Js engine:
Uncaught TypeError: Cannot read property 'id' of undefined load-scripts.php:69
I removed all the widget code and reduced it to bare bones... the error is caused by wp_enqueue_media() calls, but I cannot get my head around why and how to fix it.
I also read Wordpress 3.5 custom media upload for your theme options, but there is no mention to this issue
Can anyone point me in the right direction? Is there any documentation available for the the WordPress 3.5 Media Uploader?
It's too late for you now, but might be helpful for other people. I managed to make it work using
add_action( 'admin_enqueue_scripts', 'wp_enqueue_media' );
Hope it helps!
The problem you are experiencing is because you probably put your custom jquery in the header and you didn't registered wordpress jquery. If multiple jquery are defined you will get that error.
My sugestion is you should either remove your jquery script or remove the one from wordpress
function remove_jquery() {
wp_deregister_script('jquery');
//wp_register_script('jquery', ("//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"), false);
}
if(!is_admin()){add_action('init', 'remove_jquery');}
I suggest you use the jquery wordpress provides you, if not, the proper way to enqueue it is to deregister the default one an register your jquery. Just remove the comments from the remove_jquery function.
Also, the above code should go in functions.php
Cheers.
From codex [1], the function wp_enqueue_media( $args ) should be called from 'admin_equeue_scripts' action hook. or later.
Example:
function enqueue_media() {
if( function_exists( 'wp_enqueue_media' ) ) {
wp_enqueue_media();
}
}
add_action('admin_enqueue_scripts', 'enqueue_media');
Hope it helped.
[1]. https://codex.wordpress.org/Function_Reference/wp_enqueue_media
To debug, you need to get the non-minified versions of the js sent to the browser. See the docs:
SCRIPT_DEBUG
SCRIPT_DEBUG is a related constant that will force WordPress to use the "dev" versions of core CSS and Javascript files rather than the minified versions that are normally loaded. This is useful when you are testing modifications to any built-in .js or .css files. Default is false.
define('SCRIPT_DEBUG', true);

enque jquery scripts in wordpress plugin

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.

Loading javascript into wordpress wp_enqueue_script() problem

I am trying to get my custom javascript (jQuery) to load correctly in Wordpress.
I know you have to use wp_enqueue_script() to do this correctly. However the problem I have is that the result is not my script, but in the place I should have javascript I have the code for a 404 page !
I've tried two ways of enqueueing the script :
wp_enqueue_script('sitescript', get_bloginfo('template_directory').'/javascript/sitescript.js', array('jquery'),1);
just above wp_head()
and :function my_script_load() {
wp_enqueue_script('sitescript', get_bloginfo('template_directory').'/javascript/sitescript.js', array('jquery'),null);
}
add_action('init', 'my_script_load');
in functions.php
both methods have the same effect. When I inspect the HTML in firebug I find the script is corredtly referenced :
<script src="http://localhost/wordpress/wp-content/themes/doric2011/javascript/sitescript.js" type="text/javascript">
however when I inspect the script itself I find the following (an extract) :`
Page not found | Nick Kai Nielsen
and so on... It is a HTML output for a 404 page, but occupying a space where javascript should be...
Needless to say the script does not work.
I have only had this problem since updating to 3.1 and it does the same thing if I try loading highslide.js and highslide.config.js (professionally written scripts). The script I wish to load is already working on my site and I want to go on using it in the new theme I am developing.
has anyone any idea of what is happening ? And, of course, what should I do about it ?
This is a local installation - I'm not risking breaking my site until this is sorted out.
Try:
add_action('init', 'my_script_load');
function my_script_load() {
wp_register_script('sitescript', get_bloginfo('template_directory').'/javascript/sitescript.js', array('jquery'), true);
wp_enqueue_script('sitescript');
}
Assuming your javascript file is in the proper location (and the URL isn't pointing to a spot where the JS file isn't...) try this:
function add_my_scripts() {
$templatedir = get_bloginfo('template_directory');
if(!is_admin()) {
wp_register_script( 'sitescript', $templatedir . '/javascript/sitescript.js');
wp_enqueue_script( 'sitescript' );
}
}
add_action( 'init', 'add_my_scripts');

Resources