Sub-header anchor links

[manavecplan]

Hey,

If you look at the H2 headers on this page(http://conversionxl.com/this-i-believe/) you'll see a link icon appear at the right of the header when you over over it.

If you look at the page source, there's no ID assigned to any of the headers so basically the IDs are being generated on the fly using what I believe is the Anchor.js library(http://bryanbraun.github.io/anchorjs/)

So, what I've done to load the library is paste this into the Genesis Theme Settings:(<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.0/anchor.js"></script>)

Naturally, it doesn't load. 🙁

I've also tried loading it locally via:

function add_anchors() {
      wp_enqueue_script( 'anchor_script', get_template_directory_uri() . '/js/anchor.js', array ( 'jquery' ), 1.1, true);
      wp_enqueue_script('anchor_script');
	}
  }
  add_action( 'wp_enqueue_scripts', 'add_anchors' );

Again, no go.

What am I doing wrong here?

[Christoph]

Hi,

try get_stylesheet_diretory_uri()
or, if you want to use the CDN, you can use
wp_enqueue_script( 'anchorjs', '//cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.0/anchor.js', array( ), CHILD_THEME_VERSION );

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[manavecplan]

No go... 🙁

Current code looks like this but neither function fires:

function add_anchors() {
      wp_enqueue_script( 'anchor_script', get_template_directory_uri() . '/js/anchor.js', array ( 'jquery' ), 1.1, true);
      wp_enqueue_script('anchor_script');
	}
add_action( 'wp_enqueue_scripts', 'add_anchors' );

function adda_anchors() {
      wp_enqueue_script( 'anchora_script', get_stylesheet_directory_uri() . '/js/anchor.js', array ( 'jquery' ), 1.1, true);
      wp_enqueue_script('anchora_script');
	}
add_action( 'wp_enqueue_scripts', 'adda_anchors' );

Also, to be clear, the js file is inside the js folder inside the Genesis Child Theme folder

[Christoph]

I just used the existing "enqueue function" in the child theme.
wp_enqueue_script('anchora_script');
should not be necessary.
Do you get an error message in the Google Console?

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[manavecplan]

That question provided a great bit of learning Christoph! 😀

So, I checked the console and the network both...

When I check the console, it gave me the following error: Uncaught SyntaxError: Unexpected token < anchor.js?ver=1.1:5

When I tab over too Network, it tells me that this is a 304 Not Modified error; which apparently isn't an error at all.

So, so close...

function add_anchors() {
      wp_enqueue_script( 'anchora_script', get_stylesheet_directory_uri() . '/js/anchor.js', array ( 'jquery' ), 1.1, true);
	}
add_action( 'wp_enqueue_scripts', 'add_anchors' );

[manavecplan]

*bump*

[Christoph]

It means you have a syntax error somewhere that is stopping jQuery from parsing the code.

You are missing single quotes around the 1.1 "version number" in the wp_enqueue_script
(I would use CHILD_THEME_VERSION anyway.)

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Author]

Posts