Use an anchor link to open an iframe inside a WordPress page

Question

My Question:

How do you make an anchor link to an offsite webpage that when clicked opens up the offsite webpage as an iframe that is inside a new WordPress page where the WordPress header and footer remain but the iframed webpage shows where the content would normally be?

For Example:

You have a wordpress page with a series of offsite links. Each link goes to a registration page. The registration page is hosted by a 3rd party website.

____ get_header() ____
    Logo.png

____ get_the_content(); 
    Which class do you want to register for?

    Click here to register for Class A (link to 3rd party offsite webpage)
    Click here to register for Class B (link to 3rd party offsite webpage)

____ WordPress Footer ____
    get_footer();

When ‘Click here to register for Class B’ is clicked, A new WordPress page is opened like so.

____ get_header() ____
    Logo.png

____ 3rd party webpage
    <iframe>
        Please fill out this registration form to continue.

        Name: 
        Credit Card #:
    </iframe>

____ WordPress Footer ____
    get_footer();

Possible Approach:

Is this way overkill…

  • create a new, theme page template thst pulls in the header and footer. Then in the content area, parse out the the 3rd party webpage url from the the 3rd party link and use that link in an iframe where the post/page content would normally show.

  • in WordPress add a page and assign the new template. permalink: ../reg-page

  • in the page that has the list of 3rd part links, build the anchor like so:

    <a href="../reg-page?classID=1234">Click here to register for Class B</a>
    
  • in the theme page template:

    // I know this is not legal code
    
    /**
    * Template Name: iframe fullwidth 
    */
    
    get_header()
    
    <div class="content-wrapper">
        <iframe src="3rdPartSite.com/ . $_GET["classID"] ." width="100%" height="100%"></iframe>
    </div>
    
    get_footer()
    
0
, Jason 9 years 2013-10-15T14:05:23-05:00 0 Answers 70 views 0

Leave an answer

Browse
Browse