I’m working on a WordPress project where I need to merge dynamic content management with JavaScript functionality. Right now I have a page that displays store locations in a sidebar while users can filter results using controls on the left side.
The main issue is that my JavaScript code lives in the footer.php file but the actual content gets managed through a regular WordPress page in the admin area. The client needs to be able to update this content easily without touching any code.
I’ve been using shortcodes with plugins like Visual Composer for other parts of the site which works great. But here I’m stuck because the filtering logic is separate from the content.
What I want is a simple shortcode system where the client can use something like:
The problem is that this needs to generate both HTML content at the top and JavaScript code at the bottom of the page. I can’t figure out how to make one shortcode handle both parts. Is there a WordPress way to do this or maybe a plugin that handles this kind of dual output?
I hit this exact issue last year building a property listing site. Here’s what worked: store your shortcode data in a global variable while processing content, then output the JavaScript using wp_footer hook. Set up your shortcode to collect location data into a PHP array, then add add_action(‘wp_footer’, ‘your_js_output_function’) inside the shortcode handler. When WordPress processes the shortcode, it’ll register the footer script to run later. Use a flag variable to check if the shortcode was actually used - keeps unnecessary JS off other pages. Your client gets their simple shortcode and you get clean HTML/JS separation without touching footer.php.
Use wp_add_inline_script - it’s perfect for this. When your shortcode runs, generate the HTML and queue the JavaScript with wp_add_inline_script attached to your main script handle. Everything stays in the shortcode function, but WordPress puts the JS in the footer where it belongs. I did this for a restaurant finder with custom shortcodes that needed complex filtering JavaScript. WordPress handles script placement automatically, so you don’t need global variables or extra hooks. Just enqueue your base JS file first, then attach the dynamic code to that handle.
try using wp_localize_script() to link your shortcode data with JS. make a shortcode for the HTML and enqueue the script, then wp_localize_script will send location info as JSON to your JS file. it works well for this kind of setup!
Skip WordPress for this - automate the whole thing properly. I’ve seen this scenario too many times. Making WordPress handle dynamic content with custom JavaScript becomes a maintenance nightmare.
Ditch the shortcodes and wp_footer hooks. Set up automation that manages store locations as structured data. Pull location info from your database, Google Sheets, or whatever system your client already uses.
The automation handles HTML generation and JavaScript injection automatically. No more manual shortcode updates when locations change. Client updates a spreadsheet, page content updates itself.
Built something similar for a retail chain last month - 200+ locations changing monthly. Instead of training staff on shortcode syntax, they update their store system and everything flows through automatically.
Filtering logic stays clean and separate from WordPress. The automation builds JSON data your JavaScript needs and injects it where it belongs.
This scales way better than shortcodes. Need new location types or filtering options? Modify the automation flow instead of hunting through WordPress code.