Creating an Iframe Plugin for WordPress

Creating an Iframe Plug-in for WordPress

 

What is an Iframe?

 

An iframe is a piece of HTML code which allows the user to insert another HTML page into their website.  It would generally be used in situations such as ecommerce websites to display products or display documents such as PDF’s.

Iframes are generally fairly easy to implement and use if you are wanting to display a static webpage.  However, if you are wanting the webpage to refresh, that may be more difficult.

Creating your own Iframe plugin.

 

WordPress plugins are written in the coding language of PHP, however you are easily able to implement aspects of Javascript and HTML (such as iframes and later the javascript to refresh said iframe).

First of all, you will need to have a basic plugin structure. This is exampled here:

<?php

/**

* Plugin Name:

* Author:

* Version:

* Description:

*/

?>

You would need to fill in each of the descriptors for the information of your plugin, such as author and plugin name. Then between the latter */ and ?> is where you would write your plugin code. A simple iframe plugin would look like this:

<?php

/**

* Plugin Name: example

* Author: Thomas Handley

* Version: 1

* Description: Example simple iframe

*/

function kartFrame () {

    return (“<iframe frameborder=’0′ allowtransparency=’true’ src=’www.google.co.uk’ name=’google’ width=’1400′ height=’1050′ scroll=’no’></iframe>”) ;

}

add_shortcode (‘example’, ‘example’);

?>

To explain the parts of the code:

function kartFrame () {

This part of the code originally creates the function in which you are calling to show the iframe.

    return (“<iframe frameborder=’0′ allowtransparency=’true’ src=’www.google.co.uk’ name=’google’ width=’1400′ height=’1050′ scroll=’no’></iframe>”) ;

}

This part of the code returns the iframe and displays the information in the way laid out in the code. Frameborder states what size the border should be (I recommend ‘0’ so that it will integrate seamlessly into your site if the colouring matches up). Src is where you would put your source website, for this example I have used google but you can use whatever website or accessible file you would like. Name is whatever you would like to set the name as. Width and height is the dimension settings you would like, this is default as px.

All of these definitions need to be stated in the iframe tag (<iframe /iframe>) otherwise the page will not load.

add_shortcode (‘example’, ‘example’);

I have also added the option to call upon the plugin using the shortcode ‘example’. This is a piece of code you would put in square brackets and it allows the pluin to be called on whichever page you would like instead of assigning the plug in to create a new page.

 

Creating automated refresh for your plugin

 

Some pages that you would like to display may need to be refreshed to display the most current data on said page. As an example of this I will be talking about the alpha timings plugin I created for Wombwell Karting. The plugin code is as follows:

<?php

/**

* Plugin Name: akartFrame

* Author: Thomas Handley

* Version: 1.3

* Description: Attempt to reproduce kart scores.

*/

function kartFrame () {

                $my_html=””;

    $my_html.= “<iframe id=’kartFrame’ frameborder=’0′ allowtransparency=’true’

                src=’https://live.alphatiming.co.uk/wombwellkarting’ name=’alphatiming_live’ width=’1400′ height=’1050′ scroll=’no’></iframe>”;

                $my_html.= ‘

                                <script>

                                console.log(“fred”);

                                window.setInterval(“reloadIFrame();”,30000);

                                function reloadIFrame() {

                                 document.getElementById(“kartFrame”).src += “”;

                                }

                                </script>

                                ‘;

return ($my_html);

};

add_shortcode (‘kartFrame’, ‘kartFrame’);

?>

In this advanced version I have implements javascript for a multitude of reasons. The javascript portion is as follows:

$my_html.= ‘

                                <script>

                                console.log(“fred”);

                                window.setInterval(“reloadIFrame();”,30000);

                                function reloadIFrame() {

                                 document.getElementById(“kartFrame”).src += “”;

                                }

                                </script>

First of all, I have created the identifier $my_html. This makes it so that later down in the code I don’t have to retype all the code for the return function. The consol.log function is for debugging purposes if you go to the console of your browser through inspect element. The console will display how many times that the script has been run (or if there are any errors).

window.setInterval(“reloadIFrame();”,30000); is the part of the code which defines how long it should be until the iframe reloads through the reloadFrame function. In this instance I have chosen 30 seconds as I felt like that was the most appropriate, you may change this to whatever you like (the format is in milliseconds e.g 1000 = 1 second).

function reloadIFrame() {

document.getElementById(“kartFrame”).src += “”;

This section of the code is the section which defines the reloadFrame function. document.getElementById(“kartFrame”).src += “” is the main definition for the function as it gets the element you assigned to kartFrame and the .src += “” section is the part which reloads the source material inside the iframe.

All of this javascript needs to be wrapped inside the <script></script> tags so it will be determined correctly.

Adding the plugin to your page

The final thing you will need to do is 1) upload your plugin to the wordpress site, this is done through the add plugin section of the dashboard (plugins must be in a .zip file), and 2) add to your webpage. This can be done by adding the shortcode (which you defined before in your code) to the page you would like your plugin to be on.


Leave a Reply