Hi I have a WooCommerce plugin activated and a Mystile theme. I want to add a custom js file located at mystile/includes/js/custom-script.js. Ive read on how to add files through using wp_enque_script but it is not loading the js files when I view page source.
I have this code block on functions.php of my current theme which is Mystile, which should have added my custom js file
function add_custom_assets(){
//Load masonry CSS and JS files
wp_enqueue_script('masonry', get_stylesheet_directory_uri().'includes/js/custom-script.js',array('jquery'), '1', true);
}
add_action('wp_enqueue_scripts','add_custom_assets');
the above code does not work and I cannot see my JS file in source. I really dont know what I am doing wrong. I even tried wp_register_scripts but its the same thing.
The only change I did to the current theme was that I copied the templates folder from the woocommerce plugin directory to my current theme and renamed it woocommerce to override certain stuffs. Any suggestions
you should specify unique handles (so stuff don't get overridden)
function add_custom_assets(){
wp_enqueue_script('my-custom-script-handle', get_stylesheet_directory_uri().'includes/js/custom-script.js',array('jquery'), '1', true);
}
add_action('wp_enqueue_scripts','add_custom_assets');
This is not a ideal solution but a hack and it does work. Enqueue the script as wp_enqueue_style rather than wp_enqueue_script. It does load the script but is a very dirty solution. Still the question is open though
Related
I am creating a Wordpress plugin that adds a page that embeds a React app.
On plugin activation, a post is inserted with wp_insert_post() function, and then the load_app_template() function is triggered to set the post template.
This template contains wp_head() in the head section and my React app.
The problem is that some other plugins are loading some JS and CSS in the head that are disturbing the React app behavior. I am trying to remove all JS and CSS given by Wordpress & other plugins and add my own.
If I remove wp_head() from the post template, then I cannot register styles and scripts with my plugin through wp_register_script.
How to remove all JS and CSS from Wordpress and plugins and add my own from my plugin ?
There could be two ways :
Remove wp_head() and manually add links to my JS and CSS in the HTML template. I can do that for Jquery and Bootstrap but I don't know how to put links of JS files from my plugin directory.
Keep wp_head(), deregister all CSS and JS and add my own afterwards with Wordpress hooks. I am not able to remove some Javascript from other plugins with this solution. I tried deregistering all following this answer.
Thank you !
Try to remove unnecessary scripts and styles using wordpress hooks
(this might help you figure out how to do so: https://wordpress.stackexchange.com/questions/233140/how-can-i-get-a-list-of-all-enqueued-scripts-and-styles) if your template is used on page.
You can remove unused CSS/JS from that page. Put this code on your function.php
function remove_unused_css_js() {
// remove only from that page
if(get_the_ID() == 'Your Page ID'){
wp_dequeue_style('css-id'); // remove css
wp_dequeue_script('js-id'); // remove js
}
}
add_action( 'wp_print_styles', 'remove_unused_css_js', 100 );
Hope this will help.
I need to load the checkout.js file of the woo-commerce plugin instead of the checkout.min.js, I am modifying the same function. I need to load the modified js.
I know it is possible to use the
wp_dequeue_script( 'wc-checkout' );
But is there any filter to load the '.js' instead of 'min.js'?
Maybe it is not exactly what you are asking for but you can add in your wp-config.php
define('SCRIPT_DEBUG', true);
It debugging constant that apply to use not minified versions for all js files.
The answer is, we need to "wp_dequeue_script" for the checkout.min.js and enqueue the script from the theme folder.
My requirement is to load the checkout.js instead of checkout.min.js. Because we can't able to modify the min.js file.
I just saved current checkout.min.js and then copied checkout.js over it. I was also editing this file, adding some debugging. Once finished, just restored original minified file
Over the past few years, I have worked with many WordPress theme templates. I have now decided to take the next step of learning to create my own WordPress themes.
I am now at the stage whereby I am looking to use the Bootstrap feature, in order to make my website responsive. I understand how to transfer files from the Bootstrap website and place them on my server, however I am at a loss on how they work with my website. Here area few questions:
I have already created a '[theme-name].css' to style my website. Will the Bootstrap CSS file automatically override my theme CSS file (s)?
When I transfer the Bootstrap files to my server, do I simply add the contents of my own stylesheet, the Bootstrap CSS file or call both CSS files together using the 'function.php' file?
When I transfer the Bootstrap files to my server, do I have to rename any of the files?
At present, I am currently calling my stylesheets, by inserting the following code in my 'functions.php' file:
function [theme-name]_script_enqueue() {
wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/[theme-name].css', array(), '1.0', 'all');
wp_enqueue_script('customjs', get_template_directory_uri() . '/js/[theme-name].js', array(), '1.0', true);
}
add_action( 'wp_enqueue_scripts', '[theme-name]script_enqueue' );
Referring to the above code, would I need to change the code to reflect the Bootstrap.css files or simply add another function for the Bootstrap files, so that they can both be called?
Apologies if my questions are using incorrect terminologies, as the Bootstrap functionality is a new set of files to me.
You should be able to just add another call to load the bootstrap css. Make sure you add bootstrap before your custom CSS.
See below
https://bootstrapbay.com/blog/customize-bootstrap/
You shouldnt need to rename any files providing you link them correctly in your function call.
i've written a plugin which shortcodes can easily be used in every post and page. As this plugin can be useful in a sidebar as well i want to make the text widget usable for my shortcodes.
When i googled this i found out that i can use the add_filter() function to ensure that, but this is only possible if i have access to the theme's functions.php. But as i am the creator of the plugin and not of the theme, this is not usable for me.
Does anybody know how i can make a shortcode which is introduced with a plugin usable in the widgets section?
Thanks!
Open your theme's function file.
Find a free spot after the opening php tag that isn't part of a function.
add this:
if (!is_admin())
{
add_filter('widget_text', 'do_shortcode', 11);
}
save the file and you should be all set.
Open your page in edit mode.
Select your page location and line where you want to add short code.
Add code here and update..
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).