could it be that your theme css is loading first before lwa or your new login-with-ajax.css is not loading? did you included it in your theme (e.g. using wp_head() or wp_footer() )?
Thread Starter
Hassan
(@hassanhamm)
I looked at the source code of the rendered page, and looks like my custom login-with-ajax.css file is not loading at all. The plugin just loads the default widget.css file from the plugin’s folder.
Here’s my current situation:
- I copied the file
widget.css from /wp-content/plugins/login-with-ajax/widget/ and pasted it inside /wp-content/themes/my-theme/plugins/login-with-ajax/ and then renamed it to login-with-ajax.css
- I copied the file
widget_out.php from /wp-content/plugins/login-with-ajax/widget/divs-only/ and pasted it inside /wp-content/themes/my-theme/plugins/login-with-ajax/
- I used the template tag
<?php login_with_ajax(); ?> inside my theme’s header.php file to output the widget
- I selected “divs-only” as the default template from the plugin’s admin screen in the backend
Am I missing something here? Is the above configuration correct?
I can explicitly call the login-with-ajax.css file using wp_enqueue_style() function, but that would result in two CSS files being loaded: my custom login-with-ajax.css from my theme’s folder, and the default widget.css from the plugin’s folder– which is not ideal of course.
Thread Starter
Hassan
(@hassanhamm)
…by the way, I am using custom names for my wp-content and plugins folders, could that be somehow related?
I believe it shouldn’t, assuming that this plugin is following WordPress standards for determining the plugin and content directories.
sorry, it’s a bug (the docs are wrong too, it should be widget.css). will fix asap
Thread Starter
Hassan
(@hassanhamm)
Ah, good to know.
So, when shall we expect the fix?
Thread Starter
Hassan
(@hassanhamm)
hate to bump, but any news on this?
if you still need the custom css to work – change at line 101 in login-with-ajax.php
//Enqueue scripts - Only one script enqueued here.... theme JS takes priority, then default JS
if( !is_admin() ) {
$js_url = defined('WP_DEBUG') && WP_DEBUG ? 'login-with-ajax.source.js':'login-with-ajax.js';
wp_enqueue_script( "login-with-ajax", self::locate_template_url($js_url), array( 'jquery' ) );
wp_enqueue_style( "login-with-ajax", self::locate_template_url('widget.css') );
}
to
//Enqueue scripts - Only one script enqueued here.... theme JS takes priority, then default JS
if( !is_admin() ) {
$js_url = defined('WP_DEBUG') && WP_DEBUG ? 'login-with-ajax.source.js':'login-with-ajax.js';
wp_enqueue_script( "login-with-ajax", self::locate_template_url($js_url), array( 'jquery' ) );
//Enqueue stylesheets - Only one style enqueued here.... theme CSS takes priority, then default CSS
//The concept here is one stylesheet is loaded which will work for multiple templates.
if( file_exists(get_stylesheet_directory().'/plugins/login-with-ajax/widget.css') ){ //Child Theme (or just theme)
wp_enqueue_style( "login-with-ajax", get_stylesheet_directory_uri().'/plugins/login-with-ajax/widget.css' );
}else if( file_exists(get_template_directory().'/plugins/login-with-ajax/widget.css') ){ //Parent Theme (if parent exists)
wp_enqueue_style( "login-with-ajax", get_template_directory_uri().'/plugins/login-with-ajax/widget.css' );
}else{ //Default file in plugin folder
wp_enqueue_style( "login-with-ajax", $plugin_url."/widget/widget.css" );
}
}
I just borrowed it from a previous version – you could do the same thing with the JS but I didn’t need the JS
Thread Starter
Hassan
(@hassanhamm)
Thanks, pmahan. This does work now 🙂
