Snippets library

Browse Snippets
Claim your Free Profile
Add Snippet
Home / Admin / PageTemplate_Universal – GRAVITY FLOW EMBED TEMPLATE
Duplicate Snippet

Embed Snippet on Your Site

PageTemplate_Universal – GRAVITY FLOW EMBED TEMPLATE

Version: 1.1.0
7 * Author: Portal Blueprint
8 * Compatible with: Gravity Flow 2.8+, BuddyBoss, Divi, Elementor, Any Theme
9 *
10 * SAFETY FEATURES:
11 * - Uses template_include filter (WordPress recommended) as primary method
12 * - Only affects pages where template is explicitly selected
13 * - Will NOT break other plugins or BuddyBoss functionality
14 * - WPCode's error handling will auto-disable if any issues occur
15 * - Does not interfere with any other pages on your site
16 *
17 * INSTALLATION:
18 * 1. WPCode → Add Snippet → PHP Snippet
19 * 2. Paste this entire code
20 * 3. Set Location: Run Everywhere
21 * 4. Activate
22 *
23 * USAGE:
24 * 1. Create a new page
25 * 2. Add shortcode: [gravityflow page="inbox"]
26 * 3. Select Template: "Gravity Flow Embed" in Page Attributes
27 * 4. Publish
28 * 5. Embed via iframe on any other page
29 *

ismail daugherty PRO
<10
Code Preview
Comments
php
<?php
/**
 * ============================================================================
 * GRAVITY FLOW EMBED TEMPLATE - Universal WPCode Snippet (SAFE VERSION)
 * ============================================================================
 * 
 * Version: 1.1.0
 * Author: Portal Blueprint
 * Compatible with: Gravity Flow 2.8+, BuddyBoss, Divi, Elementor, Any Theme
 * 
 * SAFETY FEATURES:
 * - Uses template_include filter (WordPress recommended) as primary method
 * - Only affects pages where template is explicitly selected
 * - Will NOT break other plugins or BuddyBoss functionality
 * - WPCode's error handling will auto-disable if any issues occur
 * - Does not interfere with any other pages on your site
 * 
 * INSTALLATION:
 * 1. WPCode → Add Snippet → PHP Snippet
 * 2. Paste this entire code
 * 3. Set Location: Run Everywhere
 * 4. Activate
 * 
 * USAGE:
 * 1. Create a new page
 * 2. Add shortcode: [gravityflow page="inbox"]
 * 3. Select Template: "Gravity Flow Embed" in Page Attributes
 * 4. Publish
 * 5. Embed via iframe on any other page
 * 
 * ============================================================================
 */
// Prevent direct access
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
/**
 * STEP 1: Register the template in WordPress page template dropdown
 * This is safe - it only adds an option to the dropdown
 */
add_filter( 'theme_page_templates', function( $templates ) {
    $templates['gravityflow-embed-template'] = 'Gravity Flow Embed';
    return $templates;
});
/**
 * STEP 2: Validate the template selection
 * Ensures WordPress recognizes our virtual template as valid
 */
add_filter( 'page_template', function( $template ) {
    global $post;
    
    if ( ! $post ) {
        return $template;
    }
    
    $page_template = get_page_template_slug( $post->ID );
    
    if ( 'gravityflow-embed-template' === $page_template ) {
        // Return path to a "virtual" template (we'll handle rendering separately)
        // This prevents WordPress from throwing a "template not found" error
        return $template; // Keep default for now, we override rendering below
    }
    
    return $template;
});
/**
 * STEP 3: Custom rendering for our template
 * Uses template_include with high priority (runs late) to safely override
 * This is the WordPress-recommended approach
 */
add_filter( 'template_include', function( $template ) {
    global $post;
    
    // Safety check: Only proceed if we have a valid post
    if ( ! $post || ! is_page() ) {
        return $template;
    }
    
    // Check if our template is selected
    $page_template = get_page_template_slug( $post->ID );
    
    if ( 'gravityflow-embed-template' !== $page_template ) {
        return $template;
    }
    
    // Start output buffering to capture our custom template
    ob_start();
    gravityflow_embed_render_template();
    $content = ob_get_clean();
    
    // Output and exit cleanly
    echo $content;
    exit;
    
}, 9999 ); // Very late priority to ensure we run after BuddyBoss/other themes
/**
 * STEP 4: The actual template rendering function
 * Completely isolated - no theme CSS, no BuddyBoss, pure clean output
 */
function gravityflow_embed_render_template() {
    global $post;
    
    // Ensure we have the post data
    if ( ! $post ) {
        wp_die( 'Error: No content found.', 'Gravity Flow Embed', array( 'response' => 404 ) );
    }
    
    ?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow">
    <title><?php echo esc_html( get_the_title() ); ?> - <?php bloginfo( 'name' ); ?></title>
    
    <?php 
    /**
     * wp_head() loads required scripts for:
     * - Gravity Flow JavaScript
     * - Gravity Forms JavaScript  
     * - jQuery (required by both)
     * - Any inline styles from Gravity Flow
     */
    wp_head(); 
    ?>
    
    <style id="gravityflow-embed-styles">
    /*! ================================================================
        GRAVITY FLOW EMBED TEMPLATE v1.1.0
        Isolated CSS Environment - Theme Independent
        Compatible with: BuddyBoss, Divi, Elementor, GeneratePress, etc.
        ================================================================ */
    
    /* ----------------------------------------------------------------
       1. COMPLETE RESET - Neutralize ALL theme inheritance
       ---------------------------------------------------------------- */
    *, *::before, *::after {
        box-sizing: border-box !important;
    }
    
    html {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 16px !important;
        -webkit-text-size-adjust: 100% !important;
    }
    
    body.gravityflow-embed-body {
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        color: #1e1e1e !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        min-height: 100vh !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
    
    /* Hide any BuddyBoss elements that might leak through */
    body.gravityflow-embed-body #buddypress,
    body.gravityflow-embed-body .buddypanel,
    body.gravityflow-embed-body .bb-buddypanel,
    body.gravityflow-embed-body .site-header,
    body.gravityflow-embed-body .site-footer,
    body.gravityflow-embed-body #masthead,
    body.gravityflow-embed-body .bb-mobile-header {
        display: none !important;
    }
    
    /* ----------------------------------------------------------------
       2. MAIN CONTAINER
       ---------------------------------------------------------------- */
    .gravityflow-embed-container {
        max-width: 1400px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 24px 32px !important;
        background: #ffffff !important;
        min-height: 100vh !important;
    }
    
    @media (max-width: 768px) {
        .gravityflow-embed-container {
            padding: 16px 20px !important;
        }
    }
    
    /* ----------------------------------------------------------------
       3. TYPOGRAPHY
       ---------------------------------------------------------------- */
    .gravityflow-embed-container h1,
    .gravityflow-embed-container h2,
    .gravityflow-embed-container h3,
    .gravityflow-embed-container h4,
    .gravityflow-embed-container h5,
    .gravityflow-embed-container h6 {
        margin: 0 0 16px 0 !important;
        padding: 0 !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        color: #1e1e1e !important;
    }
    
    .gravityflow-embed-container h1 { font-size: 28px !important; }
    .gravityflow-embed-container h2 { font-size: 24px !important; }
    .gravityflow-embed-container h3 { font-size: 20px !important; }
    .gravityflow-embed-container h4 { font-size: 18px !important; }
    
    .gravityflow-embed-container p {
        margin: 0 0 16px 0 !important;
        padding: 0 !important;
    }
    
    .gravityflow-embed-container a {
        color: #0073aa !important;
        text-decoration: none !important;
        transition: color 0.15s ease !important;
    }
    
    .gravityflow-embed-container a:hover,
    .gravityflow-embed-container a:focus {
        color: #005177 !important;
        text-decoration: underline !important;
    }
    
    /* ----------------------------------------------------------------
       4. GRAVITY FLOW INBOX TABLE
       ---------------------------------------------------------------- */
    .gravityflow-embed-container table {
        width: 100% !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        margin-bottom: 24px !important;
        background: #ffffff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 6px !important;
        overflow: hidden !important;
    }
    
    .gravityflow-embed-container thead {
        background: #f8f9fa !important;
    }
    
    .gravityflow-embed-container th {
        padding: 14px 16px !important;
        text-align: left !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        color: #444444 !important;
        border-bottom: 2px solid #e0e0e0 !important;
        white-space: nowrap !important;
    }
    
    .gravityflow-embed-container td {
        padding: 14px 16px !important;
        text-align: left !important;
        font-size: 14px !important;
        color: #1e1e1e !important;
        border-bottom: 1px solid #f0f0f0 !important;
        vertical-align: top !important;
    }
    
    .gravityflow-embed-container tbody tr {
        transition: background-color 0.15s ease !important;
        cursor: pointer !important;
    }
    
    .gravityflow-embed-container tbody tr:hover {
        background-color: #f5f9fc !important;
    }
    
    .gravityflow-embed-container tbody tr:last-child td {
        border-bottom: none !important;
    }
    
    /* ----------------------------------------------------------------
       5. FORM ELEMENTS - Critical for Gravity Flow/Forms
       ---------------------------------------------------------------- */
    
    /* Text Inputs */
    .gravityflow-embed-container input[type="text"],
    .gravityflow-embed-container input[type="email"],
    .gravityflow-embed-container input[type="url"],
    .gravityflow-embed-container input[type="tel"],
    .gravityflow-embed-container input[type="number"],
    .gravityflow-embed-container input[type="date"],
    .gravityflow-embed-container input[type="datetime-local"],
    .gravityflow-embed-container input[type="password"],
    .gravityflow-embed-container input[type="search"],
    .gravityflow-embed-container textarea,
    .gravityflow-embed-container select {
        display: block !important;
        width: 100% !important;
        max-width: 500px !important;
        padding: 10px 14px !important;
        margin: 6px 0 !important;
        font-family: inherit !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: #1e1e1e !important;
        background-color: #ffffff !important;
        border: 1px solid #c5c5c5 !important;
        border-radius: 4px !important;
        transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    
    .gravityflow-embed-container input:focus,
    .gravityflow-embed-container textarea:focus,
    .gravityflow-embed-container select:focus {
        outline: none !important;
        border-color: #0073aa !important;
        box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.15) !important;
    }
    
    .gravityflow-embed-container textarea {
        min-height: 120px !important;
        resize: vertical !important;
    }
    
    /* RADIO & CHECKBOXES - CRITICAL FIX for BuddyBoss conflicts */
    .gravityflow-embed-container input[type="radio"],
    .gravityflow-embed-container input[type="checkbox"] {
        display: inline-block !important;
        width: 18px !important;
        height: 18px !important;
        margin: 0 10px 0 0 !important;
        padding: 0 !important;
        vertical-align: middle !important;
        cursor: pointer !important;
        -webkit-appearance: auto !important;
        -moz-appearance: auto !important;
        appearance: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
        pointer-events: auto !important;
        accent-color: #0073aa !important;
    }
    
    .gravityflow-embed-container label {
        display: inline-block !important;
        margin-bottom: 6px !important;
        font-weight: 500 !important;
        color: #1e1e1e !important;
        cursor: pointer !important;
    }
    
    /* Choice lists */
    .gravityflow-embed-container .gfield_radio,
    .gravityflow-embed-container .gfield_checkbox,
    .gravityflow-embed-container .gchoice {
        display: block !important;
        margin-bottom: 10px !important;
    }
    
    .gravityflow-embed-container .gchoice label {
        display: inline !important;
        font-weight: 400 !important;
    }
    
    /* ----------------------------------------------------------------
       6. BUTTONS - Submit, Approve, Reject
       ---------------------------------------------------------------- */
    .gravityflow-embed-container input[type="submit"],
    .gravityflow-embed-container input[type="button"],
    .gravityflow-embed-container button,
    .gravityflow-embed-container .gform_button,
    .gravityflow-embed-container .gravityflow-button {
        display: inline-block !important;
        padding: 12px 24px !important;
        margin: 10px 8px 10px 0 !important;
        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        text-align: center !important;
        text-decoration: none !important;
        color: #ffffff !important;
        background-color: #0073aa !important;
        border: none !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        transition: background-color 0.15s ease, transform 0.1s ease !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    
    .gravityflow-embed-container input[type="submit"]:hover,
    .gravityflow-embed-container button:hover {
        background-color: #005a87 !important;
    }
    
    .gravityflow-embed-container input[type="submit"]:active,
    .gravityflow-embed-container button:active {
        transform: translateY(1px) !important;
    }
    
    /* Approve = Green */
    .gravityflow-embed-container [name*="approve"],
    .gravityflow-embed-container [value*="Approve"],
    .gravityflow-embed-container .gravityflow-approve {
        background-color: #28a745 !important;
    }
    
    .gravityflow-embed-container [name*="approve"]:hover,
    .gravityflow-embed-container [value*="Approve"]:hover {
        background-color: #218838 !important;
    }
    
    /* Reject = Red */
    .gravityflow-embed-container [name*="reject"],
    .gravityflow-embed-container [value*="Reject"],
    .gravityflow-embed-container .gravityflow-reject {
        background-color: #dc3545 !important;
    }
    
    .gravityflow-embed-container [name*="reject"]:hover,
    .gravityflow-embed-container [value*="Reject"]:hover {
        background-color: #c82333 !important;
    }
    
    /* Secondary Buttons */
    .gravityflow-embed-container [value*="Cancel"],
    .gravityflow-embed-container [value*="Back"] {
        background-color: #6c757d !important;
    }
    
    /* ----------------------------------------------------------------
       7. GRAVITY FLOW COMPONENTS
       ---------------------------------------------------------------- */
    
    /* Status Box */
    .gravityflow-embed-container .gravityflow-status-box,
    .gravityflow-embed-container [class*="status-box"] {
        background: #f8f9fa !important;
        border: 1px solid #e0e0e0 !important;
        border-left: 4px solid #0073aa !important;
        border-radius: 4px !important;
        padding: 16px 20px !important;
        margin-bottom: 24px !important;
    }
    
    /* Timeline */
    .gravityflow-embed-container .gravityflow-timeline {
        background: #fafafa !important;
        border: 1px solid #e8e8e8 !important;
        border-radius: 4px !important;
        padding: 16px !important;
        margin: 20px 0 !important;
    }
    
    /* Instructions */
    .gravityflow-embed-container .gravityflow-instructions {
        background: #fff8e6 !important;
        border: 1px solid #ffe0a6 !important;
        border-radius: 4px !important;
        padding: 14px 18px !important;
        margin-bottom: 20px !important;
        color: #856404 !important;
    }
    
    /* Gravity Forms wrapper */
    .gravityflow-embed-container .gform_wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .gravityflow-embed-container .gform_fields {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .gravityflow-embed-container .gfield {
        margin-bottom: 20px !important;
        padding: 0 !important;
    }
    
    .gravityflow-embed-container .gfield_label {
        display: block !important;
        margin-bottom: 6px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        color: #333333 !important;
    }
    
    .gravityflow-embed-container .gfield_required {
        color: #dc3545 !important;
    }
    
    .gravityflow-embed-container .gfield_description {
        font-size: 13px !important;
        color: #666666 !important;
        margin-top: 6px !important;
    }
    
    /* Validation */
    .gravityflow-embed-container .gfield_error input,
    .gravityflow-embed-container .gfield_error textarea,
    .gravityflow-embed-container .gfield_error select {
        border-color: #dc3545 !important;
    }
    
    .gravityflow-embed-container .validation_message {
        color: #dc3545 !important;
        font-size: 13px !important;
        margin-top: 4px !important;
    }
    
    .gravityflow-embed-container .validation_error {
        background: #fff5f5 !important;
        border: 1px solid #dc3545 !important;
        border-radius: 4px !important;
        padding: 12px 16px !important;
        margin-bottom: 20px !important;
        color: #dc3545 !important;
    }
    
    /* ----------------------------------------------------------------
       8. PAGINATION & NAVIGATION
       ---------------------------------------------------------------- */
    .gravityflow-embed-container .tablenav,
    .gravityflow-embed-container [class*="paging"] {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 0 !important;
        margin-top: 16px !important;
        border-top: 1px solid #e0e0e0 !important;
    }
    
    .gravityflow-embed-container .tablenav-pages a,
    .gravityflow-embed-container .page-numbers {
        display: inline-block !important;
        padding: 6px 12px !important;
        margin: 0 4px !important;
        background: #f0f0f0 !important;
        border-radius: 4px !important;
        color: #333333 !important;
        text-decoration: none !important;
    }
    
    .gravityflow-embed-container .tablenav-pages a:hover,
    .gravityflow-embed-container .current.page-numbers {
        background: #0073aa !important;
        color: #ffffff !important;
    }
    
    /* Back Link */
    .gravityflow-embed-container .gravityflow-back-link-container {
        margin-bottom: 20px !important;
    }
    
    .gravityflow-embed-container .gravityflow-back-link-container a::before {
        content: "← " !important;
    }
    
    /* Submenu / Filters */
    .gravityflow-embed-container .gravityflow-inbox-submenu,
    .gravityflow-embed-container .subsubsub {
        list-style: none !important;
        margin: 0 0 20px 0 !important;
        padding: 0 0 16px 0 !important;
        border-bottom: 1px solid #e0e0e0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .gravityflow-embed-container .gravityflow-inbox-submenu li,
    .gravityflow-embed-container .subsubsub li {
        margin: 0 !important;
    }
    
    .gravityflow-embed-container .gravityflow-inbox-submenu a,
    .gravityflow-embed-container .subsubsub a {
        padding: 6px 14px !important;
        background: #f0f0f0 !important;
        border-radius: 20px !important;
        font-size: 13px !important;
        color: #444444 !important;
    }
    
    .gravityflow-embed-container .gravityflow-inbox-submenu a:hover,
    .gravityflow-embed-container .gravityflow-inbox-submenu .current {
        background: #0073aa !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }
    
    /* ----------------------------------------------------------------
       9. DATEPICKER
       ---------------------------------------------------------------- */
    .ui-datepicker {
        z-index: 999999 !important;
        background: #ffffff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 6px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        padding: 10px !important;
    }
    
    /* ----------------------------------------------------------------
       10. RESPONSIVE
       ---------------------------------------------------------------- */
    @media (max-width: 992px) {
        .gravityflow-embed-container table {
            display: block !important;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch !important;
        }
    }
    
    @media (max-width: 600px) {
        .gravityflow-embed-container th,
        .gravityflow-embed-container td {
            padding: 10px 12px !important;
            font-size: 13px !important;
        }
        
        .gravityflow-embed-container input[type="submit"],
        .gravityflow-embed-container button {
            width: 100% !important;
            margin: 8px 0 !important;
        }
    }
    
    /* ----------------------------------------------------------------
       11. iOS / TOUCH FIXES
       ---------------------------------------------------------------- */
    @supports (-webkit-overflow-scrolling: touch) {
        body.gravityflow-embed-body {
            -webkit-overflow-scrolling: touch !important;
        }
        
        .gravityflow-embed-container input[type="text"],
        .gravityflow-embed-container input[type="email"],
        .gravityflow-embed-container textarea,
        .gravityflow-embed-container select {
            font-size: 16px !important; /* Prevents iOS zoom */
        }
    }
    
    /* ----------------------------------------------------------------
       12. PRINT
       ---------------------------------------------------------------- */
    @media print {
        body.gravityflow-embed-body {
            background: #ffffff !important;
        }
        
        .gravityflow-embed-container {
            max-width: 100% !important;
            padding: 0 !important;
        }
        
        .gravityflow-embed-container input[type="submit"],
        .gravityflow-embed-container button,
        .gravityflow-embed-container .tablenav {
            display: none !important;
        }
    }
    
    /* ----------------------------------------------------------------
       13. ACCESSIBILITY
       ---------------------------------------------------------------- */
    .gravityflow-embed-container :focus-visible {
        outline: 2px solid #0073aa !important;
        outline-offset: 2px !important;
    }
    
    .gravityflow-embed-container .screen-reader-text {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    
    </style>
</head>
<body class="gravityflow-embed-body">
    <?php 
    // WordPress 5.2+ hook - allows plugins to inject content at body start
    if ( function_exists( 'wp_body_open' ) ) {
        wp_body_open();
    }
    ?>
    
    <div class="gravityflow-embed-container">
        <?php
        // Set up post data
        setup_postdata( $post );
        
        // Render the content (Gravity Flow shortcode will process here)
        the_content();
        
        // Reset post data
        wp_reset_postdata();
        ?>
    </div>
    
    <?php 
    // Load required footer scripts (jQuery, Gravity Flow JS, etc.)
    wp_footer(); 
    ?>
    
</body>
</html>
    <?php
}
Hosted with ❤️ by WPCode
1-click Use in WordPress

Comments

Add a Comment

Login to Deploy Snippet