Script Manager

The Script Manager plugin for WordPress gives you the power to take full control of your WordPress site. You can insert your custom scripts into any post, page, or widget area you want. You can also create actions and filters to further customize your Word Press site. There is nothing that can be done in another plugin that you cannot duplicate with Script Manager. You could even take the functionality of all your different plugins and put them into Script Manager.

Table of Contents

1. Screen Cast of Tutorial
2. Installation
3. Basic Usage
4. Script Editing
5. Shortcodes and Widgets
6. WordPress Actions
7. WordPress Filters
8. Customizing Script Manager
9. Example: HTML “Hello Box” with custom styling and effects
10. Conclusion

---

Screen Cast

This is my first attempt at a screen cast. I will work on it and improve it in the future. It at least gives you an idea on how to use the plugin.

---

Installation

On the Admin menu (to the left of the screen), you will see a “Settings” menu. Under the “Settings” menu, you will find the “Script Manager Options” submenu. That is where you will change settings for the Script Manager.

---

Basic Usage

To get started, simply select the language tab along the top that you want to use to make a script. Then select the “New” button to the left of the script list area. You will have to give your script a name and then click the “New” button under the name. After the server acknowledges the new script name, you will see the new script name in the script list area. After selecting the script name, you can add your script into the program editor at the bottom. The program editor will highlight the program according to the language syntax. If you want to change the colors, please go to the options page for the Script Manager.

To delete a script, simply select the script you no longer want and click the “Delete” button to the left of the script list area.

To rename a script, simply select the script you want to rename and click the “Rename” button to the left of the script list area. Then, simply supply the new name in the input area. Click on “Rename” button under the new name area to save the new name.

When you have the code you want, you can test most things with the “Test” button to the left of the script list area. This is an ajax call to WordPress to test your script. Therefore, some WordPress PHP functions will not be available.

Script Editing

Script Manager allows you to add many types of scripts into your WordPress page, post, widget, etc. Currently, you can add custom HTML, PHP, JavaScript, SQL tables, CSS, or Less scripts anywhere in your web site. We are looking to add even more language types in the future (like Node, Ruby, Pearl, etc).

An HTML script is great for creating iframe code that WordPress will not remove from the post or page. This is great for incapsulating Google Maps, Facebook connection pages, or anything else that the HTML editor of WordPress likes to mess-up. Or, you can simply put code that you like to reuse on other pages. CSS and Less scripts are great for changing the appearance of your themes, or simply adding styling to your HTML code. PHP scripts are for adding functionality from the server side. JavaScript scripts are great for user side processing of data or for that extra flare in the user interface of the web site. SQL tables can also be placed where ever you need a special table. All of these can be combined to great dynamic web apps inside of WordPress.

With Script Manager and your imagination, any type of website or web-app can be created. We will help spark your ideals in our tutorial area of the website. You can also get many other ideals from just viewing other sites on the web. Once you have the basic idea of what you want, just use Script Manager to manage your code and help you put it all together.

The edit area has some buttons at the top as well. These buttons are to help you edit your code.

The first icon is the “Save” icon. When you are ready to save your current work, simply press the save icon. The wait indicator under the “Test” button to the left of the script list area will show up while waiting for the server.

The next icon is for full screen editing mode. That will make your edit area as big as possible on your current browser size. To make completely full screen, simply invoke full screen mode of your browser as well. Please make the browser full screen first, then your edit area.

The next icon is the “Undo” and “Redo” buttons. The “Undo” button will undo up to the last 10 edits. The “Redo” button simply recreates the last edits that were undone.

The next icon is the “Goto” button. When you press the “Goto” button, an input box will appear right above it. Put the line number you want to go to and re-click the “Goto” button. The cursor will immediately go to the specified line number and the input box will disappear.

The next icon is the search and replace button. When you click on it, an input area appears above the icon for putting in the search criteria. You can do normal searching or regular expression searching. Simply check the regular expression box for performing a regular expression search. Once you have your search criteria in the search box, press “find” to go to the first occurrence. If you want to replace it, put the string you want to replace it with in the replace box and click “Replace”. If you want to replace all occurrences of that string, simply check the “all” box before pressing “Replace”.

On HTML scripts, there are two more icons in the editor: Insert Code, and Highlight code. If you press the “Insert Code” icon, a pop-up will ask you for the language, script name, and parameters for the script. Then a shortcode for that script will be placed in your HTML script right where the cursor last was. The “Highlight Code” does the same, except the script will not be inserted, but the code will be inserted with the proper highlighting for that language. If “none” is selected, then the code highlight shortcode will be inserted with an open/close structure. All code in the middle will be displayed just like it came from the database. These buttons are also available on the TinyMCE and HTML editors for the add/edit pages, posts, etc.

Shortcodes and Widgets

This plugin comes with two shortcodes: “CodeInsert” and “CodeHighlight”. These shortcodes are only available anywhere HTML is placed. If you define shortcodes inside of your HTML script, they will also be expanded. Please be careful to not have shortcode loops: shortcode that expands to the current shortcode that expands to the current shortcode…. That can very quickly kill your server.

Both shortcodes have the same inputs: “lang”, “name”, and “params”. The “lang” parameter specifies the language of the script. It can be “HTML”, “WPPHP”, “JavaScript”, “CSS”, “SQL”, or “Less”. “WPPHP” is a PHP script that uses WordPress functions. Your PHP script does not have to have WordPress functions. We only make the distinction for future expanding to a PHP ajax call that does not load any WordPress functionality for speed. The “name” parameter specifies the name of the script. The “param” parameter allows you to add customization to a script call. For HTML, PHP, CSS, and Less, whatever is in the “param” field is appended to the top of the script. JavaScript appends it to the bottom of the script. Most often, this will be used to set variables inside of your script.

On your widgets page, you now have a new widget called “Insert Script”. Place this widget in any widget area, specify the parameters, and off you go. It is a very easy way to add scripts to any location your theme defines as a widget area.

Word Press Actions

WordPress allows you to expand and/or modify the behavior of WordPress by the use of Actions and Filters. The only difference between actions and filters is their basic functions. Actions can do anything, can have inputs, and can have outputs. Filters always has an input that your function is to modify and return. Actions can act like filters, but really filters cannot behave like Actions.

To add to a new Action, simply go to the Actions tab and click “New”. You will be requested for the name of the action, the priority of the action (default is 10), and the arguments for the action. If that action, like ‘wp_footer’, does not have any arguments, simply leave that field blank. Click ‘New’ and you just added your new hook into a WordPress Action. Now select your new Action, add code in the code edit area, save, and you are now hooked in to a WordPress Action. Be careful, bad code will literally crash your web site. It is best to test such code on a local computer test site before using on the web itself.

Actions are processed like HTML. Therefore, you can add anything that you can write HTML for: insert PHP code, insert JavaScript Code, use any WordPress shortcode, or just HTML. The parameters are set by a PHP assignment statement for actions that have parameters (arguments). Your script just uses them as it would normally.

Word Press Filters

WordPress allows you to expand and/or modify the behavior of WordPress by the use of Actions and Filters. The only difference between actions and filters is their basic functions. Actions can do anything, can have inputs, and can have outputs. Filters always has an input that your function is to modify and return. Actions can act like filters, but really filters cannot behave like Actions.

To add to a new Filter, simply go to the Filters tab and click “New”. You will be requested for the name of the filter, the priority of the filter (default is 10), and the arguments for the filter. Click ‘New’ and you just added your new hook into a WordPress Filter. Now select your new Filter, add code in the code edit area, save, and you are now hooked in to a WordPress Filter. Be careful, bad code will literally crash your web site. It is best to test such code on a local computer test site before using on the web itself.

Filters are processed as PHP functions. Treat the script area as the body of a function with a return at the end of the script.

Customizing Script Manager

The Script Manager has many options that you can configure. These options allow you to customize the Script Manager to your particular installation. The options are in two category: General and Theme. The General options allow you to configure how Script Manager works. The Theme options allow you to configure how the editor and code formatter looks.

The General options currently has one thing to configure: Execution directory. This is the directory in which the scripts will be executed. Therefore, if you want links in your web site for files in a particular directory, your script will always know what directory you are executing the script. This helps to protect location of administration files and gives consistency to the execution of the scripts. For instance, the execution directory for ajax calls in WordPress is different from normal calls.

The Theme options page allows you to change the color of the code highlighting in the editor and code highlighting shortcode. Therefore, you can change the colorization to match what you like, or the coloring of your web site.

To change the color, just put the hex value of the color in the input area in front of the type of code you want to changed. Make sure you remember the ‘#’ symbol in front of the hex number. When you change the number and exit the input area, the color to the right of the value will change to the color you indicated. If you click color area, a graphical color picker will pop-up for changing the color value. Clicking the color box again, or a different color box, will close that color picker.

Example: HTML “Hello Box” with custom styling and effects

To help you see how to use this plugin, I will do an example of the classic “Hello World” type program in HTML, style it with Less, and make it do special things with JavaScript. You will see first hand the use of shortcodes to embed scripts and display code with code specific highlighting.

Okay, let’s start with the basic HTML. Click the HTML tab. Then click on the New button to the left script view area. The script view area will now look like this:

After you type in the name of the script, “hello”, click the new button under the name. After sending this to the server, you will see a new list of scripts with the “hello” script there as well. Select the “hello” script.

Now, in the edit area, type in the following (this is inserted with the CodeHighlight shortcode!):

<div id='hi'>
   <p>Hello World!</p>
</div>

Save this script. If you want, click the “Test” button and see what we have.

Pretty plain, but it is a start. Now we need to do some formatting. We can use Less is create special formatting for this script and place it right inside of the original script. Select the “Less” tab and then click the “New” button. Put the new style name as “hello”. You should now look like this:

In this script, put the following code (inserted from the database this time):

@themecolor: #fce4c2;

.rounded (@radius) {
   -moz-border-radius: @radius;
   border-radius: @radius;
}

#hi {
   padding:       10px;
   background:    darken(@themecolor,20);
   margin:        0px auto 0px auto;
   .rounded(10px);
   box-shadow: 10px 10px 5px gray;

   p {
      .rounded(10px);
      padding:       10px;
      background:     lighten(@themecolor,20);
      margin:          0px;
      text-align:     center;
   }
}

Less is a pre-processor for CSS styling. Here, you can see some of the features of Less. To learn more about Less, please read the LessCSS.org website for a description of the language. With Script Manager, the Less JavaScript engine is always loaded and running.

Now, go back to your HTML script, and put the cursor at the top. We will now insert the Less script into your HTML script. At the top of the editor, you have two buttons to the right. If you hover over them, they will tell you what they do. Click the button for “Insert Code”. You should see the following:

Your HTML code should now look like:

[CodeInsert lang='Less' name='hello' param='']
<div id='hi'>
<p>Hello World!</p>
</div>

When you run “Test” this time, you will see:

Now, you can either embed this code into your page, post, or any custom post type you want. The following is what it will look like embedded in a page:

Even better, you can turn this into a widget by including the “Insert Code” widget in a side panel area, set the language to HTML, the script name to “hello”, and you are done!

When you view the side panel, you will see this:

For an example of including JavaScript, we will add a small script to make the “Hello World” disappear! First of all, create the JavaScript by selecting the “Javascript” tab, then selected the “New” button and give it the name ‘hello’ as well. We can have the same name in each of the language tabs without any problem.

Now, we just need to add the following code:

//
// Get the node by it's ID and set the onClick to a function for causing the div to disappear!
//
jQuery('#hi2').click(function() {
   jQuery('#hi2').remove();
});

All references to jQuery in your scripts will have to be done like this. WordPress only loads jQuery as the ‘jQuery’ identifier and not ‘$’. Since jQuery and jQueryUI are included in WordPress, you have a lot of JavaScript tools to use in the writing of your code.

This jQuery code attaches an un-named function to the onClick event for that div. When clicked, it will remove the div with the id ‘hi2′.

Use the code insert button to place this code at the end of the HTML. That way, the HTML id of ‘hi’ will already be defined and the JavaScript code it catch it right away. Otherwise, we would have to encapsulate our JavaScript code in more code to wait upon loading the full page to run. This way is easier.

The full HTML code should now look like:

[CodeInsert lang='Less' name='hello2' param='']
<div id='hi2'>
<p>Hello World!</p>
</div>
[CodeInsert lang='JavaScript' name='hello' param='']

Now we can embed this code in the page with the insert code shortcode. I actually renamed the script to ‘hello2′ for showing the development of the code. Since I already have it embedded once with the id of ‘hi’, I also had to change the id to ‘hi2′ and create a new Less script for working with this new id. But, if you are following along with your own test site, you will not need these others. Just adjust the ids back to plain ‘hi.

Now our ‘Hello World’ will disappear when you click on it! Give it a try below.

Conclusion

That is how to use the Script Manager Plugin in a nut shell. You can learn so much more by reading the other tutorials to help you understand it better. Have fun coding!