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;
}
Related
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
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);
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/
I have a shop website with woocommerce 3.0.3 and on product detail page using default woocommerce templates, there is an issue with lightbox about clicking on the main image or gallery images. The site redirects me to a page with the image link instead of showing the lightbox.
You just need to add these lines in your function.php file and your lightbox (photoswipe) will work absolutely fine.
if(class_exists('WooCommerce')){
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}
Hope this helps
I found the solution. In latest version woocommerce-3.0.3, lightbox is replaced with photosswipe. Photoswipe is disabled in my theme. It works only if the theme add support like add_theme_support('wc-product-gallery-lightbox') then it works like a charm
The problem is not only the missing add_theme_support('wc-product-gallery-lightbox')
If the DOM structure is not the same as the updated files: product-thumbnail.php and product-image.php - then the add_theme_support function won't help you.
Copy these files from WooCommerce plugin to your theme, and it should work.
Hi I'm trying to get WP Featherlight setup as the default lightbox, right now Visual Composer is using prettyPhoto. So I need to disable it, so that WP Featherlight will overwrite it.
I asked wpbakery and I got this response.
Hello, you can actually overwrite prettyphoto by adding prettyPhoto() in your functions.php and call another lightbox.
And from the plug-in author I got this:
Once prettyPhoto has been disabled, you shouldn't need to do anything
else to lightbox images on the site.
So it's pretty clear what I need to do. Disable prettyPhoto. But I don't know how to do that. Can I add a simple line to my child theme's functions.php? Or?
Any help would really be appreciated.
Thanks.
Place the following code in your theme's function file.
function remove_vc_prettyphoto(){
wp_dequeue_script( 'prettyphoto' );
wp_deregister_script( 'prettyphoto' );
wp_dequeue_style( 'prettyphoto' );
wp_deregister_style( 'prettyphoto' );
}
add_action( 'wp_enqueue_scripts', 'remove_vc_prettyphoto', 9999 );
I have tested this on my installation and it works flawlessly.
What it does is dequeues and deregisters the javascript and stylesheets that Visual Composer enqueues and registers throughout the plugin's PHP files for the various template elements and shortcodes that use the prettyPhoto lightbox.
The '9999' parameter enforces that the dequeuing/deregistering happens well after any enqueuing or registering took place earlier on in the loading of the plugin. Any number will do, but the higher the number the better.
You have to enqueue a custom javascript in your child theme where you override the following function:
function vc_prettyPhoto() {
}
in this way you disable prettyPhoto script initialization made by Visual Composer.
You can use code bellow to disable that javascript lib. Put that into your functions.php of theme
wp_dequeue_script( 'prettyphoto' );
wp_dequeue_style( 'prettyphoto' );
Also other page buider you can use is King Composer, which is faster VC
https://wordpress.org/plugins/kingcomposer/
Not sure if you solved the problem, but I have a solution (not very elegant, but it works).
I did buy ePix theme for a photographer and noticed that Masonry Media Grid from Visual Composer isn't fully responsive. So my soulution was to edit 3 files from wp-content/assets/js/dist. Those files are:
vc_grid.min.js
page_editable.min.js
js_composer_front.min.js
Just remove window.vc_prettyPhoto() or vc_prettyPhoto() from wherever they appear.
After that I installed Lightbox by dFactor, choose swipebox and used as selector prettyPhoto. Also I did force lightbox on link images. Now the lightbox is fully-responsive.
Hopefully this will help somebody :)
You can disable Pretty Photo. Use the below code in theme's function file, thats it.
function remove_scripts(){
wp_dequeue_script('prettyphoto' );
wp_deregister_script('prettyphoto' );
}
add_action( 'wp_enqueue_scripts', 'remove_scripts', 100 );
It will work.
I have tested on my own issue to deactivate some sliders from the Visual Composer and it works. An example how to deactivate the whole Flexslider, Nivoslider and Owl Carousel sliders in the Visual Composer plugin. Add this code into theme functions.php file:
add_action( 'wp_enqueue_scripts', 'deregister_vc_modules', 99 );
function deregister_vc_modules() {
wp_deregister_style( 'flexslider' );
wp_deregister_script( 'flexslider' );
wp_deregister_style( 'nivo-slider-css' );
wp_deregister_style( 'nivo-slider-theme' );
wp_deregister_script( 'nivo-slider' );
wp_deregister_style( 'owl-carousel' );
wp_deregister_script( 'owl-carousel' );
}