Implementing this map

You likely are running into a jQuery conflict. Remove the jquery.com script reference in HTML. I’m assuming you have the CSS and jQuery in separate external files. If not, you should. Where did you put the HTML? Page content? Or is it on a template file?

In your theme’s functions.php, add code to hook “wp_enqueue_scripts” action. In the callback, enqueue your CSS and jQuery.
https://developer.www.ads-software.com/reference/functions/wp_enqueue_script/
https://developer.www.ads-software.com/reference/functions/wp_enqueue_style/

When you enqueue the jQuery file, in the wp_enqueue_script() call, be sure to specify ['jquery'] as the dependency parameter. You also need to wrap your jQuery in a “noConflict wrapper”. See this user note for specifics.

If you made the HTML into a template file instead of placing in page content, be sure it’s including a head and footer section. Look at your theme’s page.php template for an example.

Hi,

That could be – so I’ve been dropping the HTML in a page, and dropping the CSS to apply to just that page as well. It’s the JS where I’m getting lost, how exactly can I drop it in the functions file?

Do I create a separate .js file with just the content in the JS section? Then edit the functions.php file (at the bottom) to add the wp_enqueue_scripts codes?

So for example, I have the main.js (which is where the JS is located for the map) under my js subfolder in my theme files. In my functions.php file, what do I put (and where? After the last “?>” at the end of the file?) to enqueue that?

• This reply was modified 6 years, 4 months ago by larsemerson.

The following may not be the most efficient, but it’s the tried and true way in WP to do so. My process has always been get it working first, find ways to make it better later ??

So, yes, separate JS file containing just your own JS code. Your JS will likely need the noConflict wrapper I mentioned earlier. Add the enqueue code also mentioned earlier to functions.php that references the JS and CSS files. This is a structured way to add meta links to the code pages that resolves dependencies. By passing ['jquery'] as a dependency argument, the local jQuery library will be loaded before your script. The added PHP code can simply go at the bottom of the file. It’s typical to omit the closing ?> on PHP pages that are solely function or class declarations. If we were to include it, trailing whitespace afterwards can cause difficult to find “Headers already sent” errors since the whitespace outside of PHP delimiters is sent to the browser. No closing ?> and trailing whitespace is ignored in PHP, so no chance of errors ??

Okay sorry, bear with me I’m a bit new to JS, but greatly appreciate the help!

Am I dropping this at the end of my functions.php file (like I said I’m ignoring the CSS as I’m just applying that to the one page, but if that doesn’t work will do the same) exactly like this (where do I put the ‘jquery’ part?):

wp_enqueue_script( string $handle, string $src = ‘main.js’, array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

It takes a bit more than that ??
It needs to be inside a callback function to the “wp_enqueue_scripts” action. Like so:

add_action('wp_enqueue_scripts', 'my_enqueue');
function my_enqueue() {
  wp_enqueue_script( 'my_js', get_stylesheet_uri() .'/js/main.js', array('jquery'));
}

I’m assuming your file is in a /js/ folder within your theme’s main folder. Adjust the path as necessary for your specific situation.

Thank you! Great that loaded into the functions.php document – now trying to load the testing page the map is not displaying and I am getting this error:

“GET https://thepostrider.com/wp-content/themes/lovecraft/style.cssmain.js?ver=4.9.8&nocache=1 404 (Not Found)”

It looks like this is related to the main.js file, which has the following:

$("path, circle").hover(function(e) {
  $('#info-box').css('display','block');
  $('#info-box').html($(this).data('info'));
});

$("path, circle").mouseleave(function(e) {
  $('#info-box').css('display','none');
});

$(document).mousemove(function(e) {
  $('#info-box').css('top',e.pageY-$('#info-box').height()-30);
  $('#info-box').css('left',e.pageX-($('#info-box').width())/2);
}).mouseover();

var ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(ios) {
  $('a').on('click touchend', function() {
    var link = $(this).attr('href');
    window.open(link,'_blank');
    return false;
  });
}

Looks like there are two different filenames in one path, style.css and main.js. The theme should be loading its style.css elsewhere. In any case, CSS files are enqueued with wp_enqueue_style() and scripts with wp_enqueue_script(). The only commonality is the functions can both be called from the same callback function (my_enqueue() in my example).

Incorrect paths are a common problem when enqueuing. Always worth double checking them and adjusting the enqueue code as necessary.

Okay so I think I was able to fix that by just switching my function to (just specifying exactly where the file is):

add_action('wp_enqueue_scripts', 'my_enqueue');
function my_enqueue() {
  wp_enqueue_script( 'my_js', '/wp-content/themes/lovecraft/main.js', array('jquery'));

}

Now it looks like it’s loading main.js correctly on the page, but the console errors I’m getting now are:

“Uncaught TypeError: $ is not a function
at VM504 main.js:1”

In reference to the main.js file (which my content is all of exactly from the post above). I get the feeling this is related to that no conflict wrapper you mentioned earlier, so I wrapped `(function( $ ) {

“use strict”;

<all the javascript from main.js here>

})(jQuery);`

Now it looks like the console errors are gone – but still no map.

My apologies for dragging this along – I’m quite new to this but very excited to get the map working, and learning plenty along the way! ??

• This reply was modified 6 years, 4 months ago by larsemerson.
• This reply was modified 6 years, 4 months ago by larsemerson.
• This reply was modified 6 years, 4 months ago by larsemerson.

The map itself should be showing regardless of jQuery working or not. jQuery only manages the roll-over effects. Since your script is loading without errors, we can assume for now that it will work once the map shows up.

Did you simply paste the map HTML into post content? If not, how is it getting on the page?

In any case, the HTML is corrupted. I think if that is resolved, the map should display. Looking at your page source in my browser, it’s highlighting corruption in red. YMMV. All of the SVG code is red, which isn’t very helpful. I don’t see anything wrong there. However, there is a stray <html> tag just above all the SVGs. I’ve no idea how it got there or where it’s coming from, but it needs to go. Maybe when that’s gone, the browser will be happy with all the SVGs.

I got rid of the HTML tag – I did just put it directly into the text editor of the page editor. Is there a better way? I’m confused as it’s working in the link I took the text from, minus the script source stuff you noted I should remove – why wouldn’t it work here?

The page editor is sort of like a word processor in that it’s unreliable for coding with all but the most basic formatting HTML. Content is post-processed upon output, so even if it looks OK in the editor, by the time it gets to your browser, it’s not the same any more. Even switching between visual and text view can corrupt code.

I’m sorry I didn’t point this out earlier. I honestly didn’t think it would corrupt valid HTML5. It’s a well known issue with inline JS and CSS, this is the first time I’ve seen it corrupt HTML5.

Apparently that HTML tag was actually protecting the SVG code. I know the SVG appeared to be valid before, but now that you “fixed” that issue, the SVG is now really messed up ?? I hope you have a clean version of all of that SVG, as the post content is a complete mess now. (there should be an old revision from before that’s uncorrupted)

There are three ways to prevent this. One is to disable the post-processing code in WP. But if we do that after content was created with it in place, that old content will no longer appear the same. It’s really only a viable approach for brand new sites with no content.

Another way is to create a custom page template. If the template outputs your SVG instead of relying upon the page editor, the post-processing code cannot touch it. Make your page based on a custom template with proper SVG and the content in the editor is not even required.

Finally, we could create a special [shortcode] that outputs the SVG. Because the shortcode is expanded after other post-processing, any such code is allowed through untouched.

Okay, probably best to just create a new page template – now I created a new page template based off of another page template, set the page to that template, where can I add the HTML in the template (I presume I should still remove the script source)?

Still on: https://thepostrider.com/testing-page/

See page template code below:

<?php

/* Template Name: Map page template */

get_header(); ?>

<?php get_header(); ?>

<div class="wrapper section">

	<div class="section-inner">

		<div class="content">

			<?php

			if ( have_posts() ) :

				while ( have_posts() ) : the_post(); ?>

					<div id="post-<?php the_ID(); ?>" <?php post_class( 'post single' ); ?>>

						<div class="post-inner">

							<div class="post-header">

								<h1 class="post-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

							<!--	<?php if ( current_user_can( 'edit_post', $post->ID ) ) : ?>

									<div class="post-meta">

										<?php edit_post_link( __( 'Edit', 'lovecraft' ), '<p>', '</p>' ); ?>

									</div>

								<?php endif; ?>
-->
							</div><!-- .post-header -->

							<?php if ( get_the_content() ) : ?>

								<div class="post-content">

									<?php the_content(); ?>

								</div>

								<div class="clear"></div>

							<?php endif; ?>

						</div><!-- .post-inner -->

						<?php comments_template( '', true ); ?>

					</div><!-- .post -->

					<?php
				endwhile;
			endif;
			?>

		</div><!-- .content -->

		<?php get_sidebar(); ?>

		<div class="clear"></div>

	</div><!-- .section-inner -->

</div><!-- .wrapper.section -->

<?php get_footer(); ?>

Even though it doesn’t look like it, that’s a good start. Get an uncorrupted version of the map SVG. On the template, just below the the line <?php the_content(); ?>, insert all of the map SVG.

The page content in the editor can be empty if you like, or you could enter descriptive text.

Good to hear I’m getting close! Okay so I found the SVG from this page, https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_%28states_only%29.svg trying to link to it, I put it in as the link instead of the w3.org link in the xmlns:svg="https://www.w3.org/2000/svg" part of the <svg> tag (is that correct?). Now the page is just a 500 error – https://thepostrider.com/testing-page/

If I take the code out of the .php file it goes back to normal. Do I need to put <html> codes around the text in question after the <?php the_content(); ?>? That didn’t seem to fix it, but it definitely seems that it’s something that needs fixed on the template page, instead of with just the SVG file, right?

Paste all of the contents of that file except the first line (the <?xml … ?> line) right below the <?php the_content(); ?> line of your template. Don’t change anything in the SVG file except for removing the first line.

If you still have trouble, post the entire content of your template to pastebin.com and put the link here. I’ll have a look.