How to display custom style based on theme option select box

4 Views

How can I display a different style snippet if a user selects and option from my theme options page select box.

For example. To show the sidebar on the right a user would select “Right” and the default stylesheet would be used. However, if they chose “Left” to display it on the left, a small style snippet would appear that overrides the default stylesheet.

Read More

This is how I do it for checkboxes if that helps. 

<?php if ( of_get_option('show_post_sidebar', false ) ) { ?>
        <!-- default styles would be used -->
    <?php } else {?>
        <style type="text/css" media="screen">
            .post{width:720px}
        </style>
    <?php } ?>
Post Views: 4

Related posts

Leave a Reply

2 comments

  1. Just put your dynamic CSS inside of a callback function, hooked into wp_print_script, e.g.

    function mytheme_custom_css() {
    ?>
    <script type="text/css">
    <?php if ( of_get_option('show_post_sidebar', true ) ) { ?>
        .post{width:720px}
    <?php } ?>
    </script>
    <?php
}
add_action( 'wp_print_scripts', 'mytheme_custom_css' );

    Add as few, or as many, conditional CSS rules as you need.

  2. I myself have been researching this for my personal blog. There seem to be a few plugins if you’re not opposed to using one.

    Edit:
    WordPress appears to have a built-in function for this.

    Edit again:
    I’m sorry but I think I mis-read your question. I assumed that you were looking for a way to change themes based on user preference. I guess I should have read more carefully rather than skimming quickly.