I am new to wordpress and want to know best way to add css from installed and activated plugin.
I have one activated plugin called "social-media" and in that plugin i have created one css file called "social-login-style.css"
I want to include this css file and apply style to my content. How should I add css file in any page so that I can see the effects.
In Short, I want to add social-login-style.css on wp-login.php file.
Whether it is theme or plugin, css or js, any custom addition, wp_enqueue_scripts is the only acton you need for all.
https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts
function additional_custom_styles() {
/* Enqueue The Styles */
wp_enqueue_style( 'custom-login-style', plugins_url( 'social-login-style.css', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'additional_custom_styles' );
If you it to be added only on login screen then use the following condition,
if ( $GLOBALS['pagenow'] === 'wp-login.php' ) {
// We're on the login page!
}
Hope this one help :)
UPDATE
Please check login_enqueue_scripts. it is designed to add custom scripts into login page only. Works well without any login condition.
https://codex.wordpress.org/Plugin_API/Action_Reference/login_enqueue_scripts
Without saying what you want to achieve is impossible, it certainly is against how WordPress is designed to work. Plugins are supposed to be modules that add to or modify how WordPress works. The folder of a plugin should only hold files pertaining to what the plugin does and, if it's a public plugin, its contents are controlled by a versioning (SVN) system.
In short, adding a file to an existing plugin will not have any effect, regardless of whether the plugin is active or not. And you should not add files to plugins you haven't developed yourself.
To load a CSS file on the login page, one should add an action hook to login_enqueue_scripts, as instructed in Customizing Login Form page of the codex. The stylesheet itself should be placed in either a custom plugin (you could create for your use-case) or inside the current theme folder.
Related
I am a basic WordPress website developer. Due to this I have to do custom css on many client websites.
My question is that, *is it possible to place any code into WordPress CSS, Which load my custom css from any code host like GitHub instead of writing CSS on WordPress custom css. *
*Reason: after giving our code to show my work some clients just run away. *
Question clarification: i want to add custom CSS for WordPress website, but don't want to use WordPress custom CSS. I want it load like bootstraps. Mean i want to host it anywhere else and load remotely.
you can use below function by adding it in functions.php file use that remote url by replacing bootstrap url <br>
function theme_add_custom_css() {
wp_enqueue_style( 'custom-css','https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
}
add_action( 'wp_enqueue_scripts', 'theme_add_custom_css' );
I'm developing my first WordPress plugin for an internship.
I know how to put style on the admin pages by wp_enqueue_style() and admin_enqueue_scripts. I also know wp_enqueue_scripts.
I created a custom post type to store businesses and a single template page in "templates" folder, called "single-myCPT.php".
The problem is: I don't understand how to call a css file for this single page.
The URL is like : mywebsite/myCPT/company
When I use the inspector and I go on "Network", there is no css file detected.
Sorry for my English, I'm a French guy who wants to improve that language :).
You can use wp_enqueue_style() and wp_enqueue_script() on front-end (non-admin) pages as well as admin pages.
Use the wp_enqueue_scripts action for the purpose.
function plugin_name_enqueue_frontend_style() {
wp_enqueue_style(
'plugin_name_frontend',
plugin_dir_url( __FILE__ ) . 'css/frontend.css');
}
add_action( 'wp_enqueue_scripts', 'plugin_name_enqueue_frontend_style' );
But, you should probably also include your frontend css on your admin page; you may need it.
Bit is a basic question here but can someone confirm that this statement be confirmed: WordPress Pages (certain templates created within) can pull different CSS and JS?
Or - does WordPress only permit universal CSS + JS to be pulled across the entire site?
Thanks for clearing this up.
Depends on what plugin and themes you use. The WordPress/PHP functions wp_enqueue_style() and wp_enqueue_script() can be used literally by everyone (core, themes, plugins, you) to request WordPress to load styles or JavaSctript. You can combine this with WordPress functions to check whether the current page is something you want to filter for (post type, post, front-page, category archive, template, etc.). Here is an example to load a custom style if on front page :
if (is_front_page()) {
wp_enqueue_style('custom-frontpage', 'my/path/to/frontpage.css');
}
You will have to hook this piece of code to the wp_enqueue_script action so that WordPress executes it at the appropriate time. Here is an example using an anonymous function:
add_action('wp_enqueue_scripts', function() {
if (is_front_page())
wp_enqueue_style('custom-frontpage', 'my/path/to/frontpage.css');
});
You can also register your code as a "normal" function and pass the functions name to add_action() instead.
Edit: Enabling and disabling plugins is a bit more difficult, since you can never know how they implement their features without examining the source code. Here are my thoughts on this:
The plugin likely uses the above method (wp_enqueue_styles, wp_enqueue_scripts) to register it's styles and scripts. The plugin, since it assumes to be needed on all pages and posts, does this on every page without the conditional checking described earlier.
You could do one of the following to stop the plugin from doing this:
Identify the place where the plugin loads the styles and scripts and add the if-statement to only do so if the post-ID matches your desired post-ID. This method is bad since your changes are lost every time the plugin is updated.
Write a "counter plugin" (you could just add it to your theme or find a plugin that allowes you to add PHP to your page) that "dequeues" the style and script added by the plugin with inversed conditional tag
The counter-plugin approach would look as follows:
function custom_unregister_plugin() {
if (not the desired blog post) {
wp_dequeue_style('my-plugin-stylesheet-handle');
wp_dequeue_script('my-plugin-script-handle');
}
}
Make sure this function is executed after the enqueuing-code of your plugin by giving it a low priority in the same hook (999 is just an example, test it yourself):
add_action('wp_enqueue_scripts', 'custom_unregister_plugin', 999);
With wp_enqueue_style() you can add stylesheet (https://developer.wordpress.org/reference/functions/wp_enqueue_style/)
You can use it after detecting which template is used
function enqueue_custom_stylesheet() {
if(get_page_template() == 'contact.php')
wp_enqueue_style( 'contact-style', get_template_directory_uri().'/contact.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_stylesheet' );
You can use wp_enqueue_style for your CSS, wp_enqueue_script for your JS, wp_localize_script to pass variables from PHP to JS.
You can call these with hooks like:
funtion enqueue_my_stuff()
{
// your enqueue function calls
}
add_action('wp_enqueue_scripts','enqueue_my_stuff'); //front end
add_action('admin_enqueue_scripts','enqueue_my_stuff'); //admin panel
add_action('login_enqueue_scripts','enqueue_my_stuff'); //login screen
I'm trying add CSS to testimonial slider (3rd Party plugin) on my wordpress theme. But my custom CSS file loads before the plugin CSS file.
Is there a way I can make the my custom CSS load after the plugin CSS?
I don't want to make any changes to the Plugin code.
Edit:
I noticed that the plugin is using "wp_print_styles" to load it's css file.
You'll need to update your plugin code to do this the "proper way" I believe.
Since you need it to load last I would take the common path of utilizing the wp_enqueue_scripts hook/function to set a low priority for it being processed. This way you can guarantee that the HTML remains valid and that you are loading your styles and scripts after all the default ones within WordPress plugin's code:
function my_plugin_unique_style() {
$base = get_stylesheet_directory_uri();
wp_enqueue_style( 'style-my-plugin-style', $base.'/styles.css' );
}
add_action('wp_enqueue_scripts', 'my_plugin_unique_style', 11 );
Of course you will have to modify this to use your plugin's css file name but this is the basic way to do this and have valid markup. It's worth mentioning that if this still loads before another CSS file in the HEAD of the page you should bump up the number from 11 to some other higher number.
You can read more about wp_enqueue_scritps here.
A WordPress theme I am developing has an integrated custom post type called "albums" which utilizes a few custom templates (archive-albums.php, content-albums.php, etc.). What I want to do is transfer this functionality, along with the template files, into a plugin for the sake of portability.
I transferred the CPT code from the functions.php with success, but when I try to move the template files from the theme folder to the plugin folder, things fall apart. I feel like it should be simple to somehow register the templates so WordPress knows to load them.
Can my WordPress custom templates be in plugin folder or only theme folder?
Things are falling apart because when you move those files, you're violating WP's native template hierarchy. You'll need to explicitly declare the location of those files. Using the archive as an example, you could add something like this to functions.php (to tell WP to look elsewhere):
add_filter('template_include', 'include_album_template', 1);
function include_album_template($template_path) {
if(get_post_type() == 'albums') {
if(!is_single()) {
$theme_file = 'path-to-your-plugin-directory';
$template_path = $theme_file;
}
}
return $template_path;
}
Obviously you'd use your own path, and I wrote this hastily so you might want to refactor.
I have the same issue. I'm already using add_filter ('template_include', ...) problem is that I need to specify a file to return, and in this case being it,index.php. This raises an issue with the theme not running entirely as if installed via themes folder, because what I need is to have WP selecting the appropriate file to render without any conditional logic from my part. So if it is a post it will select the single.php and so on. Another problem raised with this method is that in header.php the call get_header (); ignores the local file header.php and loads the default theme installed file instead.