i have this code to import the css it's working fine but not updating my css latest update right now
// style imports
function themeslug_enqueue_style() {
wp_enqueue_style( 'bootstrap', plugins_url('/bootstrap/css/bootstrap.css', __FILE__), false );
wp_enqueue_style( 'my-style', plugins_url('/assets/mystyle.css', __FILE__), false );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
add_action('showForm', 'showInterface');
this is my plugin directory
turnvoer-calculator
assets
mystyle.css
turnover-calculator.php
If your stylesheet (mystyle.css) success enqueue but it's not update your latest changes - most of the case is because of cache issue (usually have at least 2 layers of cache in a WP site).
So you need to force your WP site to load the newest version of your stylesheet by adding time argument to your stylesheet's url. Your case, using this code:
wp_enqueue_style( 'my-style', plugins_url('/assets/mystyle.css?time=', __FILE__).time(), [], false );
Please replace it with your code and try again.
Related
I've locally compiled the fontawesome.less to my main.min.css, and also changed the font path in variables.less, but I still having problem with loading the icons? Can't figure out why. I've successfully loaded it through this way on my local html file but can't get through on WordPress. BTW, I'm using WinLess as my LESS compiler.
You have to make sure that your final minified CSS is linking to the fonts. It sounds like you're missing the path to the fonts – check your inspector tool.
Another alternative is to load from a CDN, e.g.
/**
* Enqueue javascript
*
*/
if( !function_exists( "theme_js" ) ) {
function theme_js(){
wp_register_script( 'fontawesome', 'https://use.fontawesome.com/9a8a083038.js',
array('jquery'),
'4.7.1', true);
wp_enqueue_script( 'fontawesome' );
}
}
add_action( 'wp_enqueue_scripts', 'datonomy_theme_js' );
I have this styles created in dynamic page with pure html, css, some js libraries. I want to add it to wordpress theme, If there any plugins can create those styles, or how can i add the code by myself ?
Style1
Style2
To add your own styles:
1) Create a child-theme
2) Add your styles to the child theme
3) Setup the child theme lo load the parent's styles.
4) If you use different css files for the added styles, load them after the child-theme's style.css is loaded.
5) For the js files you will do the same as for css files.
To load child-themes you will need make changes to the functions.php of the child-them in order to hook into wp_enqueue_scripts action.
add_action( 'wp_enqueue_scripts', 'load_aditional_styles' );
and use wp_enqueue_style();
function oad_aditional_styles(){
wp_enqueue_style( 'my_style_1', get_stylesheet_directory_uri() . '/Style1.css', array(), all );
wp_enqueue_style( 'my_style_2', get_stylesheet_directory_uri() . '/Style2.css', array(), all );
wp_enqueue_script( 'my-js', get_stylesheet_directory_uri() . 'MuJsFile.js', array(),null, true );
}
(This assumes Style1.css and Style2.css are in the root of the child-theme, otherwise you need to add the corresponding folders to the file name)
For js files, the empty array indicates no dependancies, but if you have dependancies like jQuery, the jquery handle has to be added there.
I have added this line on my plugin
wp_enqueue_style( 'dazzling-bootstrap', get_template_directory_uri() . '/inc/css/bootstrap.min.css' );
and it seems that the whole admin backend was affected of that bootstrap. Any ideas on how to be only on that plugin?
That's because you're not specifying anywhere that the file should be included only for your plugin page, and not for the whole admin backend. Try to add a conditional check and then enqueue the stylesheet.
global $post;
if ( 'enter_plugin_page_slug_here' == $post->name ) {
// enqueue stylesheet here
}
i have a website that is running the Master Slider Pro wordpress plugin and the iLightBox plugin. I am running a custom script in a custom.js file in wordpress child theme:
/* Link JavaScript file */
function custom_scripts() {
wp_register_script( 'custom-script', get_stylesheet_directory_uri() . '/assets/js/custom.js', array('jquery') , false, true );
wp_enqueue_script( 'custom-script' );
}
I am calling the custom file as per the below in my functions.php file:
jQuery(document).ready(function(){
(function(){
var groupsArr = [];
jQuery('[rel^="ilightbox["]').each(function () {
var group = this.getAttribute("rel");
jQuery.inArray(group, groupsArr) === -1 && groupsArr.push(group);
});
jQuery.each(groupsArr, function (i, groupName) {
jQuery('[rel="' + groupName + '"]').iLightBox({ /* options */ });
});
})();
});
The issue i am having is that sometimes it loads the custom script (i assume in the correct order) and my slider loads and the lightbox displays when i click the image... other times the slider gets stuck in a loading state and shows the errors:
Uncaught TypeError: jQuery(...).iLightBox is not a function
I believe i am loading the custom.js file after the jQuery file has loaded... what i am assuming is, that the lighbox plugin is sometimes loading after the jQuery and therefore loading after custom.js file which is why it cannot find the ilightbox function ?
Anyway i can prevent this ?
I have been doing some reading and spoke to my theme author (who has integrated the ilightbox function).
My code now looks like the below:
/* register script that defines ilightbox (in parent theme) */
wp_register_script( 'ilightbox_script', get_stylesheet_directory . '/includes/class-avada-scripts.php' );
/* Link JavaScript file */
function custom_scripts() {
wp_register_script( 'custom-script', get_stylesheet_directory_uri() . '/assets/js/custom.js', array('jquery', 'ilightbox_script') , false, true );
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts', 99 );
I believe i have now registered the script that contains the ilightbox function (stored in my parent theme). I then called the custom.js file after jQuery and the registered script has loaded. However it still is not working. I also get the following error from the file i am now trying to register:
Uncaught SyntaxError: Unexpected token <
Maybe i have misunderstood everything, so i have copied what the theme author has said to me when i asked which fine defines the ilightbox function.. what do you think?
These scripts are enqueued in class-avada-scripts.php available in
following directory
/wp-content/themes/avada/includes
and all JS code is in main.min.js available in following directory
/wp-content/themes/avada/assets/js
However if you enable developer mode from
Wp admin -> appearance -> theme options -> advanced
then you can modify code in avada-lightbox.js and lightbox.js
available in same directory.
UPDATE (22/11/2015):
Latest update has me using:
/* Ensure jquery loads before iLightBox */
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_register_script( 'ilightbox_script', get_theme_root_uri() . '/Avada/includes/class-avada-scripts.php', array( 'jquery' ) );
wp_register_script( 'custom-script', get_stylesheet_directory_uri() . '/assets/js/custom.js' );
wp_enqueue_script('ilightbox_script');
wp_enqueue_script('custom-script');
}
Still same error :(
in wordpress how can I put style.css lastest file of all stylesheet file?
I tried
function stylecssAlwaysLast() {
wp_register_style( 'mystyle', get_stylesheet_directory_uri() .'/style.css');
wp_enqueue_style( 'mystyle' );
}
add_action('wp_enqueue_scripts','stylecssAlwaysLast',1000);
but add file last but dont remove the style.css add by default wordpress code. In other words: at the last i've two files style.css :-(
UPDATE
I get it! :-)
Goals:
remove default theme style.css;
my stylesheet must to be the latest item;
if exist the compressed version use it in place of default versione;
...and the answers is...:
function styleCompressedLatest() {
// delete style.css
wp_dequeue_style('wp-bootstrap');
wp_deregister_style('wp-bootstrap');
// text if exist compressed version
if(file_exists(get_stylesheet_directory().'/style_compressed.css')) {
$style = get_stylesheet_directory_uri() .'/style_compressed.css';
} else {
$style = get_stylesheet_directory_uri() .'/style.css';
}
// add my style.css
wp_enqueue_style( 'mystyle', $style);
}
add_action('wp_enqueue_scripts','styleCompressedLatest',1000);
Somebody knows a best way?
You are on the right track, just don't call your stylesheet style.css and both will be included.
Also, you don't need to register and enqueue a style if you are only using it once, just use wp_enqueue_style() as below.
function stylecssAlwaysLast() {
wp_enqueue_style( 'mystyle', get_stylesheet_directory_uri() .'/mystyle.css');
}
add_action('wp_enqueue_scripts','stylecssAlwaysLast',1000);