What would I need to write into a custom plugin in order to add a switch for a custom string of CSS to the edit page?

Question

I have created a page on one of our sites which has a few snippets of custom CSS to make it display in a very modern, 100% width style like this, as opposed to the standard, more constrained style of pages the site's theme allows.

This style of page, however, is not going to be used site-wide, so getting a new theme or editing the existing theme's child isn't really an option.

What I'd instead like to do is create a simple plugin that will add a checkbox to the edit page that, when checked, will load this custom CSS on the page in question. I know roughly how to set a plugin up, but how would I write it to;

• Add a checkbox to the edit page?
• If the checkbox is ticked, load the custom CSS?

While I could just add this custom CSS to each page manually, creating a plugin would mean transporting the code around from site to site will be much easier, and also mean that the risk of overwriting and losing it would be minimized.

Answer 1

This code should do the trick. Put this in your functions.php file.

function add_custom_css_meta_box()
{

    add_meta_box(
        'custom-css',
        'Custom CSS',
        'post_meta_checkbox',
        'page',
        'side'
    );
}
add_action('add_meta_boxes', 'add_custom_css_meta_box');

function post_meta_checkbox($post)
{
    $checkbox  = get_post_meta($post->ID, 'custom-css', true);
    $checked    = false;

    if($checkbox == 'true')
    {
        $checked = true;
    }

    ?>

    <p>
        <label>Tick this for custom CSS</label><br />
        <input type="checkbox" name="custom-css" id="custom-css" value="true" <?php if($checked == true) { echo 'checked'; } ?>/>
    </p>

    <?php
}

function save_post_meta()
{
    update_post_meta(get_the_ID(), 'custom-css', $_POST['custom-css']);
}
add_action('save_post', 'save_post_meta');

When you want to check if you need to load the CSS do an if statement and use get_post_meta($post->ID, 'custom-css', true) and check if it is true or false. Replace the $post->ID with how ever you're getting the page id. You could do this on the page.php file.

Answer 2

To create a plugin that would add an option page to your dashboard, follow this answer of mine. In the provided answer I have explained in detail how to do this.

Now, the CSS part. If you build your plugin the way I mentioned, you will be able to get the value of your checkbox by using this:

get_my_custom_plugin_value('checkbox');

You can use this in conjunction with a conditional to output some CSS when the checkbox is actually checked. This can be added to your plugin to do so:

if (get_my_custom_plugin_value('checkbox')==='on'){
    add_action('wp_enqueue_scripts','my_styles');
    function my_styles(){
        wp_enqueue_style('style-name','URL TO YOUR CSS FILE');
    }
}

Which is what you are looking for.