Creating Admin Options Page where users can make changes to a theme

Question

I finally got it to work after a long time of trying to figure this out!

Credit to Samuel Elh for helping me, http://sam.elegance-style.com/

This is useful if anyone wants to allow users to make small style changes to a theme. Rather than create many child themes, if you just need some stylesheet overrules to make changes to a theme, this is ideal:

  /*
Plugin Name: test1
*/

// register CSS files ready
function register_custom_styles() {
    wp_register_style( 'style1', plugins_url( '/css/themes/s1.css', (__FILE__) ) );
    wp_register_style( 'style2', plugins_url( '/css/themes/s2.css', (__FILE__) ) );
    wp_register_style( 'style3', plugins_url( '/css/themes/s3.css', (__FILE__) ) );
}
add_action( 'init', 'register_custom_styles' );

//create admin sub menu - admin>appearance>styles
add_action('admin_menu', 'my_custom_submenu');
function my_custom_submenu() {
    add_submenu_page( 'themes.php', 'Styles', 'Styles', 'manage_options', 'styles', 'my_custom_submenu_page' );
}

// register option
add_action( 'admin_init', 'elh_register_settings' );
function elh_register_settings() {
    register_setting( 'elh-settings-group', 'user_select_styles' );
}

//create admin page for admin>appearance>styles
function my_custom_submenu_page() {
?>
<div>
  <h2>Select Style</h2>
  <form method="post" enctype="multipart/form-data" action="options.php">
    <?php
        settings_fields( 'elh-settings-group' );
        do_settings_sections( 'elh-settings-group' );
        $selected = (get_option('user_select_styles') != '') ? get_option('user_select_styles') : '';
    ?>

     <!--this option to wp_enqueue_style('style1')-->
     <label>  <input type="radio" name="user_select_styles" value="style1" <?php if($selected == "style1") echo "checked"; ?> />  <!--<img src="https://path-to-style1-img" /> -->  Style1  </label>  

     <br /> 

     <!--this option to wp_enqueue_style('style2')-->
     <label>  <input type="radio" name="user_select_styles" value="style2" <?php if($selected == "style2") echo "checked"; ?> />  <!--<img src="https://path-to-style2-img" /> --> Style2  </label>  

     <br /> 

     <!--this option to wp_enqueue_style('style3')-->
     <label>  <input type="radio" name="user_select_styles" value="style3" <?php if($selected == "style3") echo "checked"; ?> />  <!--<img src="path-to-style3-img" /> --> Style3  </label>  

     <br /> 

     <?php submit_button(); ?>

  </form>

  <h2><?php if($selected != '') printf("You have selected %s.", $selected); ?></h2>

</div>
<?php
}

function enqueue_my_css() {

    $selected = (get_option('user_select_styles') != '') ? get_option('user_select_styles') : '';
    if($selected != '')
        wp_enqueue_style( $selected , plugins_url( '/css/'.$selected.'.css', (__FILE__) ) );

}
add_action('wp_enqueue_scripts', 'enqueue_my_css', 99);

Not sure if I’m supposed to tick my own answer.

Related Posts: