Magnific-popup enqueue stylesheet not loading properly in wordpress

Question

I have implemented the magnific-popup and is nearly working, however the stylesheet is not loading properly.

When I click the image the javascript is working and has no errors in the console, but the magnific-popup stylesheet seems to be outputting like this in the inspector:

Does the output look normal in the image below?

my directory

Does my enqueue for the magnific-popup look fine?

function add_theme_scripts()
{
    wp_enqueue_style('raleway-font', 'https://fonts.googleapis.com/css?family=Raleway:200,200i,400,400i,600,600i');
    wp_enqueue_style('syne-font', 'https://fonts.googleapis.com/css2?family=Syne:wght@400;500');
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
    wp_enqueue_style('magnific-popup-style', get_stylesheet_uri() . '/assets/css/magnific-popup.css', 'all');
    wp_enqueue_style('style', get_stylesheet_uri(), array(), false, 'all');

    wp_enqueue_script('jquery-3.5.1', get_template_directory_uri() . '/assets/js/jquery-3.5.1.min.js', array('jquery'), false, true); /*when uploaded to server, wordpress already has jquery*/
    wp_enqueue_script('magnific', get_template_directory_uri() . '/assets/js/magnific-popup/jquery.magnific-popup.min.js', 'jquery', false, true);
    wp_enqueue_script('main', get_template_directory_uri() . '/assets/js/main.js', 'jquery', false, true);
}
add_action('wp_enqueue_scripts', 'add_theme_scripts');

main.js

// magnific popup
jQuery('.gallery').magnificPopup({
    delegate: 'a',
    type: 'image',
    gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0, 3], // Will preload 0 - before current, and 1 after the current image
        tPrev: 'Previous', // title for left button
        tNext: 'Next', // title for right button
    },
    removalDelay: 300,
    closeOnContentClick: true,
    midClick: true,
    mainClass: 'mfp-fade',
    callbacks: {
        buildControls: function () {
            // re-appends controls inside the main container
            this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
        }
    }
});

why don,t you simply call the stylesheet in your header or body tag? — avia, Oct 18 '20 at 13:46
it looks fine and also the initialize snippet looks fine no typos. did you double check filename and location ? :) — avia, Oct 18 '20 at 13:53
Yes, it all seems correct, however in the inspector, the image I have attached, it injects style.css between the themename celia/ and /assets pathfile url... when I check it in a new tab it says 'not found', but if I remove the 'style.css', it displays the css correctly in raw format, so im stumped :/ — Krys, Oct 18 '20 at 13:57

avia · Accepted Answer · 2020-10-18T15:03:07.357

1

Try using get_stylesheet_directory_uri()

Documentation says "(string) URI to current theme's stylesheet directory."

https://developer.wordpress.org/reference/functions/get_stylesheet_directory_uri/

edited Oct 18 '20 at 15:03

answered Oct 18 '20 at 14:03

avia

1,527
7
19

OMG, that didn't work either... it outputted this in the inspector: http://localhost/celiaC:wamp64wwwcelia/wp-content/themes/celiaassets/css/magnific-popup.css?ver=5.5.1 The pathfile is all bonkers! – Krys Oct 18 '20 at 14:15
OMFG! I finally tried get_stylesheet_directory_uri() and that worked, why oh why?? I thought get_stylesheet_uri() would be enough, since it works for my theme style.css – Krys Oct 18 '20 at 14:19
LaurentC you did point me in the right direction though, thanks for that – Krys Oct 18 '20 at 14:23
I was looking at the Wp documentation and that seemed like a reasonable try but I'm glad you tried the other possibilities too haha. not a WP pro but glad i could help :) I'll update my answer for future visitors with same Q. – avia Oct 18 '20 at 15:02
Another pair of eyes/brains always helps! No problem ;) – Krys Oct 18 '20 at 15:15

Magnific-popup enqueue stylesheet not loading properly in wordpress

1 Answers1