I want to create a WordPress Plugin where I want to add some css, and upon activation, those css will be in effect and be viewing in the website. Upon deactivation, the css will also be out of effect.
Any how I can do that? Or any documentation I can take help from?
You can follow Plugin Handbook for creating a plugin https://developer.wordpress.org/plugins/.
create a CSS file in plugin directory then upon plugin activation hook you can enqueue the CSS file using action 'wp_enqueue_style'.
You can add this to your main file to load your css file:
function add_my_css() {
$plugin_url = plugin_dir_url( __FILE__ );
wp_enqueue_style( 'style', $plugin_url . "/css/plugin-style.css");
}
add_action( 'wp_enqueue_scripts', 'add_my_css' );
Then create your plugin-style.css file and write your css.
Hope this helps
Related
Hei,
I need to implement CSS for a code module (divi) and the "Custom CSS field" of divi can't handle the sum of lines which I have to add. So is there maybe a way to tell this divi module to get some CSS from a specific file? Maybe with the "#include"?
I appreciate every suggestion that might help me, so thank you very much in advance.
P.S.
The CSS file has 10k lines.
As easy fix you could try to minify your css file with some tool like this: https://cssminifier.com/.
Second solution would be a custom css file in your child-theme. After creating you can enqueue you custom css file in your functions.php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles () {
wp_enqueue_style( 'divi-module-custom-css', get_stylesheet_directory_uri() . '<path to custom css file(/css/custom-divi.css)>', array(), '1.0.0' );
}
}
I have WordPress theme with a child theme. After editing and saving the child style sheet, I don't see the changes. Looking at the source code, the style sheet is loaded but has this ver at the end: style.css?ver=4.9.7
Now, the styles show when I load style.css but shows an empty file with comments (the original file when first got the theme) style.css?ver=4.9.7
I understand that it is encouraged to have custom styles in the child theme but, then why doesn't WordPress support this?
Any advice or help is appreciated. Thanks.
This version added on function.php file, check it first
Better enqueue style on function.php like this
function child_themes_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array(), wp_get_theme()->get('Version'));
}
add_action( 'wp_enqueue_scripts', 'child_themes_styles' );
I'm fairly new to wordpress and custom templates.
I'm trying to add parallax to a site I'm working on and want to use 'skrollr'.
I've downloaded it and have the skrollr.min.js file, which I've placed in my projects js/vendors/ directory.
What I'm trying to figure out in Wordpress is the proper way to add this to your project.
How do you typically add Jquery and other js libraries?
you can include your js and jquery files into your wordpress by simply adding the code
function wpdocs_theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/assets/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
Just simply put your jquery file inside the assets/js folder. from there on use the path that your jquery file makes.
Enter the above code in your functions.php
That should include your above file in the wordpress.
If you further have any issues or problems let me know
Hi I'm trying to get WP Featherlight setup as the default lightbox, right now Visual Composer is using prettyPhoto. So I need to disable it, so that WP Featherlight will overwrite it.
I asked wpbakery and I got this response.
Hello, you can actually overwrite prettyphoto by adding prettyPhoto() in your functions.php and call another lightbox.
And from the plug-in author I got this:
Once prettyPhoto has been disabled, you shouldn't need to do anything
else to lightbox images on the site.
So it's pretty clear what I need to do. Disable prettyPhoto. But I don't know how to do that. Can I add a simple line to my child theme's functions.php? Or?
Any help would really be appreciated.
Thanks.
Place the following code in your theme's function file.
function remove_vc_prettyphoto(){
wp_dequeue_script( 'prettyphoto' );
wp_deregister_script( 'prettyphoto' );
wp_dequeue_style( 'prettyphoto' );
wp_deregister_style( 'prettyphoto' );
}
add_action( 'wp_enqueue_scripts', 'remove_vc_prettyphoto', 9999 );
I have tested this on my installation and it works flawlessly.
What it does is dequeues and deregisters the javascript and stylesheets that Visual Composer enqueues and registers throughout the plugin's PHP files for the various template elements and shortcodes that use the prettyPhoto lightbox.
The '9999' parameter enforces that the dequeuing/deregistering happens well after any enqueuing or registering took place earlier on in the loading of the plugin. Any number will do, but the higher the number the better.
You have to enqueue a custom javascript in your child theme where you override the following function:
function vc_prettyPhoto() {
}
in this way you disable prettyPhoto script initialization made by Visual Composer.
You can use code bellow to disable that javascript lib. Put that into your functions.php of theme
wp_dequeue_script( 'prettyphoto' );
wp_dequeue_style( 'prettyphoto' );
Also other page buider you can use is King Composer, which is faster VC
https://wordpress.org/plugins/kingcomposer/
Not sure if you solved the problem, but I have a solution (not very elegant, but it works).
I did buy ePix theme for a photographer and noticed that Masonry Media Grid from Visual Composer isn't fully responsive. So my soulution was to edit 3 files from wp-content/assets/js/dist. Those files are:
vc_grid.min.js
page_editable.min.js
js_composer_front.min.js
Just remove window.vc_prettyPhoto() or vc_prettyPhoto() from wherever they appear.
After that I installed Lightbox by dFactor, choose swipebox and used as selector prettyPhoto. Also I did force lightbox on link images. Now the lightbox is fully-responsive.
Hopefully this will help somebody :)
You can disable Pretty Photo. Use the below code in theme's function file, thats it.
function remove_scripts(){
wp_dequeue_script('prettyphoto' );
wp_deregister_script('prettyphoto' );
}
add_action( 'wp_enqueue_scripts', 'remove_scripts', 100 );
It will work.
I have tested on my own issue to deactivate some sliders from the Visual Composer and it works. An example how to deactivate the whole Flexslider, Nivoslider and Owl Carousel sliders in the Visual Composer plugin. Add this code into theme functions.php file:
add_action( 'wp_enqueue_scripts', 'deregister_vc_modules', 99 );
function deregister_vc_modules() {
wp_deregister_style( 'flexslider' );
wp_deregister_script( 'flexslider' );
wp_deregister_style( 'nivo-slider-css' );
wp_deregister_style( 'nivo-slider-theme' );
wp_deregister_script( 'nivo-slider' );
wp_deregister_style( 'owl-carousel' );
wp_deregister_script( 'owl-carousel' );
}
I am currently developing a theme and i am having issues when it comes to wp_enqueue. This is what i got but it isn't working.
function theme_name_styles() {
wp_enqueue_script( 'style-name',get_template_directory_uri() . '/css/dropdown.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_styles' );
secondly i am trying to tell if the toolbar is active on the frontend of wordpress or not and using conditions to display something if it is not active.
wp_enqueue_script is used to enqueue script , use wp_enqueue_style instead
other thing is its better to register script or style first before using
wp_register_script // to register script
wp_register_style // To register style
then enqueue using wp_enqueue_script wp_enqueue_style // learn more about it on codex
Try this :
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );
function register_plugin_styles() {
wp_register_style( 'style-name', get_template_directory_uri() . '/css/dropdown.css' );
wp_enqueue_style( 'style-name' );
}
More info : http://codex.wordpress.org/Function_Reference/wp_register_style
For the toolbar, maybe you can find something here: http://digwp.com/2011/04/admin-bar-tricks/
There are specific functions to enqueue scripts and styles in wordpress. wp_enqueue_script is used to enqueue scripts only and wp_enque_style is used to enqueue stylesheets. These enqueued files will be attached at the point where you called the wordpress function wp_head. Note that these functions check for MIME type so that if you trying to enqueue a script using the wp_enqueue_style then it'll assume your stylesheet as a script and vice versa. You can see the type and explanation of the error if you use a debugger tool. The developers tool in google chrome is quite awsome. You can use this.
There is a function is_admin_bar_showing which can tell explicitly whether the admin bar is showing in the front end or not. http://codex.wordpress.org/Function_Reference/is_admin_bar_showing