Archived topic
Add External CSS File
9 replies · Started by Maria on May 1, 2019
Two parts to my question:
1. How do I link an external css file? I'm trying to style an OpenTable Reservation Widget. I've added this to wp_head but styles aren't being applied: <link href="https://components.otstatic.com/components/reservation-widget-standard/3.2.3/assets/css/style.css" rel="stylesheet" type="text/css" />
Do I need to enqueue as well? I'm not sure how to do that.
2. How can I display the widget at a certain position on the page, like between two paragraphs? I added:
<script type='text/javascript' src='//www.opentable.com.au/widget/reservation/loader?rid=59288&type=standard&theme=wide&iframe=false&overlay=false&domain=comau&lang=en-AU'></script> to the before_main_content hook, which works fine, but I'd like to be able to position it where I want it.
Hi there,
1. You can enqueue styles using a function ( don't need the link ):
<?php
function add_external_styles() {
wp_enqueue_style( 'style', 'full_url_to_style_sheet', 'all');
}
add_action( 'wp_enqueue_scripts', 'add_external_styles' );
?>2. A plugin like this is the easiest way:
Thank you for the plugin. Enqueuing didn't work for me. This is my exact code per your instructions:
function add_external_styles() {
wp_enqueue_style( ‘style’, 'https://components.otstatic.com/components/reservation-widget-standard/3.2.3/assets/css/style.css', ‘all’);
}
add_action( ‘wp_enqueue_scripts’, ‘add_external_styles’ );
?>
Is there anything else I should be doing? I've Googled and seen some comments about adding the css file to my theme. If not, I'll keep plugging away at it.
Try this instead:
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style( 'res-widget-standard', 'https://components.otstatic.com/components/reservation-widget-standard/3.2.3/assets/css/style.css' );
} );Let me know :)
Should my code now be:
function add_external_styles() {
wp_enqueue_style( 'style', 'https://components.otstatic.com/components/reservation-widget-standard/3.2.3/assets/css/style.css', 'all');
}
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style( 'res-widget-standard', 'https://components.otstatic.com/components/reservation-widget-standard/3.2.3/assets/css/style.css' );
} );
or just:
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style( 'res-widget-standard', 'https://components.otstatic.com/components/reservation-widget-standard/3.2.3/assets/css/style.css' );
} );
Try only my code :)
Thanks so much for your help, Tom. I truly appreciate it. I must be doing something else wrong. I'll keep plugging away.
How are you adding the function? That's a pretty standard function in WP - it should work without any issues.
I knew it was something I was doing wrong. When you asked how I was adding the function, I realized something was wrong with my functions.php file. It works perfectly now. Thank you, thank you!
No problem :)
