WP Smith

Creating WordPress & Genesis Websites Since 2010

  • Home
  • About
  • Services
  • Blog
  • Contact

May 16 2011

A Genesis iFrame Page Template

***UPDATED: 5/16***
Recently, I needed an iFrame page template so that I could create pages that appear on multiple external websites, especially Facebook pages. So in order to do this, I had to remove the header, navigation, footer, breadcrumbs, and post title. For styling, I added an iframe custom body class. Here is a Sample iFrame Page.

So here is the code from the page:
[php]
<?php
/*
*Template Name: iframe
*/

remove_action('genesis_header', 'genesis_header_markup_open', 5);
remove_action('genesis_header', 'genesis_do_header');
remove_action('genesis_after_header', 'genesis_do_nav');
remove_action('genesis_after_header', 'genesis_do_subnav');
remove_action('genesis_footer', 'genesis_do_footer');
remove_action('genesis_before_footer', 'metric_include_footer_widgets');
remove_action('wp_head', 'genesis_header_scripts');
remove_action('genesis_before_loop', 'genesis_do_breadcrumbs');
remove_action('genesis_post_title', 'genesis_do_post_title');
add_filter('body_class','my_body_classes');
function my_body_classes($classes) {
$classes[] = "iframe";
return $classes;
}

genesis();
?>
[/php]

For example, it can be styled by adding something like the following:
[html]body.iframe {
background: none repeat scroll 0 0 #FFFFFF;
}[/html]

You could also remove the sidebar or you could just force the layout to be full-width:
[php]add_filter('genesis_pre_get_option_site_layout', 'wps_iframe_layout');
function wps_iframe_layout($opt) {
$opt = 'full-width-content';
return $opt;
} [/php]

The possibilities of this are endless! I would love to know what you do with this!

Written by Travis Smith · Categorized: Genesis, Tutorials

StudioPress Premium WordPress Themes     WP Engine Managed WordPress Hosting

What can I do for you!?

Custom Development

We develop plugins by determining both business/functional and technical requirements, following WordPress development best practices, and using agile methodology to ensure you get the best solution.

Consulting

Have questions? Need a reliable developer to consult? Please contact us today!

Customized Theme

We can customize your theme or child theme, or create a child theme for you based on your needs while enhancing the performance of every individual attribute.

Customized Plugin

We can customize your plugins, extend plugins (e.g., Gravity Forms, Jetpack, Soliloquy) based on your needs ensuring security, performance, and positive business impact.

Contact Us

About Travis Smith

As a WordPress enthusiast, developer, and speaker, Travis writes about what he learns in WordPress trying to help other WordPress travelers, beginners and enthusiasts with tutorials, explanations, & demonstrations.

Comments

  1. John says

    May 16, 2011 at 4:03 pm

    Thanks for sharing this! I am guessing you could add a remove action for the genesis_sidebar and just have the body class?

    Which would be great for facebook.

    Reply
    • wpsmith says

      May 16, 2011 at 4:09 pm

      Hello John,

      Yep! It was created for Facebook pages!

      You could remove the sidebar or you could just force the layout to be full-width:
      [php]add_filter(‘genesis_pre_get_option_site_layout’, ‘wps_iframe_layout’);
      function wps_iframe_layout($opt) {
      $opt = ‘full-width-content’;
      return $opt;
      } [/php]

      Thanks John! I’ve added this information to the Post and to the file download!

      Reply
  2. Adam W. Warner says

    May 17, 2011 at 10:12 am

    This looks pretty handy, however, I’m not sure I’m seeing the whole picture and I wonder if you could elaborate more on the use case scenario?

    I understand I create a page template, remove what needs to be removed, and style it accordingly, but how would one use this in FB in your example? You just grab the source of the page output and plop that into an FB page tab?

    Just trying to see the whole picture…

    Reply
    • Adam W. Warner says

      May 17, 2011 at 11:04 am

      After a little investigation, I believe I’ve found the solution to my question. You have to sign up as a Facebook App developer and while creating your own app, link to the page using your page template above.

      This is the link that lead me to the answer….
      http://www.socialmediacharity.com/2011/03/create-facebook-iframe-tab-facebook-pages/

      Now onto to create something awesome! 🙂

      Reply
    • wpsmith says

      May 17, 2011 at 11:06 am

      Hello Adam,

      Ok, big picture. Facebook, just moved to an iframe system departing from their FBML. So, here’s what I do (and of course there is the manual process): (1) Use the Facebook Tabs Manager plugin (my post). The plugin doesn’t do much for you except some Facebook Javascript and CSS (for which it can easily be done manually as well if you want to do the extra work); however, it does provide helpful steps to fill out the Facebook app, which is what you have discovered). (2) If you want a menu, use the Facebook Menu Shortcode (which I use to create a Facebook menu of the pages that I have converted for Facebook use, even a special Like Me page with hidden content as my “home” Facebook page, so a mini-site within Facebook). (3) Finally, design the page accordingly.

      Please let me know if you need anything else!

      Thanks,

      Reply
  3. Roger Pilon says

    July 9, 2011 at 10:49 am

    As I was fighting to add a php include in a template WP file without success, I decided to make a search about “Genesis” + “iframe”. Guess what, I found your post!

    I have 2 options, I can buy it directly from Genesis or buy it from you. You seems to know a lot about Genesis and WP.

    Can you contact me by email as I have a few questions before deciding to make the move or not??

    Thanks

    Roger Pilon

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Twitter
  • Facebook
  • LinkedIn
  • Google+
  • RSS

Copyright © 2025 � WP Smith on Genesis on Genesis Framework � WordPress � Log in