Loading...
Skip to Content

Adding Gains Lookup to Wordpress site

Image Description

Vehicle Lookup Plugin

A comprehensive guide for installing and configuring the Vehicle Lookup System WordPress plugin.

Seamless Integration Automatic Theming Responsive Design Shortcode-Based

 Overview

The Vehicle Lookup System WordPress plugin seamlessly integrates your vehicle performance lookup system into any WordPress website. It provides automatic color theming, responsive design, and requires minimal configuration.

Key Features

  • Seamless Integration: Works exactly like the remote site integration
  • Automatic Theming: Colors and branding load automatically from your main system
  • Responsive Design: Works perfectly on all devices and WordPress themes
  • Easy Setup: Simple shortcode implementation
  • Professional Admin Interface: Clean settings page for API key configuration
  • No Admin Overhead: All vehicle lookup administration remains on the main website

 Requirements

System Requirements

  • WordPress: 5.0 or higher
  • PHP: 7.4 or higher
  • Internet Connection: Required for API calls to the main system

Browser Support

  • Chrome 70+
  • Firefox 65+
  • Safari 12+
  • Edge 79+

 Installation Methods

Method 1: WordPress Admin Upload (Recommended)

  1. Download the Plugin
    • Log into your admin panel at lookup.remappingwebsite.com
    • Go to API Integration page
    • Download the vehicle-lookup-wordpress-plugin.zip file
  2. Upload to WordPress
    • Go to WordPress Admin → Plugins → Add New
    • Click “Upload Plugin”
    • Choose the downloaded zip file
    • Click “Install Now”
  3. Activate the Plugin
    • Click “Activate Plugin” after installation
    • The plugin will appear in your Plugins list

Method 2: Manual Installation

  1. Download and Extract
    • Download the vehicle-lookup-wordpress-plugin.zip file
    • Extract the contents to get the vehicle-lookup-wordpress-plugin folder
  2. Upload via FTP/SFTP
    • Upload the folder to /wp-content/plugins/
    • Ensure structure: /wp-content/plugins/vehicle-lookup-wordpress-plugin/
  3. Activate in WordPress
    • Go to WordPress Admin → Plugins, find “Vehicle Lookup System” and click “Activate”

Method 3: WordPress CLI (Advanced)

WP-CLI:
<button class="copy" data-copy>Copy</button># Download and install via WP-CLI
wp plugin install vehicle-lookup-wordpress-plugin.zip --activate

⚙️ Configuration

Step 1: Get Your API Key

  1. Log into Admin Panel
    • Go to lookup.remappingwebsite.com
    • Log in with your credentials
  2. Navigate to API Integration
    • Find the “Your API Key” section
    • Copy the API key (e.g. a1b2c3d4e5f6…)

Step 2: Configure in WordPress

  1. Access Plugin Settings: WordPress Admin → Settings → Vehicle Lookup
  2. Enter API Key: Paste your API key and click Save Settings
  3. Verify: The plugin starts working immediately; no extra config required

What the API Key Controls

  • Vehicle Makes (available brands)
  • Custom Colors (brand scheme and styling)
  • Business Information (company/contact)
  • Service Options (services & pricing)
  • Branding (logos, images, visuals)

 Usage

Basic Implementation

<button class="copy" data-copy>Copy</button>[vehicle_lookup]

Where You Can Use the Shortcode

Pages & Posts

  • Add [vehicle_lookup] in Classic or Gutenberg editors

Widgets

  • Use the “Shortcode” widget with [vehicle_lookup]

Theme Files

<button class="copy" data-copy>Copy</button><?php echo do_shortcode('[vehicle_lookup]'); ?>

Page Builders

  • Elementor: Shortcode widget
  • WPBakery: Raw HTML element
  • Beaver Builder: HTML module
  • Gutenberg: Custom HTML block

Example Page Layouts

Simple Integration

<button class="copy" data-copy>Copy</button><h1>Vehicle Performance Lookup</h1>
<p>Check the tuning gains available for your vehicle:</p>

[vehicle_lookup]

<p>Get instant quotes for professional remapping services.</p>

Advanced Layout with Custom Styling

<button class="copy" data-copy>Copy</button><div class="vehicle-lookup-section">
  <div class="container">
    <h2>Find Your Vehicle's Tuning Potential</h2>
    <p class="lead">Discover the performance gains available for your specific vehicle.</p>

    [vehicle_lookup]

    <div class="additional-info">
      <h3>Why Choose Our Remapping Service?</h3>
      <ul>
        <li>Professional ECU tuning</li>
        <li>Warranty included</li>
        <li>Dyno testing available</li>
      </ul>
    </div>
  </div>
</div>

Customization Options

CSS Customization

<button class="copy" data-copy>Copy</button>/* Custom styling for the vehicle lookup container */
#vehicle-lookup-container{
  margin:30px 0;
  border-radius:8px;
  box-shadow:0 4px 6px rgba(0,0,0,.1);
}

/* Custom button styling */
#vehicle-lookup-container .btn-primary{
  background-color:#your-brand-color;
  border-color:#your-brand-color;
}

Gauge Style Customization

The plugin loads the default performance-arcs.css. To change gauge styles, add overrides via your theme or child theme. Contact support for bespoke styles.

 Troubleshooting

1. “Configuration Required” Message

Fix: Go to Settings → Vehicle Lookup, confirm API key, then Save Settings.

2. Vehicle Lookup Not Displaying

  • Ensure [vehicle_lookup] is placed correctly
  • Verify API key
  • Open browser console to check JavaScript errors
  • Try a default theme to isolate conflicts

3. Styling Issues

  • Plugin includes CSS overrides for common conflicts
  • Check if theme CSS is overly aggressive; add targeted overrides

4. API Errors

  • Confirm internet connectivity
  • Check main vehicle lookup system availability
  • Validate that your API key is active

5. Mobile Display Issues

  • Plugin is responsive by default
  • Test multiple devices/browsers; look for theme mobile CSS overrides

Debug Mode

  1. Add to wp-config.php:
    <button class="copy" data-copy>Copy</button>define('WP_DEBUG', true);
    define('WP_DEBUG_LOG', true);
    define('WP_DEBUG_DISPLAY', false);
  2. Check logs at /wp-content/debug.log

Browser Console Debugging

  1. Open Developer Tools (F12)
  2. Check Console for JS errors
  3. Use Network tab for failed API requests

 Support

Plugin Support

  • WordPress Admin: Settings → Vehicle Lookup
  • Documentation: This installation guide
  • WP Support Forums: For general WordPress issues

Vehicle Lookup System Support

  • Main Website: lookup.remappingwebsite.com
  • Administration: All settings & management
  • Technical Support: Contact your system administrator
  • API Documentation: Available in admin panel

 Updates

Plugin Updates

  • Notified via WordPress
  • Update through Plugins → Updates
  • Always backup before updating

System Updates

  • Vehicle lookup system updates are automatic
  • No action required from WordPress users

 Changelog

Version 1.0.0

  • Initial release
  • WordPress integration with shortcode support
  • Automatic CSS and JavaScript loading
  • Admin settings page for API key configuration
  • Responsive design integration
  • Professional error handling

 License

This plugin is licensed under the GPL v2 or later.

 Contributing

This plugin is designed to work with the Vehicle Lookup System. For feature requests or bug reports related to the vehicle lookup functionality, please contact your system administrator.

Built by Remapping Website — Specialist Web Design & Portals for the Tuning Industry. More info: remappingwebsite.com

Quick Reference

Installation Checklist

  • <input type="checkbox" /> WordPress 5.0+ installed
  • <input type="checkbox" /> PHP 7.4+ available
  • <input type="checkbox" /> Plugin downloaded and installed
  • <input type="checkbox" /> Plugin activated
  • <input type="checkbox" /> API key obtained from admin panel
  • <input type="checkbox" /> API key configured in WordPress
  • <input type="checkbox" /> Shortcode [vehicle_lookup] added
  • <input type="checkbox" /> Tested on different devices

Common Shortcodes

  • [vehicle_lookup] — Basic vehicle lookup
  • [vehicle_lookup style="modern"] — With custom style (if supported)

Important URLs

  • Admin Panel: lookup.remappingwebsite.com
  • API Documentation: Available in admin panel
  • Support: Contact your system administrator
<script> (function(){ var root=document.currentScript.closest('.doc-lookup'); if(!root) return; root.querySelectorAll('[data-copy]').forEach(function(btn){ btn.addEventListener('click', function(){ var code=btn.nextElementSibling; if(!code) return; var text=code.innerText; navigator.clipboard.writeText(text).then(function(){ var old=btn.textContent; btn.textContent='Copied ✓'; setTimeout(function(){btn.textContent=old},1200); }); }); }); })(); </script>