Wordpress basic 'bootstrap' code for plugin development - javascript

I have made code (on a local machine) using Brackets and Theseus plugin. Everything works fine there. The problem is when I try to take it to a Wordpress installation.
There are many pieces to doing this; and, unfortunately, what I can get to work in Brackets in 10 minutes seems to take 100 hours to put into Wordpress. Is there some kind of basic "bootstrap" code or some kind of plugin out there that will allow one to get their code in to wordpress (on either the Admin side or Front-end side) easily - given one has a .js file, an index.html (or index.php) file, a .css file that allows for AJAX functionality to take place?
What would be good is to just make changes in files (i.e. variables) and filenames just to get going?
I guess the mods are going to try to down this question - but - I am just so sick and tired of trying to get my WORKING code into Wordpress.
Thanks!

Never mind. The problem was the implementation of AJAX under Wordpress.
These items helped me solve this problem:
How to implement jquery ajax in wordpress
https://www.youtube.com/watch?v=ipO3OrN6n2w
following tutorials here: https://www.youtube.com/watch?v=Cz-HImr6hQM
I would like to give ONE MILLION kudos to the guy who produced the "How to implement jquery ajax in wordpress" - it answered ALL my questions in just a few minutes.

Related

Can I create a WordPress plugin with JavaScript only?

I am scared to ask this question, because StackOverflow is already warning me about my question being likely to be downvoted. But I am very curious about this.
I have read that you must have at least one php file in your WordPress Plugin. Which sounds to me like you only need something like an index/entry php file.
However, I wasn't able to find much about JavaScript in WordPress Plugins by using google. Which seemed weird to me, because we're talking here about the web of 2017.
An answer would be very appreciated!
The answer is no, you cannot, as you have referenced in your question. By definition, a plugin is at the very least a "PHP file with a WordPress plugin header comment" (Wordpress Docs).
However, there is no reason a Wordpress plugin can't be primarily Javascript. You can follow this guide for some different approaches to include it in your plugin.
Since WordPress is (basically) purely php, then all its plugins will also be php. This is they way it has been set up.
In order to have a 'WordPress plugin', yes you will need at least one php file to register to WordPress and enqueue your javascript/css/what-have-you..
This means if you want something like React/Ember on your WP installation, they aren't going to be 'WordPress' plugins, they will belong to the React/Ember ecosystem. You will just have the minimum to enqueue the javascript libraries you want to use.
You can then use your javascript frontend and talk to WP's REST API, and now WP has basically become your server 'framework'.
So, no, there's no such thing as a 'JavaScript WordPress Plugin'. But you can have a plugin that includes as much fancy JS as you may want.
The following article should give you insight about this.
Your WordPress Plugin must have at least one PHP file; it could also contain JavaScript files, CSS files, image files and language files. If there are multiple files, pick a unique name for a directory and a name of your choice for the main PHP file. (This file name is often, but not essentially, the same as the directory name.) Example directory and file names could be mycompanyname-fabulous-functionality and mycompanyname-fabulous-functionality.php respectively. Put all your Plugin's files into the directory you've created and tell your Plugin users to upload the whole directory to wp-content/plugins/.
Hope this helps. But no, you can't create a Wordpress plugin with only Javascript.

Multiple javascripts solution

I Have created a flatfile based cms. PHP and jquery mostly. It is very dynamic and easy in use. I have 3 javascript includes for juery and other functions. This is for the main cms files. So that is quite allright.
But i have written multiple plugins/addons for he cms, also jquery and php, guestbook, comments, rating system, album galleries, site search,.... The problem is that each plugin has javascripts included. And i need to include all scripts in the head part of my main cms in order for the plugin to work on the cms. Now all javascripts get loaded every time the page reloads or if u click a link. That gives many http requests wich slows the cms down. About 15 javascrip files are included in the head now
Is here a way i can load only the needed javascript files and not all of them with a function of some kind.
i tried to compress all the javascript into one file, but that gives errors...
I hope my question is clear in my bad english :)
thx for any response
The tool you are looking for is called grunt.
http://gruntjs.com/
You have over 2000 packages for doing many things and one of them in concatenation and minification.
grunt-contrib-cssmin
grunt-contrib-uglify
grunt-contrib-concat
the list goes on an on, but check 'em all here.
https://github.com/gruntjs/grunt-contrib
grunt is a little confusing the first time you see it, but there are heaps of resources for it and also heaps of stackoverflow examples.
Once you go grunt you never go back!
I'd think you can merge all javascript files and then minify it. are you using double function names or do you have javascript code outside of functions? maybe that is what is throwing up your errors.
would leave you with only one request to retrieve all your javascript functions , and you would only need to minify / compress one file.

NetBeans: Javascript Code Completion doesn't work as expected

I've just started using NetBeans (PHP version 7.2 for Mac) and love it so far. One thing that I haven't been able to figure out is how to get Code Completion to work for Javascript files in the same fashion as it does for PHP, CSS and HTML files. For example, if I type "fun" in a PHP file, it'll pop up a box that allows me to choose "function":
If I do the same thing in a Javascript file, I get nada:
I've looked all over the place and I have not found a way to add this functionality. Your help would be greatly appreciated.
For this example, try the Source-> Complete Code command (Ctrl+Space by default).
In any case, the JavaScript editor is currently being rewritten from scratch so better code intelligence is to be expected in the near future.
Edit: I almost forget the most obvious answer... Make sure your file belongs to a loaded project. Code intelligence doesn't work properly outside projects.

Javascript Wordpress Stopped Working

Can anyone quickly look at this and see why jquery doesn't seem to be working? It was working earlier today, and I'm not sure what I could have touched that would cause it to stop.
I have a jsfiddle set up here: http://jsfiddle.net/Nqdb3/
But if that's not good for troubleshooting this I can provide the actual site.
I couldn't log in, But I can tell you that many times I have encountered jQuery problems in wordpress both in admin and front end.
These usual suspects are plugins but it happened to me in the past without even touching the site.
1) start disabling all plugins one by one - this will eliminate the possibility of different scripts that cause it. If you were lucky, you will discover the culprit.
2) upload the js folder from the same wordpress installation.
-- download the same version you already have
-- upload the js directory under wp-includes - all of it. and replace your current directory .
For me it worked many (many) times.

Problem porting WordPress Editor to a non-WP application

I like the look and feel of the WordPress editor (version 2.7), and I would like to use it in another web application that is written in ASP.NET. I've used TinyMCE before, and I've even extended it in the past. However, I can't seem to get the Wordpress configuration to work!
I've downloaded the entire WordPress package and taken the TinyMCE code (from the "js" folder) and put it in my web site. It ends up giving me an error on the following line of tiny_mce.js
return f.apply(s||this,Array.prototype.slice.call(arguments,2))
'undefined' is null or not an object.
Now, I've carefully made sure that the steps of execution are identical with the WordPress demonstration site that I've based this from.
I'm not a Javascript newbie (at all), but I can't seem to figure out why this is not working. Has anybody tried to do this before? What am I missing?
A demo of what I am talking about is here (username="admin", password="demo"). View the source, I have the three parts of Javascript that are (seemingly) required to power the editor.
Something of a stab in the dark, but I'm suspecting that there's a dependency on WP's prototype.js and you didn't bring that over with TinyMCE.
If you are able to determine which bit is undefined that might give you a clue. I tried looking at the demo with firebug, but tinymce.js was all one line, so I gave up trying to find that code.
Try putting in either some console.log() if you have firebug, or alert()s before that line, and try to see what f,s,this,arguments etc are when yu get the error, then do the same thing with a vanilla WP install and see the difference?
I suggest including the tiny_mce_src.js istead of the minified version, this way you can use firebug to debug and receive helpfull information.

Categories

Resources