How to activate WpMediaElement in WordPress - wordpress

I would like to use the plug-in WPMediaElement for styling audio player in Word Press. As I understand it should be default installed in WordPress (I am using version 5.2.15) and it is also placed in the folder wp-includes/js/mediaelement. But it is not included when the website are showing in a browser :-|
What do I have to do for activating it?
Thanks in advance !

Make sure that medialement is loaded on all the pages.
Insert this in your child-theme functions.php:
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style( 'wp-mediaelement' );
}, 100);

Related

How can I create a WordPress Plugin with custom CSS?

I want to create a WordPress Plugin where I want to add some css, and upon activation, those css will be in effect and be viewing in the website. Upon deactivation, the css will also be out of effect.
Any how I can do that? Or any documentation I can take help from?
You can follow Plugin Handbook for creating a plugin https://developer.wordpress.org/plugins/.
create a CSS file in plugin directory then upon plugin activation hook you can enqueue the CSS file using action 'wp_enqueue_style'.
You can add this to your main file to load your css file:
function add_my_css() {
$plugin_url = plugin_dir_url( __FILE__ );
wp_enqueue_style( 'style', $plugin_url . "/css/plugin-style.css");
}
add_action( 'wp_enqueue_scripts', 'add_my_css' );
Then create your plugin-style.css file and write your css.
Hope this helps

Problem with the media library in wordpress

I am building my own wordpress theme and I have such a problem. Media library doesn't work, I can't add any image to the page. I am using the latest version of wordpress.
Files available on github https://github.com/krysba/themes-wordpress
When I turn on the standard wordpress theme, the library works :(
I am asking for help in solving this problem.
If you have not tried, the first thing that i'll tring it's enable debug mode on Wordpress from wp-config.php and check if some alerts or errors can help.
define('WP_DEBUG', true);
I think that you must try to comment all function.php and debugging it row by row.
At the first check i've found a wrong use of the function add_theme_support and in the enqeueing files.
For example the right way to user add_theme_support is on the after_setup_theme action:
function my_setup_theme(){
add_theme_support('post-formats',array('gallery','link','image','quote','status','video','audio'));
}
add_action( 'after_setup_theme', 'my_setup_theme' );
Also the right way to enqueing scripts or styles is that:
function add_theme_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
See it on this page: https://developer.wordpress.org/themes/basics/including-css-javascript/

WP finally live: How to edit style.css on the fly and live (Theme Editor?) and immediately see changes + caching

I developed my WP WooCommerce shop locally with XAMPP and finally got around to upload my site.
1) How do you make edits to your CSS when the site is live and online?
Do you use Appearance > Theme Editor to make changes to your style.css file that is saved in your child theme or is there a plugin that is "better" than the default one?
Is there a shortcut for commenting lines out?
Or do you have an identical version locally that is synced to the uploaded version and do the edits locallly and upload the final edited style.css file?
I'm not sure what the best workflow is.
2) I find myself making changes and nothing happens on the live site. Do I have to clear the cache and than login again to get into my WP dashboard? Seems very tedious... I searched the forum and found that you can do something with this line
wp_enqueue_style( '_s-style', get_stylesheet_uri(), array(), time() );
can someone elaborate how and where to use it? does it go into the functions file?
Use this line your functions.php
function yourthemename_style_nscripts(){
wp_enqueue_style( '_s-style', get_stylesheet_uri(), array(), time() );
}
add_action('wp_enqueue_scripts', 'yourthemename_style_nscripts');
otherwise,
open your functions.php then find your yourthemename_style_nscripts function then paste it.

How To Use Font Awesome In AMP WordPress Template

I have a WordPress website and use the "AMP for WordPress" plugin.
In the article from my website I use the icon from Fontawesome. If I open the site using the desktop, fontawesome works fine, but when I try to use my phone and display it in the AMP, the fontawesome icon does not show.
Can someone help me?
Thanks in advance.
I believe if the integration with the font-awesome fonts is done correctly, the plugin which you have installed should not conflict with this.
There's a handful of hooks (source: https://ampforwp.com/tutorials/article/hooks-in-ampforwp/) that the AMP plugin contains, specifically the one below which I'm hooking onto (amp_post_template_data). If you add something like this within your functions.php file of your theme, the plugin should know how to utilize the fonts accordingly:
add_filter( 'amp_post_template_data', function( $data ) {
$data['font_urls'] = array(
'fontawesome' => 'https://maxcdn.bootstrapcdn.com...';
);
return $data;
} );
Be sure to replace the actual URL with the font-awesome URL, or your localized file if you have one installed on your theme. Good luck! Hope this helps.
You can add custom fonts easily try this-
add_filter( 'amp_post_template_data', 'wp_amp_add_font_awesome_icons' );
function wp_amp_add_font_awesome_icons( $data )
{
$data['font_urls']['fontawesome'] = get_stylesheet_directory_uri() . '/font-awesome/css/font-awesome.min.css';
return $data;
}

wp_dequeue_style not seems to working

I'm build a wordpress theme and I've created in my style.css a custom class for the plugin: Social Count plus
The problem's that plugin use an own css called counter.css what I need to do is prevent the inclusion of this css, so I've inserted this line in my functions.php:
wp_dequeue_style( 'counter' );
unfortunately the style is even included during the site reload. What am I doing wrong?
Thanks.
Try this:
add_action('wp_enqueue_scripts', function() {
wp_dequeue_style('social-count-plus');
wp_deregister_style('social-count-plus');
});
Just leave the counter.css file in place but either empty it out or comment everything out. It can't load what's not there. Be aware though, and update to that plugin might add the contents of that file back.

Resources