Wordpress Popup System Tutorials

DHTML Popup Windows for WordPress made easy

The use of the plugin is intuitive and straight-forward, with a set of simple options to select from. The tutorials coming will deal with complex projects involving iframes and video. Any problems in any case just contact support.





General instructions for either mode

Mode selection

When you start using the "WordPress Popup System" you can choose which mode to use. Standalone-mode is exactly as implied, nothing else is needed to create your projects. ADP Pro-mode requires Advanced DHTML Popup (see here). Therefore if you have ADP Pro use the pro-mode, otherwise use the standalone-mode.

Numeric id

Each project or popup has its own id number, and this is the Numeric id. Select this when starting a new project. If the display location for this project is to be a particular post or set of posts then the tag provided is to be placed in the content of the post(s). This is removed when the post is viewed.

Config file

In the root of the installation folder is a config file "adpconfig.ini". You may use this to modify certain values, for example the number of projects that are shown by default in the drop down list of projects. Open this file in a plain text editor and change the number to that desired:

numericIdentfiers = 30



Standalone mode


Basic content popup general instructions

  1. Select an unused project id in the top form

  2. Choose a location for display from the options provided. If you select to display in a particular post then enter the tag indicated in that post (and any other posts you wish to display that popup)

  3. Give your project a name (or use the default provided)

  4. Enter a URL to an external file or website.

  5. Set the title of the popup

  6. Set the frequency of display and the size, colors etc.

  7. Click on "Update options" to preview, and check the blog for the appearance of the popup.

  8. For notes on multiple layers in either mode see below




Advanced DHTML Popup Pro mode


General instructions

  1. In this mode you create your popup first in ADP Pro and then upload the project folder using your ftp program.


  2. Remember to specify the path to close/resize images when compiling in ADP under the advanced reference tab. Typically this path will be "wp-content/plugins/adp-pro/myprojectfolder/".


  3. Create a folder under the "plugins/adp-pro" folder with the same name as your ADP project (no spaces or special chars allowed) and upload all the compiled output files from ADP into this folder.


  4. In the plugin interface type choose the unique id for this WordPress project, set the location and type in the name of this folder into the text box provided and click update.


Multiple layers - either mode

In either mode it is possible to have multiple projects across different blog posts. This is what the different project id's are for, and if each project is assigned to a different post via the tags (#adp01, #adp02, #adp03 etc) then this is immediately achieved.

So your first project could be assigned to the home page and multiple projects after that assigned to different posts. If there are not enough uid's (unique id's) available then you can increase them in the config file as described above. Our own blog has over 20 different projects showing at any time.

A slightly more complex scenario is to have one project assigned to all posts (choose option "All posts & pages") such as an optin form, but you also want one or more posts not to show this and to show something different.

In this case you must use the negating tag #notadp01 (if the first project is the all posts project) on the post where you want the alternate project to show (by using the tag for that project e.g. #adp02).


Multiple layers - ADP-pro mode

Using ADP Pro you can add multiple projects to a single post (as well as in the manner described above). This is done within ADP and we refer you to the manual for ADP under the section "Multiple Layers".


Video plugin projects

These instructions apply to the video plugin with example at here but may also be useful for general iframe'd content projects where the paths must be set similarly to here.

  1. It is assumed that you already have an ADP video project working, if not see here or the help file and do this step first. Ensure that the path for the close/resize images (if used) is set in the advanced reference form to "wp-content/plugins/adp-pro/images".

  2. In addition, change the path of the source of the iframe (src) to match your blog path and project folder (see next point). In the demo this is "wp-content/plugins/adp-pro/defaultvideo/default_player_content.html". So the content in ADP now looks like

    <iframe src="http://www.embedyourvideo.com/blog/wp-content/plugins/adp-pro/defaultvideo/default_player_content.html" name="adpiframe" id="adpiframe" width=100% height=100% align="center" Frameborder="0" Scrolling="no" marginheight="0" marginwidth="0" allowtransparency="true"></iframe>


  3. Create a folder under the "adp-pro" plugins folder with the same name as the ADP project and upload all the project files directly into it. The path in the example given here is "blog/wp-content/plugins/adp-pro/defaultvideo" and all the ADP project files were uploaded into "defaultvideo".

  4. Choose a free numeric id in the plugin interface using ADP-pro mode and insert the name of the project into the text box as with any other project.

  5. Create a post and follow the instructions in the plugin interface (very simple, just enter e.g. #adp24 or whatever the numeric id of the project is). Publish the post and test.

  6. To make a link triggered video simply enter the link syntax provided by ADP into the body of the post with one small modification - add in "adpContent('ADPAlphaFlash',htmlstring);" to the syntax. The whole code might then look like this:

    <a style="font-weight: bold; color: #1c5ea2;" onclick="adpContent('ADPAlphaFlash',htmlstring);adpShow('ADPAlphaFlash');return false;" href="#">Click here to see demo</a>

    Where it is assumed that the unique ID of the ADP project is the default "ADPAlphaFlash".


Footer plugin projects

The WordPress Popup Plugin has been designed to make ADP projects very easy to add to a WordPress blog. After creating the project with ADP all that is required is to upload the entire project folder to under the "adp-pro" plugin folder.

There are just two requirements as stated in the plugin instructions: -

1. The name of the folder containing the project must be the same as the name of the project. So if you save your ADP footer project as "myfooter1" for example, then make a folder called "myfooter1" and save the project into it. Then when you are ready you can just upload that whole folder and enter the name of the folder into the plugin options panel.

2. The paths of images for your footer project must be set correctly. They can be absolute or relative paths to your project folder from WordPress. For example a relative path would be like this:

wp-content/plugins/adp-pro/myfooterproject/style1-blue/bg.png

Or you may find it simpler just to use absolute paths like this (which also means that the images will remain visible in ADP):

http://www.mywordpressdomain.com/blog/wp-content/plugins/adp-pro/myfooterproject/style1-blue/bg.png

There are 4 places in a typical footer project where you must set these paths, locate these sections in the ADP editor window and change the paths:

The first 3 are all at the top:

#adpcontent a img
{
border:0px;
width:25px;
height:25px;
behavior: url("style1-blue/iepngfix.htc");
}

#bglayer
{
height:200px;
background:url(style1-blue/bg.png) repeat-x  left bottom;
width:100%;

}
#adpcontent
{
height:200px;
width:100%;
background:url(style1-blue/pop.png) no-repeat  left top;
margin:auto;
behavior: url("style1-blue/iepngfix.htc");
}

Then the last one is for the close button at the bottom:

<a href="javascript:void(0)" onclick="adpHide('footer')" class='close'><img alt='' src="style1-blue/close.png" /></a>

So using our path example we just add "wp-content/plugins/adp-pro/myfooterproject/" to each of these:

#adpcontent a img
{
border:0px;
width:25px;
height:25px;
behavior: url("wp-content/plugins/adp-pro/myfooterproject/style1-blue/iepngfix.htc");
}

#bglayer
{
height:200px;
background:url(wp-content/plugins/adp-pro/myfooterproject/style1-blue/bg.png) repeat-x  left bottom;
width:100%;

}
#adpcontent
{
height:200px;
width:100%;
background:url(wp-content/plugins/adp-pro/myfooterproject/style1-blue/pop.png) no-repeat  left top;
margin:auto;
behavior: url("wp-content/plugins/adp-pro/myfooterproject/style1-blue/iepngfix.htc");
}

a href="javascript:void(0)" onclick="adpHide('footer')" class='close'><img alt='' src="wp-content/plugins/adp-pro/myfooterproject/style1-blue/close.png" /></a>

Transparent Player projects

  1. If you are working with the Transparent Player then ensute you check the checkbox for these projects called "This is a transparent player project:".

  2. Get your project working and tested first before putting it into wordpress. You are free to use any of the methods and properties that the script and player provides.

  3. Upload the entire project in the "tplayer" folder via ftp into the plugin folder under "adp-pro".

  4. Paste the script line (without the script tags) of your project as it is into the project textbox provided in the plugin, e.g.:

    tplayer/scripts/tplayer.js?uid1=tplayervideo2;uid2=tplayercustom2;uid3=tplayeryoutube1

  5. Enter into the post not only the plugin tag required (e.g. #adp01) but also any player commands or anchors required, exactly as you have already done in your project.


See the blog for the latest examples of both the transparent player and ADP projects.