{"id":4882,"date":"2009-11-29T13:33:24","date_gmt":"2009-11-29T20:33:24","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=4882"},"modified":"2009-11-29T13:34:07","modified_gmt":"2009-11-29T20:34:07","slug":"use-php-inside-javascript","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/htaccess\/use-php-inside-javascript\/","title":{"rendered":"Use PHP inside JavaScript"},"content":{"rendered":"

This has only really been tested on Media Temple (gs) servers.<\/p>\n

In the folder with the JavaScript, the .htaccess file should include:<\/p>\n

<FilesMatch \"^.*?api.*?$\">\r\nSetHandler php5-script\r\n<\/FilesMatch><\/code><\/pre>\n

In that above example, any file that includes the string “api” will be processed as PHP. Feel free to alter that RegEx.<\/p>\n

Then in the JavaScript file itself, set the ContentType back to JavaScript:<\/p>\n

<?php\r\n\t\/\/ Sets the proper content type for javascript\r\n\theader(\"Content-type: application\/javascript\");\r\n?><\/code><\/pre>\n

That will ensure browsers reading the file will interpret it as JavaScript. Now you can use <php … ?> tags in the JavaScript file to do whatever PHP stuff you need to do.<\/p>\n","protected":false},"excerpt":{"rendered":"

This has only really been tested on Media Temple (gs) servers. In the folder with the JavaScript, the .htaccess file should include: <FilesMatch “^.*?api.*?$”> SetHandler php5-script <\/FilesMatch> In that above example, any file that includes the string “api” will be processed as PHP. Feel free to alter that RegEx. Then in the JavaScript file itself, […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3826,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":4181,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/go-back-button\/","url_meta":{"origin":4882,"position":0},"title":"“Go Back” Button","date":"September 20, 2009","format":false,"excerpt":"Browsers already have \"back\" buttons, so you'd better have a darn good reason for needing to put one on your page! Input button with inline JavaScript This is totally obtrusive, but you could fix that by only appending this button through JavaScript. PHP If JavaScript isn't a possibility, you could\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":163748,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/print-object-screen\/","url_meta":{"origin":4882,"position":1},"title":"Print Object To Screen","date":"February 22, 2014","format":false,"excerpt":"PHP has a nice print_r function for printing out information about a variable to the screen. console.log() is great for that in JavaScript also, but sometimes you just need\/want to look at it on the screen. function print_r(o) { return JSON.stringify(o,null,'\\t').replace(\/\\n\/g,'').replace(\/\\t\/g,'\u00a0\u00a0\u00a0'); } So if you have an object like: var\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5000,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/random-hex-color\/","url_meta":{"origin":4882,"position":2},"title":"How To Generate a Random Color in JavaScript","date":"December 10, 2009","format":false,"excerpt":"Here's a quicky (there is a PHP version too): var randomColor = Math.floor(Math.random()*16777215).toString(16); See the Pen Generate New Random Hex Color with JavaScript by Chris Coyier (@chriscoyier) on CodePen. If you'd prefer they are a bit more pleasing or need to generator colors that work together, we have an article\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7435,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/htmlentities-for-javascript\/","url_meta":{"origin":4882,"position":3},"title":"htmlEntities for JavaScript","date":"September 14, 2010","format":false,"excerpt":"htmlentities() is a PHP function which converts special characters (like <) into their escaped\/encoded values (like <). This allows you to show to display the string without the browser reading it as HTML. JavaScript doesn't have a native version of it. If you just need the very basics to so\u2026","rel":"","context":"With 29 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":376813,"url":"https:\/\/css-tricks.com\/wordpress-block-theme-guide\/","url_meta":{"origin":4882,"position":4},"title":"WordPress Block Themes CSS and Style Settings Guide","date":"January 31, 2023","format":false,"excerpt":"Managing CSS in WordPress has dramatically changed since full-site editing features were introduced to block themes. This guide is geared toward block themes and how to configure them, from enabling editor features and controls to defining theme-wide CSS and customizaing the appearance of specific blocks.","rel":"","context":"In \"WordPress\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":155747,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/29-getting-production-ready\/","url_meta":{"origin":4882,"position":5},"title":"#29: Getting Production Ready","date":"November 12, 2013","format":false,"excerpt":"We're going to bring it back out to a normal text editor in this screencast, just as we started. In a \"real world\" situation, these things are true: You want to break up your JavaScript into as many small files as makes sense to you. Just like we broke up\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/4882"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=4882"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/4882\/revisions"}],"predecessor-version":[{"id":4884,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/4882\/revisions\/4884"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3826"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=4882"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=4882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}