WordPress may just be the most versatile web app ever. You could use it to power your site or blog (as we do here at AppStorm), or you could turn it into an eCommerce store, discussion board, photo gallery, or almost anything else with the wide range of plugins and themes you can add to your WordPress install.
But what if you want to use WordPress to do something totally new? You could always code your own theme or plugin, but that can be rather daunting to new users. Even if you”re already familiar with web programming, you”d have to learn the ins-and-outs out WordPress before you could get started.
Before you start…
You won’t have to do too much to get started writing new apps inside WordPress with Script Manager. You’ll simply need to install the plugin on your site, or in a demo WordPress install on your own computer with tools like Wamp Server on Windows, MAMP server on a Mac, or XAMPP on almost any computer, period. Then, you can take a look at its documentation to familiarize yourself with its features. For the most part, though, if you’ve ever used a code editor, you should quickly feel at home coding in Script Manager in WordPress.
Now for the fun part: creating new features in WordPress with normal HTML, PHP, and Less code. We’re going to make a calculator in WordPress, which shows how much you can do with just a bit of code in WordPress, even if you really wouldn’t need a calculator in your site for real. We’ve included all the sample code in the article, so even if you aren’t a developer yet, you could still follow along with the examples. We’ll also use the following image assets in making the calculator, which you can download from the links below:
Getting ready to code in WordPress
The AppBar launcher HTML code is simply a wrapper for the icons of the actual programs. The code for the AppBar HTML is:
Most of the work is in the Less scripts for styling the application. You can use the following Less script for your own AppBar, replacing the image URLs with your own site’s URLs:
As you can see, the AppBar is simply a container that looks nice for the applications to place their icons. We can always expand on this idea, but we have enough now for working with our calculator application.
The Applicaton Skeleton
Before we get into the application, let”s create the framework for all applications that will use the AppBar. The basic framework is this:
The Calculator Application
Now, lets take that framework and start adding our app to it. The first part is the styling done in the Less script. We add it with the “CodeInsert” shortcode as follows:
Now, we insert the icon image for the calculator. I made it after designing the application by taking a screen shot of the actual calculator. Then I resized it for the icon size. Just copy and paste this code, again replacing the image URL with your own site’s image link once you’ve uploaded the image to your site:
Next, we need to design the calculator user interface. When you think about a calculator, the first thing you think of is buttons. A calculator is a display are with a lot of buttons underneath. Since I was experimenting with different ideas on making the buttons, I created a PHP script to create the buttons. I just called the PHP script with a different name for each button to make the button. So, go to the PHP tab, create a script called “calculatorbutton”, and place the following code there:
I used both methods of embedding a varaible into a string that PHP allows. I was having trouble getting the quotes around the button name for sending to the “cctCal.keyPressed()” method, so this finally worked for me. The button is nothing more than a styled div with the id for that button”s name. Once again, most of the fancy graphic work is done in the Less script.
To put everything together, place the following code into the calculator HTML after the icon:
As you can see, the calculator”s user interface is simply divs with unordered lists containing the buttons. The unordered lists makes spacing the buttons easier. The thing to notice here is how we pass the button”s name to the PHP code. We use the “CodeInsert” shortcode specifying the “calculatorbutton” PHP script with the “param” parameter set to defining the PHP variable “$but” to the name for that button. The “param” string is pasted at the beginning of the PHP script and evaluated all together. Since that string can be almost any size, you can really change the script with each calling of the script.
The calculator”s display is a span inside of a div for it. The div makes placement easier, while the span makes formatting easier.
Now that we have the structure for the calculator”s user interface, let”s style it with some Less code. In the calculator script under the Less tab, add the following code:
You will notice that I like to define several variables for colorization. Whenever possible, it is best to design in a way that can easily be changed. If you do not like the blue calculator, change the color values to something that is more suitable to your tastes. You do not have to hunt down all locations and figure out what needs changed. This helps down the road for specializing the same code for a different project as well. With plain CSS, you can not do it. But, Less to the rescue!
You will also notice that I defined two mixins (A term used in Less to define a CSS macro) for the buttons. The first defines the shading while the second describes the mechanics of the button. I used the website CSSButtonGenerator.com to help me define the shading for the button. Once I had the colorization I was looking for, I translated it to Less code and made all duplicate colors to a single define for that color. You will notice the “&:” used. This is Less” way to refer to the current element type. This allows the mixin to be used with any element in the HTML.
My favourite tweak is the “:active” CSS selector. For that selector, we make the element position relative and one pixel downward. This gives the button a look of being pushed down. It is a cute effect that gives the user more feedback, which hopefully makes them feel at home using the application.
The rest of the Less code defines the location and spacing for all the different elements. I used some “!important” tags to override some of the theme’s CSS. Depending on your theme, this may be necessary. It would be nice to define a div element in which all theme related CSS is ignored! An iframe tag would do just that, but it has too many other limitations to be useful.
display(): This method displays the current value in the “accum” class variable in a nice format for the screen. It also checks for the number being too large for the screen.
toggle(): This method simply toggles the visibility of the calculator. This is called each time the icon is clicked. The first time this is called, it will set the center of the browser window position as well.
reset(): This method resets the calculator to a beginning state.
keyPressed(): This is the main method for the calculator. In the beginning state, it keeps appending new numbers keyed in. When a function is pressed, the current number in the display is saved and the next state is started. Now, another number is created through the appending digits as before. When the equals key is pressed, the new number is stored also and the function pressed is performed on the two numbers. That new number is display and stored as the first number and the last state in set. Now, if the equal key is pressed again, the function last hit is performed with second stored number and the results of the last operation. When a number key is pressed, the reset method is called and the new number is stored up. All of this is handled by a few switch statements.
After all the code above is in place, you can now embed the code into the page you what to see it or you can make it standard for all pages.
To put it into a specific page or post, simply go to that page or post to edit it, click the “Insert Code” button in the editor. It will show you a requester for the code. When you set the language, the name selector will have the name of all the scripts for that language. Therefore, select “HTML” and “AppBar”. It will insert the following code into your post or page:
Now, when you visit that page, the AppBar will appear to the right of the browser window:
This picture was taken from the demo page for this application.
Now, when you click the calculator icon, the full calculator will appear in the middle of the screen. If you move it, hide it, and then re-show it, it will appear where you last moved it to. Coding that much in a normal programming language for a desktop application would take so much more code! This is easy!
If you want the AppBar on all the pages in your website, simply create a “wp_footer” WordPress Action and put the embed code in it. Now, every page in your website will contain the webapp. Or, if you only want the app to appear on certain pages, you could write some simple PHP script to control it.
To make more webapps to be launched, just follow the skeleton code for applications to be launched and create you new application. Add the embed code for your new application after the calculator’s embed code in the HTML for the “AppBar”. Now, every time you embed the AppBar, you will see the new application”s icon as well.
That’s it: you’ve just create a basic new app inside of WordPress with Script Manager! Perhaps you’ve never thought your blog needed a calculator, but this can give you an idea of what you can do. Feel free to check out the other Script Manager Tutorials for more ideas, or check out the Script Manager Forum to ask questions, share ideas, and more. Remember, your only limitation is what you can dream up!