🔗 Shortcodes Guide

Master Base47 shortcodes and use templates anywhere in WordPress

🎯 What Are Shortcodes?

Shortcodes are simple text codes that WordPress converts into complex content. Base47 automatically creates shortcodes for all your templates, making them easy to use anywhere in WordPress.

[base47_agency_homepage]

📋 Available Shortcodes

Total: 47 professional shortcodes available!

🎛️ Shortcode Parameters

Basic Usage

Most shortcodes work without parameters:

[base47_agency_homepage]

Canvas Mode

Display pure HTML without theme wrapper:

[base47_agency_homepage canvas="true"]

Custom CSS Class

Add custom CSS classes:

[base47_agency_homepage class="my-custom-class"]

Custom ID

Add custom HTML ID:

[base47_agency_homepage id="my-homepage"]

Combined Parameters

Use multiple parameters together:

[base47_agency_homepage canvas="true" class="landing-page" id="home"]

📍 Where to Use Shortcodes

Posts & Pages

Add shortcodes to any post or page content:

1. Edit post/page in WordPress
2. Add shortcode in content area
3. Publish/update to see template
4. View page to see result

Widgets

Use shortcodes in sidebar widgets:

1. Go to Appearance > Widgets
2. Add Text Widget to sidebar
3. Paste shortcode in widget content
4. Save widget

Theme Files

Add shortcodes directly in theme files:

<?php echo do_shortcode('[base47_agency_homepage]'); ?>

Page Builders

Most page builders support shortcodes:

• Elementor - Use Shortcode widget
• Beaver Builder - Use HTML module
• Gutenberg - Use Shortcode block
• Divi - Use Code module

🎨 Customizing Shortcode Output

Custom CSS

Target shortcode output with CSS:

/* Style all Base47 templates */
.base47-template {
    margin: 20px 0;
    border-radius: 8px;
}

/* Style specific template */
.base47-agency-homepage {
    background: #f8f9fa;
    padding: 40px;
}

/* Canvas mode styling */
.base47-canvas {
    width: 100vw;
    height: 100vh;
}

JavaScript Integration

Add JavaScript to interact with templates:

document.addEventListener('DOMContentLoaded', function() {
    // Find all Base47 templates
    const templates = document.querySelectorAll('.base47-template');
    
    templates.forEach(template => {
        // Add click tracking
        template.addEventListener('click', function() {
            console.log('Template clicked:', this.className);
        });
    });
});

🔄 Dynamic Content

WordPress Integration

Shortcodes automatically integrate with WordPress:

• Post content - Access current post data
• User data - Show logged-in user info
• Site settings - Use site title, description, etc.
• Custom fields - Display ACF or meta fields

Template Variables

Use these variables in your templates:

<!-- Site information -->
<h1>{{site_title}}</h1>
<p>{{site_description}}</p>

<!-- Post information -->
<h2>{{post_title}}</h2>
<div>{{post_content}}</div>
<span>{{post_date}}</span>

<!-- User information -->
<p>Welcome, {{user_name}}!</p>
<img src="{{user_avatar}}" alt="Avatar">

📱 Responsive Shortcodes

Device-Specific Display

Show different templates on different devices:

[base47_agency_homepage device="desktop"]
[base47_agency_mobile device="mobile"]

Responsive Parameters

Control responsive behavior:

[base47_agency_homepage 
    mobile_class="mobile-layout"
    tablet_class="tablet-layout"
    desktop_class="desktop-layout"]

⚡ Performance Optimization

Caching

Shortcodes are automatically cached for better performance:

• Template caching - Rendered templates cached
• Asset caching - CSS/JS files cached
• Database caching - Query results cached

Lazy Loading

Enable lazy loading for better performance:

[base47_agency_homepage lazy="true"]

Conditional Loading

Load templates only when needed:

<?php if (is_front_page()): ?>
    <?php echo do_shortcode('[base47_agency_homepage]'); ?>
<?php endif; ?>

🎯 Shortcode Management

Shortcodes Page

Manage all shortcodes from Base47 > Shortcodes:

• View all shortcodes - Complete list
• Copy to clipboard - One-click copying
• Search shortcodes - Find specific templates
• Preview templates - Quick preview modal
• Usage instructions - How to use each shortcode

Bulk Operations

• Copy multiple - Select and copy several shortcodes
• Export list - Export shortcodes as text file
• Print list - Print shortcode reference

🔍 Troubleshooting Shortcodes

Common Issues

Debug Mode

Enable debug mode to troubleshoot:

1. Go to Base47 > Settings
2. Enable Debug Mode
3. Check error logs for issues
4. View detailed error messages

🎯 Best Practices

Shortcode Usage

1. Use descriptive names - Choose clear shortcode names
2. Test thoroughly - Test on different devices
3. Document usage - Keep notes on custom shortcodes
4. Monitor performance - Check loading times
5. Keep it simple - Don't overcomplicate

Performance Tips

1. Enable caching - Use built-in caching
2. Optimize templates - Keep templates lightweight
3. Minimize requests - Combine CSS/JS files
4. Use CDN - Serve assets from CDN
5. Monitor usage - Track performance metrics

📚 Next Steps

• Template System - Understand how templates work
• Live Editor - Edit templates directly
• FAQ - Common questions and troubleshooting