Building custom Elementor sections by separating Data (ACF), Logic (PHP), and Action (JS) to bypass firewalls and maximize performance.
Why Two Separate Codes?
In a standard WordPress environment, saving JavaScript inside a PHP snippet is the fastest way to trigger a Server 500 Error. Modern host firewalls (ModSecurity) flag script tags inside PHP as a “Code Injection” attack. To build reliably, we use a Split-Snippet Architecture.
Part 1: The Logic (PHP Snippet)
This snippet handles the “Skeleton.” It pulls your data from the database and maps it to HTML. Never put <script> tags here.
Part 2: The Action (HTML Snippet)
This snippet handles the “Brain.” It lives in the footer and waits for the page to load before running any logic (like Google Sheets API calls or lead tracking).
Location: Code Snippets (HTML) // Run in Footer
Critical Troubleshooting: If the shortcode displays as plain text on your site (e.g., you see “[custom_section]”), your plugin is likely in Safe Mode. Check your
wp-config.php and ensure CODE_SNIPPETS_SAFE_MODE is set to false.
The Deployment Workflow
- ACF: Create your field group and set the Location Rule to the specific page.
- PHP: Save the Logic Snippet and register a unique shortcode.
- JS: Save the Action Snippet and set it to execute in the Site-wide Footer.
- Elementor: Drop a Shortcode Widget onto the page and enter your registered tag.