I have been searching the web left right and center for a solution to get the wp_enqueue_style() function to work but I just can't get it.
Code Snippet
//Add some styles to the script
function sreub_enqueue_styles() {
//Use it!
wp_enqueue_style ( 'sreubmainstyle', plugin_dir_url(__FILE__) . 'sreubmainstyle.css' );
}
add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' );
I have echoed the path I am using in the wp_enqueue_style function and it is correct but have no idea why the styles are not being applied when I put them in the CSS file?
Switch theme and try. or deactivate the plugin and active again. it should works. This code work for me.
function sreub_enqueue_styles() {
wp_enqueue_style( 'sreubmainstyle', plugin_dir_url( __FILE__ ). 'sreubmainstyle.css' );
}
add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' );
Let's do a couple of checks first to determine where the root cause lies:
Check the path
Let's check the path specified to the enqueue instruction. The path you have says the CSS file is located in the same folder (and not a subfolder) as the PHP file that has the enqueue callback.
Is this the case?
Check to see where the CSS file is located in relationship to the PHP file. If it's in a subfolder or elsewhere, you will need to modify your pathing.
For example, let's say the CSS file is located in wp-content/your-plugin/assets/css/sreubmainstyle.css but the PHP file which enqueues it is located in say wp-content/your-plugin/load-assets.php, the URL path to the CSS file would need to absolute by including the full path.
Just double check. If the path is correct, then let's go to the next check.
Loading Before the theme's CSS
The theme's loads after the plugin. WordPress loads plugins first and then the theme. Your code is pre-registering the callback with a priority of 10. More than likely the theme is also using the default of 10. That means the plugin's CSS will load first into the <head>.
Check the <head> and see if where the stylesheet is loaded in relationship to the theme. Use Firefox or Chrome Dev Tools to inspect the HTML markup.
If you find it's not loaded into the DOM (meaning in the HTML markup, then we are back to an enqueue problem. If yes, then go to the next check.
Else, I suspect it's there but before the theme's ’style.css` file. If yes, continue reading this section.
You want your styles to come after the theme to ensure yours override the theme and take a higher precedence. In this case, you want to change the priority to something greater than the default of 10. To do this:
add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles', 50);
The 50 sets the priority higher, meaning it fires later.
Whoops, CSS is not in DOM
Looking in the HTML markup using Firefox or Chrome, you discovered that it did not even load. It's not there. Okay, you know that the path is right. Next did you load the file that is doing the enqueuing? And did you load it before WordPress fires the event to enqueue?
Check when you are loading the file.
try to run add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' ); from the main file or make sure add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' ); is run on the activation hook callback
Related
I am using the good old twenty eleven for a simple job and overwrite styles using a child.
The Problem is, that editor styles are not overwritten when i add an editor-child.css in the child theme folder.
Adding add_editor_style in the child themes functions.php (wrapped in after_setup_theme) doesn't seem to work. Can't I load multiple editor styles or what is the problem here? I can't figure out how I can overwrite this ugly twenty eleven editor css in gutenberg. It might even be better to disable it, but even that doesn't work using remove_editor_style. And I can't find anything on the subject using google or stackoverflow.
<?php
// In the child theme functions.php. I simply want to use the style.css by the child theme as an extra editor style
function wysiwyg_styles() {
add_editor_style( get_stylesheet_uri() );
}
add_action( 'after_setup_theme', 'wysiwyg_styles');
?>
No css is loaded in the admin (after deleting chache AND cookies)
What happen is that you're using the wrong action hook... you should be using the admin_enqueue_scripts hook.
Try doing it like this.. and check if it works for you:
add_action('admin_enqueue_scripts', function () {
wp_enqueue_style('admin-styles', get_stylesheet_directory_uri().'/pathToYour.css');
});
// If the above does not work change get_stylesheet_directory_uri() for get_template_directory_uri()
Hope this can help, good luck.
You can try instead:
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' );
in your functions.php. Haven’t checked if it works with a child theme though.
More information here:
https://developer.wordpress.org/block-editor/developers/themes/theme-support/
I want to remove most css and scripts added to my Wordpress by plugins and maybe core Wordpress. How can I trace which function adds which line in my page header?
Tried to run search for the lines I want to remove but unsuccessfully. I know already that the code is done through wp_header hook but it does not help finding exact function.
If you know which plugins add the code you can go through plugin files in wp-content/plugins/plugin-name and find following functions.
wp_enqueue_script()
wp_enqueue_style()
Usually it will be together and wrapped in another function which will be called by action:
add_action( 'wp_enqueue_scripts', 'name_of_function' );
For not loading the scripts just uncomment add_action line.
But please be aware, that those scripts are usually vital for correct function of plugin so you will have to serve them from somewhere else.
Also when disabling wp_enqueue be sure you are not disabling admin scripts which would be loaded by action
add_action( 'admin_enqueue_scripts', 'name_of_function' );
To be sure always check parametres of wp_enqueue function where script name should match the script you had previously seen in head section of your site.
Every update of plugin will override the files and therefore enable scripts again
Hope this helps.
I've created a child theme and am running my site on that so that I can customise a form that I'm including on certain pages using the plugin 'contact-form-7". In my child folder I've placed a style.css, functions.php and js/custom_script.js. the style sheet is being imported fine but I can't seem to get my validation jquery file working on that form. This is the code I've been using:
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_register_script( 'custom_script', get_stylesheet_directory_uri() . '/js/custom_script.js' ,array( 'jquery'));
wp_enqueue_script( 'custom_script' );
}
console isn't logging any errors but I can't seem to find it in the web tools side bar UNLESS I remove "js/" when the custom_script is called, in which case a GET error pops up.
I'm guessing I'm incorrectly importing the file and honestly I can't quite get my head around these hooks and importing files just yet- only been using wordpress a short time.
Any help much appreciated.
I believe that you haven't included the JQuery file? You have to download it first https://jquery.com/download/, and then register it as you did with "custom_script", you just have to put it before the "custom_script" in functions.php, inside "custom_script.js" you could also do:
$(document).ready(function(){
});
Go to your console and if you see:
Uncaught ReferenceError: $ is not defined
It's because you haven't included the JQuery file as needed.
Hope this helps!
Leo.
I am making changes to an existing website that is based on WordPress (some javascript add-ins and a few PHP scripts for Ajax purposes).
Is their any proper directory that I should place all these files? I started off putting them in a folder in the root directory called assets, but then decided maybe they should go with the rest of the Wordpress template and javascripts files? Or should I keep them out of the wp- directories, and simply keep them in the assets folder?
I know its a trivial question, but I like doing things right- having them in directories that make sense.
You can keep all your javascript in a folder in your theme's directory, that is wp-content/themename/.
Concerning Ajax, it's implementation is different in WordPress. You must add a data variable called action in your ajax request and then hook it to a function in your functions.php file. Your ajax url should be wp-admin/admin-ajax.php available through admin_url( 'admin-ajax.php' ) in PHP.
Read AJAX in Plugins for examples.
If it is presentation related I believe you should place it in the corresponding theme folder. If it is a functionality you might want consider wrapping it inside a plugin and placing it in a plugin folder.
If you dont care about abstracting this change and making available to other themes, then I would just simply add it inside the theme folder. You have WP helper functions to get the web path to the current theme folder, or to include js from that folder.
The proper place in WordPress ecosystem is the folder wp-content, as this is the one that you preserve while doing WP upgrades, restorations or migrations.
In that folder, it could be part of a theme (/themes), a plugin (/plugins), an uploaded file (/uploads) or, if the situation requires, a custom folder (/my-custom-content).
/wp-content/themes/your-theme
Here, all presentation related code. It's a common mistake to place general functionality code in the theme's functions.php. The first question to be asked before placing custom functions in this file is:
If I change my theme, will I need this function?
See: Where to put my code: plugin or functions.php?
/wp-content/plugins/your-plugin
Let's say you need to enqueue some CSS or Javascript files, and this should happen whatever theme is being used.
The following sample plugin will load SWFObject (bundled with WP) in the page Map and the front page, as both contain a SWF Flash embed. And, in the rest of the site, it will load the WebFont Loader from Google CDN and a CSS file from within the plugin folder.
<?php
/** Plugin Name: My Enqueue Plugin */
add_action( 'wp_enqueue_scripts', 'enqueue_so_16354990' );
function enqueue_so_16354990() {
global $post;
if( $post->post_name == 'map' || is_front_page() ) {
// Enqueue bundled script
wp_enqueue_script( 'swfobject' );
}
else {
// Enqueue from external location
wp_enqueue_script(
'my-web-font',
'//ajax.googleapis.com/ajax/libs/webfont/1.4.2/webfont.js',
array( 'jquery' ), // Dependencies
time(), // Version, use time to prevent caching
true // Enqueue on footer
);
// Enqueue from within plugin directory
wp_enqueue_style( 'my-css', plugins_url( 'css/my-plugin.css', __FILE__) );
}
}
/wp-content/uploads
Here, your theme or plugin should place all user uploaded content, so it can be managed through WP Media Library screen. And the content should survive any theme swap or plugin de-activation.
/wp-content/custom-folder
Many image gallery plugins use this approach to store their custom media library.
Another use is for Mobile themes, where custom user themes are placed in this folder, so not to lose it on plugin update (as everything in the plugin or theme folders is replaced on upgrades).
I have written a little PHP script that I have included via short-code into a WordPress page. Is it possible to only use a custom css file in the PHP script without it inheriting CSS elements from the WordPress theme?
If yes than how ?
Any styles included after the original stylesheet will override the previous styles (as long as they are qualified to the same level).
A better way of overriding styles would be to give your new page an ID and then in your new stylesheet you can use #NewID .cssSelectorToOverride {\*new styles\*}
This is a good article that can teach you about css selectors and precedence: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
Generally if the new style file is called after the previous file it will be over wridden, or else specify the style in the tag it self if its critical in some manner.
I hope this will do, if want more assistance provide example with your work.
thank you
open function.php file inside your root directory of WordPress theme. and just insert this function PFB, just change the directory, for js you don't need to connect a separate file because you can use footer.php and insert your js code in script tag it will work accurately.
add_action( 'wp_enqueue_scripts', 'radliv_child_enqueue_styles' ); function radliv_child_enqueue_styles() { wp_enqueue_style( 'custom-css-style', get_template_directory_uri() . '/inc/assets/css/custom.css' ); } ;
You have to do two things:
give your snippet a parent div id, say "#mySnippet"
At the bottom of your css file, ad a section for #mySnippet elements. It is important to be at the bottom so it can override other properties if you must
A custom CSS files won't always work with wordpress because the platform requires a certain file structure, and if I'm not mistaken, all your css code has to be in style.css. This is why your snippet code has to be in style.css at the bottom (preferably well isolated from the rest with a comment line).
Now all the elements that you need to change would simply be preceded by #mySnippet. For example, your P tags in the snippet should be targeted as such:
#mySnippet p {
property:value;
}
This should take care of it..