Inserting Javascript into page via cornerstone

It seems like my favorite theme is getting more and more difficult to use. I am attempting to create a page using custom javascript instead of an iframe. I have looked for and found numerous articles on this but none have helped. I have taken the code that needs to be inserted into the head and placed it into the custom “js” section in the customizer. I then place the code into the page using the classic raw content element. This is the obvious way I would think to do it but it is not working.

I can’t wait for a couple days for assistance. I have a client with several projects we have used the x theme on that needed this done last week. Please advise.

Code that needs to go into header:

<link href="https://fonts.googleapis.com/css?family=Muli:400,600,700" rel="stylesheet">
      <link href="https://s3.us-east-2.amazonaws.com/lois-dist/main.css" rel="stylesheet">
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />

Code to call the content into the page:

<script>

window.__INITIAL__ = JSON.stringify({
buildings: {
filters: [],
sort: {},
 },
sites: {
filters: [],
sort: {},
},
});
</script>
<script type="text/javascript" src="https://s3.us-east-2.amazonaws.com/lois-dist/main.js"></script>

http://www.kcpled.com/lois-test/ *Integration page.

Hi there,

Thanks for writing in.

You can’t really just add code that contains javascript, it may work and may not since the builder may fail to capture the generated content of that javascript. It’s been like that since the early versions.

Let’s do this, please add this code to your child theme’s functions.php

add_action('wp_head', 'head_assets_2', 9999);

function head_assets_2 () { ?>
<link href="https://fonts.googleapis.com/css?family=Muli:400,600,700" rel="stylesheet">
      <link href="https://s3.us-east-2.amazonaws.com/lois-dist/main.css" rel="stylesheet">
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<?php }

add_filter('custom_js_v1_1', 'custom_js_v1_1' );

function custom_js_v1_1 ( $atts ) { ?>

<script>

window.__INITIAL__ = JSON.stringify({
buildings: {
filters: [],
sort: {},
 },
sites: {
filters: [],
sort: {},
},
});
</script>
<script type="text/javascript" src="https://s3.us-east-2.amazonaws.com/lois-dist/main.js"></script>

<?php }

Then simply add [custom_js_v1_1] to the classic text element in your builder.

Thanks!

Hi rad,

First of all please understand my frustration here is not with you but the situation. We are very loyal x theme customers. I used to submit support requests and get response within a few hours and not a few days. This is currently the leading selling theme for WP. Themeco or Apex…not sure who it is now, needs to get you and your colleagues more help.

Now back to the issue at hand. The solution did not work as you can see by following the link below.

http://www.kcpled.com/lois-test/

I do see the code in the head now - THANK YOU for your assistance with that. Now I just need it to display in the page. Below is a link of how it should look when working correctly. This is based on an iframe insert.

http://www.kcpled.com/site-location-services/buildings-and-sites/

I am desperate to find a solution to this issue as this is my single largest client. Please advise and know that we appreciate your effort. Thanks.

Hi there,

I understand the frustration and sorry to hear that, but we’ll surely reply and response time depends on other tickets ahead of yours.

I checked and the shortcode is not being executed. I like to change the elements but I’m unable since I can’t login. Both wp-admin and wp-login.php redirects me back to the home page, perhaps you can provide the correct login URL?

For the meantime, please try adding the shortcode within a raw element instead if text element.

Thanks!

I tried the raw content and here is what I get. I am losing my best client over this. If it was a regular website I could do this in a matter of minutes. Please advise.

http://www.kcpled.com/lois-test/

@Rad wrote add_filter instead of add_shortcode. Please change this line add_filter('custom_js_v1_1', 'custom_js_v1_1' ); to add_shortcode('custom_js_v1_1', 'custom_js_v1_1' );. I tested your code (the links in the head and js in the body) in the default WordPress theme though and nothing shows up. The problem is most probably with your code.

Please check your wp-admin also. It redirects to the home page so we could not login.

Thanks.

Well Christian, As much as I appreciate your input and opinion, you could not be more wrong. The code submitted is currently being successfully used in multiple websites that do not use the x theme. So your comment regarding the code being the problem was proved incorrect long before you made the statement. It is so sad that the developers at THEMECO, after all of their success over the past couple years, have made the choice to employ support techs who are not familiar enough with the product to support it.

It is not a matter of making it work but a matter of making it work with the x theme. THEMECO has put me in a very precarious position as a loyal customer since I have used this template in so many of our firms projects.

I will find a way to make it work and discuss with my staff using a new theme/toolset option for our projects moving forward. This has taken more than a week to get your surrender message below. Not acceptable.

Has anyone considered just giving us the code that would insert the tag items submitted into the child theme? If the items submitted were in the head of the child theme and the script was in the page using non cornerstone methods, perhaps it might work that way.

Guys, there has to be a solution. We cannot be the only client on the face of the planet that has used the x theme and needs to insert custom javascript into a page.

*I also tested the updates to the code for the functions.php in my child theme. Now you cannot even see the shortcode that displayed on previously submitted code.

Hey @kstidham,

Sorry I did not know about this. Can you give us access to a site where it works so we could see the setup? Please give us details where you placed the header code and the content code so we could copy it into X.

The reason why I said it is most probably (not exactly) a problem with your code is that I tested first in X but it didn’t work so I tested in the default WordPress theme to check if it would work because if it will, then the problem most probably would come from X. As you can see in my screenshots, I added it properly in the head and in the content / body of the default WP theme but it still doesn’t work.

@Rad has given the code. Adding the head part is correct.

function head_assets_2 () { ?>
<link href="https://fonts.googleapis.com/css?family=Muli:400,600,700" rel="stylesheet">
      <link href="https://s3.us-east-2.amazonaws.com/lois-dist/main.css" rel="stylesheet">
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<?php }

The shortcode part didn’t work because he used add_filter instead of add_shortcode that is why you saw the shortcode in the front-end.

Supposed to be, you do not need the shortcode part because putting your code in a Raw Content Element should work. This is why I tested in the default WordPress theme to see if the code you gave works or not.

You can’t see anything because the shortcode works but nothing is displayed because the script doesn’t output anything like what you see in my previous screenshot using the default WP theme.



I understand you’re frustrated but I have done a proper investigation on this.

Thanks.

I am not even sure if this is what I am supposed to using to reply as this has become so convoluted. Please check the url below to view a working example. Maybe firebug or another inline code viewer will help you figure out how to make the javascript version work with the x theme. I do not have direct access as all of my projects I am attempting this integration on are using the x theme and you all can’t figure out how to make it work.

had I known this three or so years ago when I started buying the x theme I would have never used it. I have until Friday to get this figured out or they are taking it to another developer. Please help.

https://www.salinaedo.org/sites-buildings/search/

Hi there,

I’m one of the lead developers for X. I’m sorry you’re having trouble here. First, I need to start by saying I don’t appreciate your accusation against our team for not being familiar with the product. I’ve reviewed this case, and aside from an unfortunate typo that we later corrected, everything we’ve communicated thus far as been accurate. What you’re asking for here is assistance with custom development. Custom development is not covered by the scope of support we can offer, but we do try to help as much as we can in these situations.

I do thank you for being a loyal customer, and we do appreciate how you’ve continued to use X to support your clients. Your main concern here seems to be that there is a problem with our theme in regards to what you’re trying to accomplish.

Guys, there has to be a solution. We cannot be the only client on the face of the planet that has used the x theme and needs to insert custom javascript into a page.

The distinction here is that you’re not adding custom javascript. You can always add custom javascript (the code itself) under “JS” on each page edited with Cornerstone, or in Theme Options. What you’re actually trying to do is add custom markup that loads it’s own javascript.

We offer the classic raw content element, and and of the “Content Area” elements where custom code can be placed. How it behaves on the front end is entirely dependent on what the code is meant to do. It’s also entirely theme agnostic. It works the same with all themes, but could potentially conflict with theme features depending on what you want to implement.

If this is something you need to do on a regular basis I would recommend that you learn a bit more about how WordPress hooks and filters work: https://codex.wordpress.org/Plugin_API

Specifically, the best case would be using the wp_head and wp_footer hooks, or a custom shortcode For example, here’s some code that would go in functions.php of a child theme:

function my_custom_head_code() {

  // Whatever you run here happens inside the <head> tag. It's where you can load additional stylesheets.

}
add_action('wp_head', 'my_custom_head_code');

function my_custom_footer_code() {

  // Whatever you run here happens after the page is finished outputting, but before the closing </body> tag. It's an ideal place to add custom scripts.

}
add_action('wp_footer', 'my_custom_footer_code');

function my_custom_shortcode( $atts, $content = '' ) {

  // Whatever you put here will output anywhere you add a [my_custom_shortcode] to your content. This is ideal if you want to ensure code only runs on specific pages in specific contexts.

}
add_shortcode('my_custom_shortcode', 'my_custom_shortcode');

Here are some more links to the Codex explaining in depth what’s going on there.

https://codex.wordpress.org/Plugin_API/Action_Reference/wp_head
https://codex.wordpress.org/Plugin_API/Action_Reference/wp_footer
https://codex.wordpress.org/Function_Reference/add_shortcode

It always works this way with WordPress regardless of what theme you’re using. Some themes (like X) offer places to add custom javascript, but that means it has to be pure javascript. You can’t put HTML in place for custom javascript. When your customization is more involved like this, it’s best to use the WordPress plugin APIs to get where you need to be.

Hi Alexander,

I made a statement as a client. Let me inform you of two things:

  1. I am a valuable paying customer who has purchased multiple x theme licenses. I suggest you learn how to address customers and lose the attitude.
  2. I have been in touch with the folks at THEMECO and will pass your reply on to them. Perhaps you need to not worry about my frustration with the product and help me find a solution. You have no idea what kind of position this has put my business in with the product failing like it has. I have used it on multiple sites that need this js integrated. THEMECO advertises this product as being capable of easily integrating javascript.

My statement was correct and your techs were leaving out part of the code I submitted. I discovered it and can now see the script loading in the background where the WP admin toolbar is located. I am not going to read support articles and do the discovery myself. This theme advertises itself as accommodating to javascript. This is very simple if you know as much as you say you do. Use the url below and check the site again and you will notice the site loading at the top of the page in the left corner. This is an x theme issue and it needs to be resolved by themeco

http://www.kcpled.com/lois-test/

*If I do not hear back from you in the next 24 hours I will pass your reply on to your superiors. I am sure they would be interested in learning how you deal with clients that have paid for as many licenses as I have. Put yourself in my shoes Alexander. This is my livelihood and the product you represent is failing me. I ask a question and have to wait 24 hours+ for a response. That is not acceptable. Perhaps THEMECO should have a tired tech support system based on the amount of licenses a client has purchased and the frustration of said clients might be less.

I look forward to hearing your resolution. Thank you.

Here’s your example page you said earlier https://www.salinaedo.org/sites-buildings/search/

Now, I checked the source of that page and found that you’re using an iframe in there. It’s different from what you asked us to do which is the Javascript method. We followed it correctly adding code to the head and to the body (content).

In my test site, I inserted the iframe in a Raw Content Element and it works.

Again, this iframe method is different from your Javascript method which you’ve asked us to do.

It is not an issue with X because your Javascript method doesn’t work even in the default WordPress theme as I’ve already shown previously.

@christian_y passed this along to me so I wouldn’t miss your message.

Regarding the technical issue we’re discussing:

We can tell you how and where to add your custom code, but unfortunately we can’t implement your customization for you.

Your support request isn’t asking a question about the theme, it’s about custom development beyond what the theme offers. This isn’t something covered by the scope of our support. If you want to add functionality beyond what the theme provides, that is your responsibility. But we’re trying to be as helpful as we can which is why I elaborated on how you as a developer can work towards getting your customization to work. Please read Christian’s post, and consider: 1. We’re not talking about simple javascript. 2. Your code doesn’t work in another theme, showing it isn’t a conflict with X.

If you’re unable to get it working, you may need to hire a developer. If you need a recommendation we can connect you with someone, or your can reach out to our in-house custom development team.

In response to your comments addressed to me directly:

I understand the stakes are high for you and you’re frustrated this isn’t working. I also respect and appreciate you being with us for these years and having built so many sites using our products. Hopefully as a long time customer you have a sense for our values as a company. We can not let misplaced frustration come out as an attack against our team. Discussion on this forum must be kept respectful. Aside from my opening statement to address your accusations, I tried to keep my response as objective, informative, and helpful as possible. If this is concerning to you, feel free to contact who you may.

Isn’t that funny how when their is a reply with subject matter you feel pertains to you, I get a response within hours. I will make sure that management takes note of that. Had you paid as much attention to the issue as you did my frustration, the matter would have been solved. I also find it strange that the developer would expect someone else to know more about their product than they do…go figure.

In closing, this is hilarious and typical of a millennial. When the going gets tough you cry “respect” and then you bail. At no point was I ever disrespectful to you or anyone else. I am in a predicament you have no way of understanding and when I counted on you and your techs I was let down. Sorry your feelings got hurt. Suck it up buttercup. I guess next step will be calling me a racist? You have a great future in front of you.

Speaking of the future, I hope THEMECO brings their support back state side as it makes communications much easier.

Thanks for nothing.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.