1

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.

0

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.

0

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.

  • Will that place a checkbox on in the edit page of pages I want to edit, or in an options page? – McOwen Jul 3 '17 at 13:15
  • @McOwen Do you want each page to have its own separate checkbox? – Jack Johansson Jul 3 '17 at 13:17
  • Correct, yes, so I can click on or off for each. – McOwen Jul 3 '17 at 13:18
  • @McOwen Then the metabox is the efficient way. The other answer provides this. My solution will add an options page, I can change it to print a separate checkbox for each page, but since the other answer already provided a metabox solution, it's not necessary. – Jack Johansson Jul 3 '17 at 13:19

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.