Right now, I'm able to dynamically generate js and css, based on my theme options

To do that i set up a query var, that if present redirects to a php file, which then loads itself as a javascript file. Afterwhich it then takes the jqpostID, and and grabs any options i need to generate my js.

I basically have to include a script link that references a location portion of my html http://mywordpress.com/?dynamic=js&jqpostid=130

I'd like to make it more readable, and less apparent that it is being dynamically generated. maybe like this...


i suppose this would even be better... http://mywordpress.com/dynamic/js/123.js

I figure i have to hook into the rewrite engine of wordpress somehow. And add a new rule. Any help, or references to other articles would be great, or some sample code would be awesome.


adding these functions should do the trick.

First things first, add this line to functions.php while you are working on this:

add_action('init', 'flush_rewrite_rules');

What that code will do is constantly flush the rewrite rules, it makes this easier to test while you are working on it, instead of having to go in and manually reset them after every little change you make to the rewrite rules. MAKE SURE you remove this when you are done and satisfied that everything is working.

Next, this function will create the rewrite rules you want.

function custom_add_rewrite_rules( $wp_rewrite ) {
    $new_rules = array( 
        'dynamic/js/(\d+).js' => 'index.php?dynamic=js&jqpostid=' . $wp_rewrite->preg_index(1),
        'dynamic/css/(\d+).css' => 'index.php?dynamic=css&csspostid=' . $wp_rewrite->preg_index(1)
    $wp_rewrite->rules = $new_rules + $wp_rewrite->rules;
add_action('generate_rewrite_rules', 'custom_add_rewrite_rules');

I took a stab at what maybe the CSS rule would look like as well, you may have to adjust it for your needs, I just figured it would be formatted in a way similar to what you described for the javascript. These may cause some strange behavior when it tries to rewrite the URL into a file extension, and it may not work at all. In that case, just remove the .js and .css from the end of the first part of the associative array entries.

function custom_add_rewrite_rules( $wp_rewrite ) {
    $new_rules = array( 
        'dynamic/js/(\d+)' => 'index.php?dynamic=js&jqpostid=' . $wp_rewrite->preg_index(1),
        'dynamic/css/(\d+)' => 'index.php?dynamic=css&csspostid=' . $wp_rewrite->preg_index(1)
    $wp_rewrite->rules = $new_rules + $wp_rewrite->rules;
add_action('generate_rewrite_rules', 'custom_add_rewrite_rules');

Basically all this does is sets up the URL to look for and the string it runs in its place. The first part of the array entry has a regular expression that looks for numbers only, the portion in parenthesis. (this can be adjusted to look for a specific number of digits, if needed) The match of which is passed into the second part of the array entry as what will be returned in the string.

I hope this helps you, feel free to contact me if you have any problems.

  • Thanks Drew, Works perfectly, even using the extensions. I definitely need to brush up on my redirection expressions knowledge. At any rate, i should try to put together a writeup on dynamically generated cs and js, that reference an extenernal file. Inline CSS and JS is not ideal for readiblity. The only thing left now is to figure out how to cache the results into an actually written file :-P – Wok Apr 7 '11 at 22:22
  • Regular Expresions can be a mind blower even for seasoned programmers. I know I don't like them at all. For things like this, I usually just dig around in the $wp_rewrite array for things WordPress is already using and re-purpose it for myself. As far as caching results, You can load a PHP file as JavaScript file in the head of your HTML via a <script src=''></script> and it will be understood by the browser all the same. I've never done it myself, so I can't give you specifics, but a quick google search should open the door for you. The same method should work with CSS as well, via <link>. – Drew Gourley Apr 8 '11 at 11:18
  • @Wok: If you are going to play with rewrite rules, use my Rewrite analyzer plugin. It shows you all current rules and you can play with new URLs to see what rules match. – Jan Fabry Apr 8 '11 at 12:05
  • @Jan Fabry: I was just looking for something like this, THANK YOU VERY MUCH! – Drew Gourley Apr 8 '11 at 12:18
  • @janfabry @drewgourley thanks guys. Drew - I got the <script src=""> down. I think i have a pretty good setup now.I guess cache files will be for another day. Jan - Your rewrite rules analyer is a great tool. I hope you keep it up. :-) – Wok Apr 8 '11 at 17:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.