# AppsFruit Elementor Embed A powerful WordPress plugin that allows you to embed Elementor pages, templates, and global sections anywhere on your site using shortcodes or Gutenberg blocks with advanced conditional display options. ## Features - 🎨 **Embed Anywhere**: Insert Elementor templates using simple shortcodes or Gutenberg blocks - 📱 **Conditional Display**: Show templates based on device (mobile/desktop), user role, or post type - 🗂️ **Custom Post Type**: Dedicated AEFE Templates post type with full Elementor support - 🏷️ **Organization**: Built-in categories and tags for template management - 📋 **Quick Copy**: One-click shortcode copying from admin interface - 🔄 **Global Sync**: Update once, reflect everywhere - 🎯 **Gutenberg Block**: Visual template insertion without shortcodes - 🔧 **Developer Friendly**: Extensive hooks and filters for customization - 🔒 **Secure & Lightweight**: Follows WordPress coding standards ## Requirements - WordPress 5.8 or higher - PHP 7.4 or higher - Elementor (free version) installed and activated ## Installation 1. Upload the `appsfruit-elementor-embed` folder to `/wp-content/plugins/` 2. Activate the plugin through the 'Plugins' menu in WordPress 3. Make sure Elementor is installed and activated 4. Start creating AEFE Templates! ## Quick Start Guide ### Creating Your First Template 1. **Navigate to AEFE Templates** - Go to WordPress Admin → AEFE Templates → Add New 2. **Create Your Template** - Enter a title for your template - Click "Edit with Elementor" button - Design your template using Elementor's drag-and-drop interface - Save your template 3. **Get the Shortcode** - After saving, you'll see the shortcode in the sidebar - Click "Copy Shortcode" button - Or copy it from the template list view 4. **Embed the Template** - Paste the shortcode anywhere: posts, pages, widgets, etc. - Or use the Gutenberg block "Insert Elementor Template" ## Usage ### Basic Shortcode ``` [aefe_embed id="123"] ``` Replace `123` with your template ID. ### Conditional Display Options #### Device-Specific Display Show only on mobile devices: ``` [aefe_embed id="123" device="mobile"] ``` Show only on desktop: ``` [aefe_embed id="123" device="desktop"] ``` #### Role-Based Display Show only to administrators: ``` [aefe_embed id="123" role="administrator"] ``` Show to multiple roles (use pipe separator): ``` [aefe_embed id="123" role="editor|subscriber"] ``` Available roles: `administrator`, `editor`, `author`, `contributor`, `subscriber` #### Post Type Specific Show only on pages: ``` [aefe_embed id="123" post_type="page"] ``` Show on multiple post types: ``` [aefe_embed id="123" post_type="post|product"] ``` #### Combined Conditions You can combine multiple conditions: ``` [aefe_embed id="123" device="mobile" role="subscriber" post_type="post"] ``` This will show the template only on mobile devices, to subscribers, on single posts. ### Using the Gutenberg Block 1. In the block editor, click the (+) button 2. Search for "Insert Elementor Template" 3. Select your template from the dropdown 4. (Optional) Configure conditional display in the block settings 5. Publish/Update your page ## Template Management ### Categories and Tags Organize your templates using categories and tags: - **Categories**: Hierarchical organization (e.g., Headers, Footers, CTAs) - **Tags**: Non-hierarchical labels (e.g., seasonal, promotional, featured) Access them from: AEFE Templates → Categories / Tags ### Editing Templates - **Standard Edit**: Edit title, categories, tags - **Edit with Elementor**: Full Elementor visual editor - **Quick Edit**: Fast inline editing ### Shortcode Display Every template shows its shortcode in: - Admin list view (with quick copy button) - Edit screen sidebar (meta box) - Quick edit panel ## Developer Documentation ### Available Hooks #### Actions ```php // After plugin initialization do_action( 'aefe_init' ); // Plugin activation do_action( 'aefe_activated' ); // Plugin deactivation do_action( 'aefe_deactivated' ); // Before template rendering do_action( 'aefe_before_render_template', $post_id, $atts ); // After template rendering do_action( 'aefe_after_render_template', $post_id, $atts ); ``` #### Filters ```php // Modify post type registration arguments apply_filters( 'aefe_post_type_args', $args ); // Modify category taxonomy arguments apply_filters( 'aefe_category_taxonomy_args', $args ); // Modify tag taxonomy arguments apply_filters( 'aefe_tag_taxonomy_args', $args ); // Modify shortcode attributes apply_filters( 'aefe_shortcode_atts', $atts ); // Add custom display conditions apply_filters( 'aefe_should_display', $should_display, $atts ); // Prevent template rendering apply_filters( 'aefe_should_render_template', $should_render, $post_id, $atts ); // Modify template output apply_filters( 'aefe_template_content', $content, $post_id, $atts ); // Modify wrapper CSS classes apply_filters( 'aefe_wrapper_classes', $classes, $post_id, $atts ); // Modify error messages apply_filters( 'aefe_error_message', $message ); ``` ### Example: Add Custom Display Condition ```php // Add a custom "time-based" display condition add_filter( 'aefe_shortcode_atts', function( $atts ) { // Add support for 'time' attribute if ( ! isset( $atts['time'] ) ) { $atts['time'] = ''; } return $atts; } ); add_filter( 'aefe_should_display', function( $should_display, $atts ) { if ( ! empty( $atts['time'] ) ) { $current_hour = (int) date( 'H' ); if ( $atts['time'] === 'business' ) { // Show only during business hours (9 AM - 5 PM) return $current_hour >= 9 && $current_hour < 17; } } return $should_display; }, 10, 2 ); // Usage: [aefe_embed id="123" time="business"] ``` ### Example: Modify Template Output ```php // Wrap all templates with a custom container add_filter( 'aefe_template_content', function( $content, $post_id, $atts ) { return '
' . $content . '
'; }, 10, 3 ); ``` ### Example: Add Custom Wrapper Classes ```php // Add custom CSS classes based on template category add_filter( 'aefe_wrapper_classes', function( $classes, $post_id, $atts ) { $categories = get_the_terms( $post_id, 'aefe_category' ); if ( $categories && ! is_wp_error( $categories ) ) { foreach ( $categories as $category ) { $classes[] = 'aefe-cat-' . $category->slug; } } return $classes; }, 10, 3 ); ``` ### Example: Track Template Views ```php // Track how many times a template is rendered add_action( 'aefe_after_render_template', function( $post_id, $atts ) { $views = get_post_meta( $post_id, '_aefe_views', true ); $views = $views ? (int) $views : 0; update_post_meta( $post_id, '_aefe_views', $views + 1 ); }, 10, 2 ); ``` ## Frequently Asked Questions ### Can I use this with Elementor Free? Yes! This plugin works with both Elementor Free and Elementor Pro. ### Will templates update everywhere when I edit them? Yes! Templates are dynamically rendered, so any changes you make will automatically appear everywhere the template is embedded. ### Can I embed regular WordPress posts/pages? Yes! While the plugin is designed for AEFE Templates, you can embed any post or page created with Elementor by using its ID in the shortcode. ### Does this work with page builders other than Elementor? The plugin is specifically designed for Elementor. For non-Elementor content, it will fall back to displaying the regular post content. ### Can I use multiple conditions in one shortcode? Yes! You can combine device, role, and post_type conditions in a single shortcode. ### How do I find a template's ID? The template ID is shown in: - The shortcode displayed in the admin list - The URL when editing the template - The shortcode meta box in the sidebar ## Troubleshooting ### Template not displaying 1. **Check if Elementor is active**: The plugin requires Elementor to be installed and activated 2. **Verify template ID**: Make sure you're using the correct template ID 3. **Check template status**: Template must be published (drafts won't show to non-editors) 4. **Review conditions**: If using conditional attributes, verify they match your current context ### Shortcode shows as text 1. **Check shortcode syntax**: Ensure you're using `[aefe_embed id="123"]` not `{aefe_embed id="123"}` 2. **Verify shortcode support**: Make sure the area supports shortcodes (most do by default) 3. **Check for conflicts**: Temporarily disable other plugins to rule out conflicts ### Elementor editor not loading 1. **Clear cache**: Clear your site and browser cache 2. **Check Elementor**: Make sure Elementor itself is working properly 3. **Regenerate CSS**: Go to Elementor → Tools → Regenerate CSS ## Support For support, feature requests, or bug reports: - Visit: [https://appsfruit.com/support](https://appsfruit.com/support) - Email: support@appsfruit.com ## Changelog ### 1.0.0 - Initial release - Custom post type for AEFE Templates - Shortcode support with conditional attributes - Gutenberg block integration - Categories and tags for organization - Quick copy shortcode functionality - Developer hooks and filters - Comprehensive documentation ## Credits Developed by [AppsFruit](https://appsfruit.com) ## License GPL v2 or later - [https://www.gnu.org/licenses/gpl-2.0.html](https://www.gnu.org/licenses/gpl-2.0.html)