15 {{ upvoteCount | shortNum }}
15 {{ upvoteCount | shortNum }}

Upload HTML and Javascript to Wordpress?

by Matt Mason
12 replies
Hello fellow warriors!

I have a pre-built HTML squeeze page that I need to upload to a wordpress site which needs to be accompanied by a style.css document as well as a folder full of images and a folder full of javascript files.

Can anyone tell me how to do this?

My hosting is with Hostgator, if that matters.

Thanks in advance. :-)
#html #javascript #upload #wordpress
  • Profile picture of the author Istvan Horvath
    FTP. Just google it, install it and learn to use it. It has nothing to do with WordPress.
    It's about "transferring" files from your computer to the host server (=computer) > FTP = File Transfer Protocol.

    Hint: look for a free client called Filezilla...
    Signature

    {{ DiscussionBoard.errors[7848764].message }}
  • Profile picture of the author Matt011
    Thanks! I searched it and found the directions I need right on Hostgator's website.

    It's amazing what knowing what to search for can do. Thanks for your help!
    {{ DiscussionBoard.errors[7848795].message }}
  • Profile picture of the author Matt011
    I am running into a problem: I uploaded the files to my cPanel using the FTP, but the images aren't displaying on my site because the HTML file doesn't know where to find the images and javascript files (I'm assuming.) Does anyone know how to fix this?
    {{ DiscussionBoard.errors[7849145].message }}
    • Profile picture of the author Tony Marriott
      You need to make sure that all the files are uploaded in the same folder structure as they were originally.

      It is most likely that all links between the files are relative.

      Assuming you have images (.jpg/.gif/.png) in a folder called "images" which sits in the same folder as the html file.
      The link in the html file that dispays an image will look something like

      <img src="images/picture.jpg"

      That then looks directly in the "images" folder to find the image it wants. If the folder (or image) is not there it cannot see it.

      If it looks looks more like this

      <img src="http://awebsite.com/images/picture.jpg"

      then it is looking for the image in it's original location. If that no longer exists it will not see it.
      Signature
      {{ DiscussionBoard.errors[7849795].message }}
  • Profile picture of the author Matt011
    I think I'm starting to zero in on the problem.

    Big Mike and Tony- you guys were right. I need to point the html path to the correct location, which is exactly what I thought I needed to do, I just didn't know how to do it. I now understand, thanks to you guys, that the src tag is what does it (I'm an HTML noob.)

    I took a look at the links and they are relative. Here's an example:

    <img src="images/red-down-arrow.png" alt="Sign Up Today" width="177" height="183" />

    Now what I'm realizing is that I copied and pasted the HTML into a wordpress page (in the HTML field where it should be) so the code is trying to access the other files from that page. Of course, the other files aren't available there because it's just an HTML document without any additional folders.

    What I need to do now is either somehow change the file paths to point to the correct folders in my Hostgator cPanel, or remove the HTML from the wordpress page and somehow call it from the cPanel, where is has all the other folders with it.

    Any thoughts on how to do either of those things?

    I hope I explained that in a non-confusing way...
    {{ DiscussionBoard.errors[7850625].message }}
  • Profile picture of the author Istvan Horvath
    Nope. in the case of a WordPress powered site no relative path will work ever!

    Because the relative path is "calculated" from the URL of the webpage that is displayed, i.e. a multipost view of the posts, a single post, an archive page - and in all those cases the relative path would have been different.

    Solution: either use absolute path - or do NOT copy ever HTML pages into WP Pages.

    As I stated earlier: you can upload any HTML pages (together with stylesheet and images) to the same place where your WP site lives, just make sure you don't upload another index.php or a file that has an identical name to those wp-something.php files.
    You should act simply as if WP wasn't there. Don't over-complicate
    Signature

    {{ DiscussionBoard.errors[7850964].message }}
  • Profile picture of the author Matt011
    Istvan, thanks for your insight. Let me make sure I understand:

    I have to upload all the accompanying files to wordpress and then use an absolute path? I can't access them if I just upload them to public_html in my Hostgator account? (That's the way I have it right now.) Also, the page I want this on is a static page- can I still not use relative links?

    Mike, I'm not sure how to upload javascript files to wordpress, and the style.css document.
    {{ DiscussionBoard.errors[7851810].message }}
    • Profile picture of the author Istvan Horvath
      Originally Posted by Matt011 View Post

      Istvan, thanks for your insight. Let me make sure I understand:

      I have to upload all the accompanying files to wordpress and then use an absolute path? I can't access them if I just upload them to public_html in my Hostgator account? (That's the way I have it right now.) Also, the page I want this on is a static page- can I still not use relative links?
      No, you got it backward...

      Upload the squeeze html files+JS+images to the root.
      Root = public_html

      That's what I said originally. And you need absolute path IF you want to link to the images FROM WordPress... WP pages and posts have changing URLs, that's why you can not use relative path.
      Absolute path =
      Code:
      http://example.com/images/bullshit.jpg
      p.s. My personal preference (because I hate mess...) would be to create a subfolder in public_html; like /optinpage/ - and upload everything there. AGAIN, make sure you keep the folser structure of the uploaded material!
      Although, a normally set FTP client takes care of it.

      And I'd name/rename the squeeze page html file in that folder to index.html.
      Then going to example.com/optinpage/ would display your squeeze page.
      Signature

      {{ DiscussionBoard.errors[7852275].message }}
  • Profile picture of the author Matt011
    Ok, I figured out how to upload the javascript files and image files to wordpress, but I don't know where to put them...

    UPDATE: I may have figured it out... I'm working through something right now and will report back soon.
    {{ DiscussionBoard.errors[7852046].message }}
  • Profile picture of the author Matt011
    Good news - I have the images displaying correctly! I uploaded them to the folder of the theme I'm using and changed the links to absolute links. I also figured out how to get the HTML to reference style.css and the javascript files.

    That should have been everything I needed to do, but there's still a problem: mattmason.info/squeeze

    Not sure what to do now. Anyone have any idea?
    {{ DiscussionBoard.errors[7852110].message }}
  • Profile picture of the author Matt011
    YES! YES! YES! IT WORKED! Thank you so much!

    The problem I had was that I put the files in public_html when they should have been in my addon domain folder. The fact that this domain was an addon was a critical piece of information that I didn't think to mention until just now. Being new to all this, it didn't even strike me as something to think about.

    Thank you so much for the help!
    {{ DiscussionBoard.errors[7852728].message }}
  • Profile picture of the author Istvan Horvath
    No wonder I cannot stand "add-on" domains: I never use them and I've never seen one case when they didn't make a mess for an inexperienced user. They are the evil's invention, LOL
    Signature

    {{ DiscussionBoard.errors[7853307].message }}

Trending Topics