Hi @zzlatevv,
Yes, it is definitely possible. You can create a shortcode with all the HTML, CSS and JS code.
If you have those as separate files, then you can upload them to your site and use the respective syntax to import those files like here – https://betterprogramming.pub/link-css-and-js-files-with-html-file-f848d00b42e8
Thanks,
Aakash
Hi @vaakash, can you please help me to create a shortcode with all the HTML, CSS, and JS code? Do you mean I have to link the CSS and JS files into the HTML code, and that would be enough? Do I only have to add the HTML content as content to create the shortcode?
Hi @zzlatevv,
Yes, you can copy paste the HTML, CSS and JS inside the shortcode content in the editor.
Linking the files are optional. You can link if the CSS, JS are present as separate files (i.e css or .js)
If you have free flowing code, then you can follow this link to paste them inline – https://www.keycdn.com/support/inline-small-css-and-javascript
After pasting the content, just save the shortcode. Now you can use the shortcode anywhere in your posts and pages. Whatever code you have pasted will be available whereever the shortcode is used.
Please share more details or screenshot if I’m not clear or if I misunderstood your query.
Thanks,
Aakash
Thank you so much for your reply, Aakash! Yes, that’s exactly what I’m looking for, but it doesn’t work on my end after adding the code of the 3 files inside the shortcode content.
I will try to link the files into HTML and get back to you.
I’m trying to create a Google Map if this matters. Here are the files:
https://developers.google.com/maps/documentation/javascript/custom-markers#maps_custom_markers-javascript
Hi @zzlatevv,
So the google map needs CSS, JS and HTML.
You can wrap the “CSS” with the “style” tag and JS with the “script” tag. Then paste HTML as is. Follow the link in my previous reply for more details on that.
For this specific Google maps use case, I would suggest just copy paste the code as is without linking.
Thanks,
Aakash
Hey again @vaakash,
For this specific Google maps use case, I would suggest just copy paste the code as is without linking.
Do you mean that I have to copy-paste the whole code as-is from the files(HTML, CSS, and JS)?
Is it possible to send you the files so you can check if it works? It doesn’t work on my end, unfortunately.
