Understanding MonsterTools Tool Pages & Shortcodes

MonsterTools provides a flexible system for displaying and organizing your tools on individual pages. Each tool comes with two specialized shortcodes that give you complete control over how the tool's form and results are displayed on the page.

Tool Shortcodes Overview

Every tool in MonsterTools has two dedicated shortcodes that work together:

1. Tool Form Shortcode - [monstertool_form]

Displays the input form for the tool where users enter data, upload files, or configure settings.

2. Tool Result Shortcode - [monstertool_result]

Displays the output, results, or processed data after the tool has been executed.

Key Features:

• No attributes required - Both shortcodes automatically detect the current tool/page

• Flexible placement - Place form and result sections anywhere on your page

• Automatic fallback - If you omit either shortcode, the system injects it automatically

• AJAX-powered - Forms process seamlessly without page reloads (based on plan settings)

Basic Tool Page Structure

Here's how a typical tool page should be structured:

<!-- Tool Introduction Section -->
<h2>About This Tool</h2>
<p>This tool helps you convert images to PDF format with high quality.</p>

<!-- Tool Form Section -->
<h3>Convert Your Images</h3>
[monstertool_form] 
<!-- Tool Instructions -->
<h3>How to Use</h3>
<p>Upload your images and click convert...</p>

<!-- Tool Results Section -->
<h3>Your Results</h3>
[monstertool_result] 
<!-- Additional Content -->
<h3>FAQ</h3>
<p>Common questions about image to PDF conversion...</p>

Shortcode Implementation Examples

Minimal Implementation

[monstertool_form]
[monstertool_result]

Advanced Layout with Custom Styling

<div class="tool-container">
    <div class="tool-sidebar">
        <h3>Quick Settings</h3>
        [monstertool_form]
    </div>
    
    <div class="tool-main">
        <h3>Conversion Results</h3>
        [monstertool_result]
    </div>
</div>

Single Shortcode Usage

<!-- Only show the form - result will be automatically injected -->
[monstertool_form] 
<!-- Only show results area - form will be automatically injected -->
[monstertool_result]

How the Shortcodes Work

Initial State

When a user first visits a tool page:

• [monstertool_form] displays the complete input form

• [monstertool_result] shows an empty or placeholder state

After Form Submission

When the user submits the form (via AJAX or traditional POST):

• The form processes based on the user's subscription plan

• [monstertool_result] displays the processed output, download links, or results

• The form may reset or show new options for additional processing

Automatic Injection Logic

If you don't include both shortcodes, MonsterTools automatically injects the missing ones:

• Missing form: Injected at the top of the post content

• Missing result: Injected at the bottom of the post content

• Both missing: Both are injected (form top, result bottom)

Tool Settings & Configuration

Each tool has its own settings metabox in the WordPress admin. While settings vary by tool, all tools share common configuration options.

Common Tool Settings

Icon Settings (All Tools):

• Icon Type: Choose between font icon or image icon

• Font Icon Class: Enter CSS class for font-based icons (Font Awesome, etc.)

• Image Icon: Upload or select a custom image icon

• Default: Uses font-based icons for better performance

Access & Plan Settings:

• Subscription plan requirements

• Usage limits per plan

• Free tier access settings

Advanced Customization

Custom CSS Styling

/* Style the tool form container */
.monstertool-form {    
    background: #f9f9f9;    padding: 20px;    border-radius: 8px;
}

/* Style the results section */
.monstertool-result {    
    border: 2px solid #e1e1e1;    padding: 15px;    margin-top: 20px;
}

Template Overrides

You can customize the form and result templates by creating these files in your theme:

your-theme/monster-tools/tools/tool-form.php
your-theme/monster-tools/tools/results/tool-result.php

Custom Hook Integration

// Add custom content before tool form
add_action('monstertools_upgrade_notice', function($tool_id) {    
    echo '<div class="tool-notice">Premium feature available!</div>';
});

// Modify form data.
add_filter('monstertools_pre_validate', function($status, $payload) {    
   return new \WP_Error('recaptcha_failed', 'Captcha is required');
}, 10, 2);

// Modify result output
add_filter('monstertools_tool_result', function($result, $status, $tool) {    
    $result['new'] = 'Some New Data.';
}, 10, 3);

Best Practices for Tool Pages

1. Clear Instructions: Always explain what the tool does and how to use it

2. Visual Hierarchy: Use headings to separate form, results, and information

3. Mobile Optimization: Test the tool on mobile devices

4. Loading States: Consider adding loading indicators for long processes

5. Error Handling: Provide clear error messages for failed processes

6. Result Preview: Show sample results or demo outputs when possible

Troubleshooting Common Issues

• Shortcodes not working? Verify you're on a valid tool post type page

• Form not submitting? Check if the user has the required subscription plan

• Results not showing? Ensure the tool is properly configured and drivers are set up

• Missing icons? Verify icon settings in the tool metabox

By using the [monstertool_form] and [monstertool_result] shortcodes strategically, you can create professional, user-friendly tool pages that provide excellent user experience while maintaining complete design control over your MonsterTools installation.