I currently have a simple html page that utilizes an angular script to fetch json content and arrange it into a table. nothing all that complex.
I've been asked today to have it so that it could be included as a plugin anywhere in a wordpress site. As someone that has never used wordpress before, I'm wondering if there is a simple way to do this, or indeed if it is possible at all. Answers that I have found are either unrelated to the issue that I have, or are incredibly old.
If you don't care about making it a plugin exactly but instead a snippet you drop into a page is fine then I would suggest using a page template that loads the angular js files and sets up the overall HTML and inits the app.
Related
Sorry if this question sounds stupid but im a noob with wordpress.
I am a javascript developer, and I want make a little game (or games) with wordpress. Opening main page there is a sliding puzzle. After complete, a button appears and clicking there you pass to another page. This is basically the same to all pages.
But I can't find were i put my javascript or HTML code. I create the pages but I can't edit them the way I want, everytime i try to do it i only can edit like word. I cant create, change or edit divs attibutes or tags. To be honest the only thing i can edit is CSS in stylesheet, but is too limited.
I have done the search, try found a solutions or ways to done it but when i look to tutorials is all diferent from what i see.
to give you an ideia I want to do a mix of this:
-> http://www.rustylake.com/room-escape-games/cube-escape-case-23.html
and this
-> https://ebonyriddle.com/
but i don't know how to edit page to page.
can you help me?
Thanks for everything
PS: I know I can do it without Wordpress, but I want use it anyway to learn more about the CMS (because of work) maintain website structure and later learn how to do my own templates or plugins.
To answer your question directly, yes it is possible (and easy, relatively speaking) to add custom code to every page / post of a Wordpress site.
More generally, you’re talking about creating a custom Wordpress theme, which you can find out more about here:
https://codex.wordpress.org/Theme_Development
and here:
https://developer.wordpress.org/themes/getting-started/ (Good suggestion from #ItsGeorge)
Regarding adding custom JavaScript to a theme, your files will need to be enqueued as per these instructions.
Outlining the steps involved in Wordpress theme development would go beyond the scope of your question, but there are plenty of resources online and answers to Wordpress specific questions on wordpress.stackexchange.com. You will need to familiarise yourself with php as well as JavaScript, to take full control of Wordpress.
I would say that developing a game feels like an odd fit... If learning Wordpress is your objective, a blog or personal website might be a better place to start, then you could move onto a game once you are familiar with the concepts involved, e.g. the loop, which plays a huge part in how Wordpress works
Good luck!
The primary focus of WordPress is to put HTML code and JS out of the user. You might manage your extra JavaScript files with your theme customization. If you want to get more control about how your pages are rendering, you should use action hooks and filters. The simplest way for you is to override each page template like this
https://developer.wordpress.org/themes/basics/template-hierarchy/#single-page
The preferable resource to ask Wordpress related questions is https://wordpress.stackexchange.com/
I would like to use Scratchblocks (a tool for rendering visual Scratch code blocks from a text listing, on GitHub) on my Squarespace website. The problem I am getting is that the scratchblocks are never rendered on the first load - but only after a refresh.
This is in the header (set in the header for that particular blog):
<script src="https://scratchblocks.github.io/js/scratchblocks-v3.1-min.js""></script>
Then I think I need to call this function at the end of the page - I've put it in the footer:
scratchblocks.renderMatching('pre.blocks');
NOTE: When I view the source I sort of see this JavaScript twice at the end of the page. Not sure what is happening there.
Here's an example of it on my website, where it renders the scratchblocks only after a refresh. [UPDATE - following the fix provided below, this now renders first time, every time as far as I can tell.]
[http://www.glennbroadway.com/coding-zone/2017/4/6/simple-collisions-in-scratch]2
Here's an example of someone else using it and it working properly. I've inspected the source and I can't work out how they are doing it.
https://codeclubprojects.org/en-GB/scratch/memory/
I've also tried all the different methods listed elsewhere on stackoverflow for getting javascript to load only after the HTML has finished. I can't get any of them to work - but I think the problem is something to do with Squarespace, I just don't have the knowledge to work out what.
Any help would be greatly appreciated.
In Squarespace, when your custom Javascript only works after a page refresh, it most likely has to do with Squarespace's AJAX loading:
Occasionally, Ajax may conflict with embedded custom code or anchor
links. Ajax can also interfere with site analytics, logging hits on
the first page only.
You may be able to disable AJAX for your template. Or, see the other approaches outlined here: https://stackoverflow.com/a/42604055/5338581 including:
window.addEventListener("mercury:load", function(){
// do stuff
});
In addition, I would generally recommend placing custom code in the "Footer" code injection area unless you have a specific reason to do otherwise.
I am responsible for maintaining 2 websites. One is a Wordpress website that is just a list of events using Time.ly's All in One Event Calendar plugin. The other is a conventional built from scratch website using html.
The html website has had code that embedded the Wordpress calendar feed into it for several years, and it's always worked fine and I haven't had to do anything with it. Recently, it just stopped working. The calendar feed is just gone with no errors returned, no problems loading the site or anything. It looks as if somebody just deleted the code for it. However, the code is still there and is as follows:
<script class="ai1ec-widget-placeholder" data-widget="ai1ec_superwidget" data-action="stream" data-tag_ids="45">
(function(){var d=document,s=d.createElement('script'),
i='ai1ec-script';if(d.getElementById(i))return;s.async=1;
s.id=i;s.src='http://www.texascitycommunitycalendar.com/?ai1ec_js_widget';
d.getElementsByTagName('head')[0].appendChild(s);})();
</script>
Can anybody identify any obvious reason that that might have just stopped working?
I don't see a reason for that very last () pair in the script tag (just before the semicolon that is followed by the closing </script>tag. Try to erase it.
Hi folks I am building a CRUD system very similar to this example http://jsfiddle.net/rniemeyer/WpnTU/.
Context:
I have several HTML pages that each contain the same table of data but showing different information (each page have their diffirent use).
On each row theres an edit button like yuo see in the example. Since the modal form is the same accross all the HTML pages I decided to create one HTML page containing the modal form. I then use jquerys load function like so $("#load_modal").load("pages/modal_form.html"); on each of the HTML pages.
Problem:
On a basic HTML page this is working out great. I tought this was a brilliant approach and gave myself a pat on the back. But now the problem I have is that when started implementing knockout it dosent seems to be working together very well. Modal dosent always pop up correctly and such.
My question:
At this point im not looking to figure out my code issue. I spent days and weeks staring at it and I came to the conclusion that I need to rethink my approach altogether. Im curios to hear some of your opnions on what would be the best aproach to tackle something like this.
Ideas so far:
I found this https://github.com/rniemeyer/knockout-amd-helpers/tree/master/examples But dosent use the latest knockout version and seems more complicated for something simple I need.
I also saw that using requireJS would be another idea but honestly these seem to complicate things for me.
Would anyone know of a simpler template solution or even have a whole different approach to this?
Using jQuery to modify your DOM is not going to work well in Knockout. You can use components to define the form HTML. Use an observable to switch which component is displayed.
I'm working with a third-party salon booking "plugin" (really just an iframe that loads their own booking tool... Vagaro is the name of it if anyone's had experience with it), and I want to be able to load it in the iframe with certain options already selected in their drop-down forms.
However, Vagaro itself doesn't have this capability built in to its code, so it's not as simple as just passing some parameters/variables through the URL. I've tried that a few different ways, (...?service=womenshaircut&serviceprovider=anne, for a simplistic example) and it's just not something that their tool is built to do.
Is there any sort of script to force these forms to select options of my choosing when loading their page into an iframe on my own page?
Sorry I can't include any example code. Since their page is obviously not my own work, I probably shouldn't copy/paste any of it here. But hopefully the idea explained is simple enough that you guys might understand it.
Thanks!