0

I want to know the best use of adding custom JS/CSS to a theme.

I have built a small plugin which has a section to allow users to add CSS/JS to their theme. Now I am trying to figure out is which is the best way to do this:

  1. Save all of the code inside an custom DB and load this as plain code inside the header/footer.

  2. Save all of the code inside an custom js/css file(no DB) and add the file inside the /header/footer

Notice: these custom JS/CSS files are custom build by the users so the user can add the own rules inside the plugin.

Which is the better, most secure solution?

2 Answers 2

1

I actually ran into a similar issue yesterday. A theme I was working with was adding 500+ lines of internal styles to the header which absolutely drives me nuts! I ended up finding a clever solution online to work around this which you could use for CSS. The JavaScript side I'll explain toward the bottom.

--- :: CSS :: ---

There's a few key points in how this code works. Since you need to handle variables in your CSS files we need to make sure the file given supports PHP and has access to WordPress functions so to get any presets. We cannot do this using a .css file alone so we need to fool the server into presenting our PHP file as CSS.

This is purely for testing purposes: Create a file called customcss.php with the following code, note the PHP header() function needed to tell the server we're going to show text/css:

<?php
    header( "Content-type: text/css; charset: UTF-8" );
    $test = 'blue';
?>

body    {color: <?php echo $test; ?>;}

Next, we need to load this file in the context of WordPress so that we still have access to functions such as get_post_meta() or any global variables. Let's include this "css" file using WP AJAX. Note, when including or requiring we need to use absolute paths. This will look for your plugin folder and into the /css/ directory for your "css" php file.

function plugin_dynamicss() {
    include_once( plugin_dir_path( __FILE__ ) . '/css/customcss.php' );
    exit;
}
add_action( 'wp_ajax_plugin_dynamicss', 'plugin_dynamicss' );
add_action( 'wp_ajax_nopriv_plugin_dynamicss', 'plugin_dynamicss' );

Finally, we need to actually enqueue our CSS via wp_enqueue_scripts hook:

function plugin_enqueue_css() {
    wp_enqueue_style(
        'dynamicss', admin_url( 'admin-ajax.php' ) . '?action=plugin_dynamicss',
        array(),
        '',
        'screen'
    );
}
add_action( 'wp_enqueue_scripts', 'plugin_enqueue_css' );

--- :: JavaScript :: ---

Enqueueing JS with variables is much easier with wp_localize_script(). All you need to do is register the script, localize the script with data, and finally enqueue the script.

function plugin_enqueue_js() {
    wp_register_script( 'plugin_js', plugin_dir_path( __FILE__ ) . '/js/customjs.js' );

    $data = array(                      // Define Our Data
        'robert'    => 'bobbert',
        'nine'      => 'nein'
    );

    wp_localize_script( 'plugin_js', 'plugin_data', $data );    // Localize Our Data

    wp_enqueue_script( 'plugin_js' );
}
add_action( 'wp_enqueue_scripts', 'plugin_enqueue_js' );

The 2nd parameter of wp_localize_script() actually defines our JS Object name. In our object if we want to get and use one of the values we can say: alert( plugin_data.robert ); which will alert to the screen "bobbert".

-1

You've probably came across several different methods for including JavaScript and CSS.

There is one primary method recommended in the WordPress Codex.

The safe and recommended method of adding JavaScript to a WordPress generated page, and WordPress Theme or Plugin, is by using wp_enqueue_script(). This function includes the script if it hasn't already been included, and safely handles dependencies.

A safe way to add/enqueue a stylesheet file to the WordPress generated page. Use wp_enqueue_style( $handle, $src, $deps, $ver, $media ); This function wp_enqueue_style() does not return a value.

2
  • How does OP handle the user variables in JS / CSS with wp_enqueue_style / script? ...which allows users to add some CSS/JS to their theme...
    – Howdy_McGee
    Commented Aug 4, 2015 at 13:40
  • I know these function which I alrady use for the core files, but users can generate there own code and this I have to add to the theme
    – user759235
    Commented Aug 4, 2015 at 13:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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