Been having a hard time getting this to work... I'm trying to use animation for some transitions on a website I'm working on but when I include the files the average way it breaks the theme... A lot of reading has brought me knowing I need to use functions.php to enqueue the scripts and CSS but I tried and no dice.
I am using a child theme
The CSS I need to load is located in a folder my child-theme's directory called "css", the custom js and plugin js I need to load is located in a folder in my child-themes directory called "js".
1-The CSS needs to be in the header
2-jQuery needs to load
3-The plugin then needs to load
4-My scripts.js file needs to load, it manipulates the plugin's settings.
If you still don't understand this then basically I want to use http://git.blivesta.com/animsition/ within a wordpress child-theme. Thanks.
Try reading https://codex.wordpress.org/Child_Themes , it will help you a lot.
Regarding your question, you have to place the following code in your child's theme functions.php file:
function animsition_enqueue_styles_and_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
wp_enqueue_style( 'animsition-style', get_stylesheet_directory_uri() . '/css/animsition.min.css' );
wp_enqueue_script( 'animsition-js', get_stylesheet_directory_uri() . '/js/jquery.animsition.min.js', array('jquery'), '20150628', false );
wp_enqueue_script( 'custom-animsition-js', get_stylesheet_directory_uri() . '/js/scripts.js', array('animsition-js','jquery'), '20150628', false );
}
add_action( 'wp_enqueue_scripts', 'animsition_enqueue_styles_and_styles' );
Related
I am newbie of wordpress.
There are always some JS and Css from CDN in Wordpress, theme or plugins, like:
https://ajax.googleapis.com/ajax/libs/webfont/1.5.0/webfont.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css
Unfortunately, those external CDNs resource are quite slow in our country, and will caused our site serious delay.
Is there anyway to replace it with a local server copy please?
How should I do it please?
Thanks in advance.
One solution you got in comments that how to load jQuery locally and in case you have any other scripts or styles which are not available locally by default from WordPress so you can use wp_enqueue_script.
/**
* Proper way to enqueue scripts and styles.
*/
function wpdocs_theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );`
Well you can always override your current themeto enqueue your css and js. Basically go to :
wordpress/wp-content/themes/(the theme your using)/functions.php
You will need to modify the "functions.php" file and add an action in order to enqueue your new scripes and styles.
function mynew_scripts() {
wp_enqueue_script('webfont', 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.0/webfont.js');
wp_enqueue_style('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css');
//And for local file use get_template_directory_uri() to get the path
wp_enqueue_script('yourjsfile',get_template_directory_uri().'/yourthemedir/assets/js/yourjsfile.js');
wp_enqueue_style('yourcssfile',get_template_directory_uri().'/yourthemedir/assets/js/yourcssfile.css');
}
add_action('wp_enqueue_scripts', 'mynew_scripts');
check up these functions wp_enqueue_script , wp_enqueue_style
So i'm trying to tweak my wordpress site by tweaking the javascript needed to reduce the image sizes on the page. I have a js folder within my child themes folder structure that has one js file in it (which has the same name as the file it is meant to be overriding). Below is the code i'm using for the functions.php file which is meant to queue up the files. In my head it might have something to do with maybe how wordpress reads file, like maybe i have to do dequeue the parents javascript file or something?
Below is the functions.php file my child theme is using
<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:
if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'bootstrap','font-awesome' ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
// END ENQUEUE PARENT ACTION
Below is the part of the parents function.php file containing how it loads the scripts
add_action('wp_enqueue_scripts', 'simpleshift_public_scripts');
function simpleshift_public_scripts() {
if (!is_admin()) {
wp_enqueue_script('bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array('jquery'), '3.0.0',true);
wp_enqueue_script('waypoints',get_template_directory_uri() . '/assets/js/jquery.waypoints.min.js','','3.1.1',true);
wp_enqueue_script('scrollreveal',get_template_directory_uri() . '/assets/js/scrollReveal.min.js','','2.3.2',true);
wp_enqueue_script('easing',get_template_directory_uri() . '/assets/js/jquery.easing.min.js','','1.3',true);
wp_enqueue_script('waypoints-sticky',get_template_directory_uri() . '/assets/js/sticky.min.js','','3.1.1',true);
wp_enqueue_script('nicescroll',get_template_directory_uri() . '/assets/js/nicescroll.min.js','','3.1.1',true);
wp_enqueue_script('parallax',get_template_directory_uri() . '/assets/js/parallax.min.js','','3.1.1',true);
wp_enqueue_script('simpleshift_public',get_template_directory_uri() . '/assets/js/public.js','','1.0.0',true);
wp_enqueue_script('html5shiv',get_template_directory_uri() . '/assets/js/html5shiv.js','','1.0.0',false);
wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );
wp_enqueue_script('respondjs',get_template_directory_uri() . '/assets/js/respond.js','','1.0.0',false);
wp_script_add_data( 'respondjs', 'conditional', 'lt IE 9' );
}
}
You should first find your script in .php files. Depending on how its printing, you can use solution:
Its using some action, like
add_action( 'wp_enqueue_scripts', '/*some function*/' );
And in the function you'll find wp_register_script, or wp_enqueue_script:
wp_enqueue_script( $handle //you'll need handle name, ... )
After founding you need to add this code:
add_action( 'wp_enqueue_scripts', 'theme_name_scripts', 20 );
function theme_name_scripts() {
wp_dequeue_script( 'simpleshift_public' );
wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() .'/js/public.js', array( 'jquery' ), '1.0', true);
}
Or the script in your theme can be printed using just <script> html tag(not recommended way ). In this case you need to comment or delete this tag from your parent theme, if you don't need it. After you just need to add your js file, using this code
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
function theme_name_scripts() {
wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() .'/js/public.js', array( 'jquery' ), '1.0', true);
}
if you has active child theme, then put the code at the end of /your_child_theme_folder/functions.php file. If not, then put it at the end of your parent theme functions.php file. Be sure, that there isn't ?> closing tag. If its there, then just delete it and put the code instead of it.
I have a wordpress website and I know that to run scripts on a wordpress page, you need to enqueue the script in the functions.php file. I am not sure how to do this proccess?
my Javascript is called boosting.js
Can someone give me an example code of how to do this?
Thank you very much! (I am a bit new to all this)
You need to add this to functions.php.
script-name - is the name you want to give the script
get_template_directory_uri() . '/js/boosting.js' - is path to where the script is located. If you're using a child theme then change this to get_stylesheet_directory_uri() . '/js/boosting.js'
array() - this is for dependencies. If your script needs jQuery to work than use array('jquery')
1.0.0 - version of the script. Useful for caching
true - means that the script will be loaded in the footer, use false if you needed in the header
/**
* Proper way to enqueue scripts and styles.
*/
function wp_theme_enque_scripts() {
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/boosting.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wp_theme_enque_scripts' );
You can read more here https://developer.wordpress.org/reference/functions/wp_enqueue_script/
So I recently bought a JS file from someone and I have a wordpress website. The script file contains a css folder, a script folder, and a font folder. Where should I upload this to? Publid_html? And how do I implement it to my website? (Its made with bootstrap)
Thank you
You can make folders within the THEME folder.
So basically
-YOURTHEME(main theme folder)
css(folder)
js(folder)
Img(folder)
index.php(file)
Etc.
as for where to call it from: put this code in your functions.php file.
function YOURTHEME_script_enqueue() {
wp_enqueue_script( 'bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array(), true )
wp_enqueue_style('bootstrapstyle', get_template_directory_uri() . '/css/bootstrap.min.css', array(), 'all');
add_action( 'wp_enqueue_scripts', 'blackmass_script_enqueue');
here you can add the scripts and wordpress will place them in the HEAD or FOOT locations depending on the SCRIPT/STYLE at the begining of the argument, and the ALL/TRUE functions at the end of the argument.
as for the two index.php files one in scripts folder, and one in main theme folder. you only need the one thats in the themes folder. you can delete the other one.
The best implementation of those files would be root/wp-content/themes/{your-custom-theme}/assets
So under assets you can put like css,js,fonts,images
and make it link from functions.php
You must read the WP Codex about this, but here an quick example:
With get_stylesheet_directory_uri() function you can grab link to your current theme folder (themes/your-theme-name/) for example.
In this folder you can create your own structure, but best practice is to have diffrent folders for js/, css/, images/ etc.
When you decide where you want to put your .js and .css files then you must include them with wp_enqueue_script() and wp_enqueue_style() functions using wp_enqueue_scripts hook like this:
function my_scripts_include() {
wp_enqueue_style( 'my-style-name', get_stylesheet_directory_uri() . '/css/my-css-file.css', [] );
wp_enqueue_script( 'my-script-name', get_template_directory_uri() . '/js/my-script.js', array('my-script-depends-from-this-script'), '1.0.0', true );
if ( some_logic ) {
wp_enqueue_script('my-other-script' .... );
}
}
add_action( 'wp_enqueue_scripts', 'my_scripts_include' );
You must put this code in your theme functions.php file.
But really, there have so many tutorials about WP, you must read some to understand better this process.
I'm trying to create a wordpress theme and start learning the best way to include javascript and css files using wp_enqueue. After couple hours, I still can't load the files. Here is the code I use
function compro_scripts() {
wp_register_style( 'style', get_template_directory_uri() . '/css/materialize.css', array(), '20150208', 'all');
wp_enqueue_script( 'style' );
}
add_action( 'wp_enqueue_scripts', 'compro_scripts' );
It looked simple on every tutorial I've read, but it still not work for me. Would anyone mind helping me solve this ?
This very basic knowledge of Wordpress, but as a newbie I found out this is pretty confusing. If you want to use the best practice to include javascript and css files make sure to add wp_head() and wp_footer(). The rest of it is described clearly here How to Load Javascript like Wordpress Master
You've registered the "style" handle with wp_register_style() and you're enqueuing it by using wp_enqueue_script() which is incorrect. wp_enqueue_script() in your code needs to be replaced by wp_enqueue_style(), since it's a style that you are including, not a script.
Alternatively, you can simply enqueue scripts and styles directly without the need to register them separately - like this
function compro_scripts() {
$template_dir = get_template_directory_uri();
//enqueue a style
wp_enqueue_style( 'style', $template_dir . '/css/materialize.css', array(), '20150208', 'all');
//enqueue a script
wp_enqueue_script( 'custom', $template_dir . '/js/custom.js', array( 'jquery' ), false, false );
}
add_action( 'wp_enqueue_scripts', 'compro_scripts' );