After switching to storefront theme leaflet map has disappeared.
link how it looks
functions.php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
/* wp_enqueue_style( 'bootstrap', 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' ); */
wp_enqueue_style( 'leaflet.css','http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css');
}
function theme_scripts(){
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js', array('jquery'), '1.12.2', false);
wp_enqueue_script('bootstrap-js', 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array('jquery'), false);
wp_enqueue_script('leaflet.js', 'http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js' ,false);
wp_enqueue_script('main.js', get_template_directory_uri(). '/js/main.js');
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
Bootstrap is commented because it breaks website view (it becomes smaller). But without commenting map is not working nevertheless.
I have added link to the map page. I dot not know is it proper way.
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri() ; ?>/css/bootstrap.min.css">
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri() ; ?>/js/main.js"></script>
You must have following javascript instruction to create a map
var map = L.map('mapid').setView([latitude, longitude], zoom);
See documentation
If you are using a Wordpress plugin, you should refer to its documentation
A look into the console would have been useful:
TypeError: $ is not a function
Change in main.js this line:
$( document ).ready(function() {
to
jQuery( document ).ready(function($) {
Related
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 a script called show_post.js on my Wordpress site. I've successfully loaded it directly in header.php:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="wp-content/themes/tutorial_theme/scripts/show_post.js"></script>
However, when I'm trying to do it via functions.php and wp_enqueue_script it won't work. Here is my functions.php file:
<?php function wpdocs_scripts_method() {
wp_enqueue_script('show_p', '/wp-content/themes/tutorial_theme/scripts/show_post.js', array( 'jquery' ));
}
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
?>
What am I doing wrong here?
Add Script like
wp_enqueue_script('show_p',get_template_directory_uri().'/scripts/show_post.js', array( 'jquery' ));
Try this:
function theme_enqueue_scripts() {
wp_register_script("show_p", get_template_directory_uri() . '/scripts/show_post.js', array('jquery'));
wp_enqueue_script('show_p');
}
add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');
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 am trying to add some CSS files and JS files associated to a plugin using the hook.
add_action( 'wp_enqueue_scripts', 'vu_add_scripts' );
the function was not firing untill I added:
wp_head();
However, now whenever I try to add or edit a post I get the error:
Cannot modify header information - headers already sent by (output started at /Users/warrenday/Sites/Channel4/Admin/wp-includes/general-template.php:2363)
Am I putting wp_head in the wrong place? Here is the whole thing in context.
function vu_add_scripts(){
$plugin_url = plugin_dir_url( __FILE__ );
wp_enqueue_script('jquery');
wp_enqueue_style( 'vu-style', $plugin_url . 'css/style.css' );
wp_enqueue_script( 'vu-functions', $plugin_url . 'js/functions.js' );
}
add_action( 'wp_enqueue_scripts', 'vu_add_scripts' );
wp_head(); /* Fires the command to add files to head */
wp_head() is for the front-end only, as is wp_enqueue_scripts.
Use admin_enqueue_scripts like so:
function vu_add_scripts( $hook ) {
$plugin_url = plugin_dir_url( __FILE__ );
wp_enqueue_script( 'jquery' );
wp_enqueue_style( 'vu-style', $plugin_url . 'css/style.css' );
wp_enqueue_script( 'vu-functions', $plugin_url . 'js/functions.js' );
}
add_action( 'admin_enqueue_scripts', 'vu_add_scripts' );
The wp_head() function is usually used in the header.php file of the theme you are using. You find it in between the HEAD-tag of the file.
Is wp_head() found in your theme's header.php file? Remove the wp_head() from this file and put it into header.php.
The rest of your code seems solid.
I would like to use http://jqueryui.com/dialog/ on my wordpress site but I can't figure out how to add it.
I created a file Chameleon/js/popup.js with the code:
jQuery(document).ready(function($) {
$( "#dialog" ).dialog();
});
Then I added to functions.php
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script(
'popup', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . '/js/popup.js', // this is the location of your script file
array(' <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">') // this array lists the scripts upon which your script depends
);
and in my post template I added the code:
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
but it doesn't work.
add path as like this
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_style( 'themeslug-jquery-css', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css' );
wp_enqueue_style( 'themeslug-stylesheet', get_template_directory_uri.'/resources/demos/style.css' );
wp_enqueue_script( 'themeslug-popup', get_template_directory_uri() . '/js/popup.js', array('jquery'), '' );
wp_enqueue_script( 'themeslug-jquery-main', '//code.jquery.com/jquery-1.10.2.js', array('jquery'), '' );
wp_enqueue_script( 'themeslug-jquery-ui', '//code.jquery.com/ui/1.11.2/jquery-ui.js', array('jquery'), '' );
}