Hey guys I can't manage to get this working, this is my code
<?php
//Adding the CSS and JS files
function HBUtheme_setup(){
wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,300;0,400;0,600;0,700;1,300;1,400&family=Roboto:ital,wght#0,300;0,400;0,500;0,700;1,300;1,400&display=swap', false);
wp_enqueue_style('fontawesome', 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
wp_enqueue_style('style', get_stylesheet_uri(), NULL, microtime(), all);
wp_enqueue_script('main', get_theme_file_uri('/js/main.js'), array(), microtime(), true);
}
add_action('wp_enqueue_scripts', 'HBUtheme_setup');
For some reason I can't get this fonts to load.
Related
I am trying to enqueue my custom javascript code in WordPress' functions.php file,
I am doing the following,
function background_animation_script() {
wp_register_script('background_animation', plugins_url('/assets/js/jquery.backgroundPosition.js', __FILE__),array('jquery'),'1.0', true);
}
function hero_animation_script() {
wp_register_script('hero_animation', plugins_url('/assets/js/background-animation.js', __FILE__), array('jquery','background_animation_script'), '1.0', true);
}
function custom_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('background_animation_script');
wp_enqueue_script('hero_animation_script');
}
add_action('wp_enqueue_scripts', 'custom_scripts');
But, for some reason, the custom scripts are not getting loaded onto the page, but the jquery is. Any help with this is highly appreciated. Thanks!
use the below function for add jquery in plugin
function custom_scripts() {
wp_enqueue_script( 'background_animation_script', plugins_url('/assets/js/jquery.backgroundPosition.js', __FILE__),array('jquery'),'1.0', true);
wp_enqueue_script( 'hero_animation', plugins_url('/assets/js/background-animation.js', __FILE__), array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'custom_scripts');
I have some trouble making wp_enqueue_script and wp_enqueue_style work..
In the begining of functions.php file, I added this function :
<?php
require_once ....
[....]
add_action('wp_enqueue_scripts', 'my_enqueueScripts');
function my_enqueueScripts(){
wp_register_script('my_js_script', get_template_directory_uri().'/myDirectory/my_js.js', array('jquery'), '1.0', true);
wp_enqueue_scripts('my_js_script');
wp_register_style('my_css_script', get_template_directory_uri().'/myDirectory/my_css.css', false, '1.0', 'all');
wp_enqueue_style('my_css_script');
}
[....]
<?php
This does not work...
My scripts are not loaded and they are not in the "sources" files of my website page...
I tried to put my css file in templates/thetemplate/css/ and my js file on in templates/thetemplate/js/ but this does not solved the problem.
In the template header.php file, the wp_head(); call is here.
And in the footer.php file, the wp_footer(); is also here.
I don't know how to make this work....Do I miss something ?
Thanks in advance for your help...
Try this
add_action('wp_enqueue_scripts', 'my_enqueueScripts');
function my_enqueueScripts(){
wp_enqueue_script('my_js_script', plugins_url('/your-plugin-folder/your-subfolder/my_js.js'), array('jquery') );
wp_register_style( 'my_css_script', plugins_url('...' ) );
wp_enqueue_style( 'my_css_script' );
}
If it does not work something's wrong with your paths. The code above is correct but it doesn't locate the file using plugins_url() or get_template_directory_uri() properly. You could try debugging if you echo the two functions and analyze the urls/paths.
Edit:
If you are working with a theme and not a plugin plugins_url() might not work (I am not 100% sure).
I am new to wordpress. I need to create a new plugin for my website. How to I add scripts and styles for plugins. Advance thanks.
You can register your scripts and styles by using the wp_register_script() function. See the examples below:
<?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Use bellow function for add styles in WordPress.
function your_function_name() {
wp_enqueue_style( 'style', plugins_url( 'put your css file path', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'your_function_name' );
If you want to add custom java script code, use below code (But is bad)
function admin_load_js() { ?>
<script type="text/javascript">
//add your code here
</script>
<?php }
add_action('admin_head', 'admin_load_js');
I'm trying to use wow.js on my WordPress site and I've been through a handful of forums about similar issues but I can't seem to get it working. The site of icons on top I believe are loading on the page load not scroll and further down on the page (under the green band) I have an h2 that never loads at all when scrolling down to it. (The animated class is added, but element is hidden and no animation occurs).
My html:
<h1 class="wow animated fadeInRight left">A website must perform many
functions.</h1>
In functions.php
function sk_enqueue_scripts() {
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/js/animate.css' );
wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.js', array(), '', true );
}
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
//* Enqueue script to activate WOW.js
function sk_wow_init_in_footer() {
add_action( 'print_footer_scripts', 'wow_init' );
}
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
//* Add JavaScript before </body>
function wow_init() { ?>
<script type="text/javascript">
new WOW().init();
</script>
<?php }
add_action('wp_head', 'wow_init');
Thanks in advance!
You have an error:
Uncaught ReferenceError: WOW is not defined
...because you're enqueueing wow.js in the footer, and are trying to use WOW in the head.
Been searching for a while.. trying different suggestions. Finally got it working following this tutorial.
http://www.jeremycookson.com/how-to-add-scrolling-animations-in-wordpress/
Here is the code I replaced in my functions file.
//* Enqueue Scripts
function sk_enqueue_scripts() {
wp_enqueue_script( 'myscripts', get_stylesheet_directory_uri() . '/js/scripts.js', array(), '', true );
wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.js', array(), '', true );
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/js/animate.css');
}
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
//* Enqueue script to activate WOW.js
function sk_wow_init_in_footer() {
add_action( 'print_footer_scripts', 'wow_init' );
}
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
//* Initial Wow before body </body>
function wow_init() { ?>
<script type="text/javascript">
new WOW().init();
</script>
<?php }
I'm not sure what changed other than I moved my scripts.js file to be enqueued as well, when previously I was manually loading it in footer.php
*****UPDATE I also noticed that removing
html,body{height:100%;}
may have made a difference in WOW determining when the animation was in view.**
I try to use bootstrap in my custom wordpress Plugin but seems to broke all admin area with the following
class MyPlugin{
public function iniAdmin(){
add_action('admin_menu', array($this, 'register_collections_menu_page'));
add_action( 'admin_init', array($this,'style_bootstrap' ));
}
public function style_bootstrap(){
wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', array('jquery'), '1.9.1', true); // we need the jquery library for bootsrap js to function
wp_enqueue_script( 'bootstrap-js', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js', array('jquery'), true); // all the bootstrap javascript goodness
wp_enqueue_style( 'bootstrap', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' );
}
}
$collections_settings = new MyPlugin();
if (is_admin()){
$collections_settings->iniAdmin();
}
How to wrap in a propper way bootstrap style in a wordpress plugin
After a long search I found a really good tutorial on how to recompile twitter-bootstrap to use in Wordpress admin. You can find it here.
Using Bootstrap 3
Create a new .less on the same directory where your bootstrap.css is (for example wordpress-bootstrap.less) and wrap the following
.bootstrap-wrapper {
#import (less) url( 'bootstrap.css' );
}
... after all you have to recompile your css (I used winless) and you get wordpress-bootstrap.css wrapped inside .bootstrap-wrapper.
Then, you're ready to go!