[Resolved] Add External CSS File

[Maria]

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&#8221; 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.

[David]

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:

https://wordpress.org/plugins/ad-inserter/

[Maria]

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&#8217;, ‘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.

[Tom]

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 🙂

[Maria]

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&#8217;, ‘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&#8217; );
} );

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&#8217; );
} );

[Tom]

Try only my code 🙂

[Maria]

Thanks so much for your help, Tom. I truly appreciate it. I must be doing something else wrong. I’ll keep plugging away.

[Tom]

How are you adding the function? That’s a pretty standard function in WP – it should work without any issues.

[Maria]

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!

[Tom]

No problem 🙂

[Author]

Posts