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

Question

I need help to finish this last bit of php code. I'm trying to create an admin options page similar to in admin>settings>discussions like how a user can select an avatar, but instead of selecting an avatar, the user selects a style option that makes a change to the theme (by enqueueing a CSS file on the frontend).

My CSS files are complete. For the php, so far I have this:

<?php

// register CSS files ready
function register_custom_styles() {
    wp_register_style( 'style1', plugins_url( '/css/style1.css', (__FILE__) ) );
    wp_register_style( 'style2', plugins_url( '/css/style2.css', (__FILE__) ) );
    wp_register_style( 'style3', plugins_url( '/css/style3.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' );
}


//create admin page for admin>appearance>styles
function my_custom_submenu_page() {
?>
<div>
  <h2>Select Style</h2>
  <form method="post" action="options.php">

     <!--this option to wp_enqueue_style('style1')-->
     <label>  <input type="radio" name="myoption[radio1]" value="style1" />  <img src="//path-to-style1-img" />  Style1  </label>  

     <br /> 

     <!--this option to wp_enqueue_style('style2')-->
     <label>  <input type="radio" name="myoption[radio1]" value="style2" />  <img src="//path-to-style2-img" />  Style2  </label>  

     <br /> 

     <!--this option to wp_enqueue_style('style3')-->
     <label>  <input type="radio" name="myoption[radio1]" value="style3" />  <img src="path-to-style3-img" />  Style3  </label>  

     <br /> 

     <?php submit_button(); ?>

  </form>
</div>
<?php
}

As you can see, when a user selects a radio input and clicks the submit button, I don't know how to connect the option with the registered CSS file.

https://codex.wordpress.org/Creating_Options_Pages shows how to create an options page, but there are no examples of how to enqueue a CSS file for an option.

Any help appreciated.

Answer 1

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="//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="//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.

Answer 2

Hay In wordpress theme you can add option panel you can not registre script or wp_enqueue_scripts you can add

/*-----------------------------------------------------------*
/*          THEME OPTION ADMIN PRINT SCRIPT EXAMPLE
/*-----------------------------------------------------------*/

add_action( 'admin_menu', 'ease_print_script' );
function ease_print_script() {      
    add_action( 'admin_print_scripts-' . $ease_options_page, 'ease_print_scripts' );
}
function ease_print_scripts() {
    wp_enqueue_style( 'bootstrap', get_template_directory_uri().'/framework/css/bootstrap.css');        
    wp_enqueue_style( 'bootstrap.vertical-tabs', get_template_directory_uri().'/framework/css/bootstrap.vertical-tabs.css');
    wp_enqueue_script( 'script', get_template_directory_uri().'/framework/js/script.js');
    wp_enqueue_script( 'bootstrap', get_template_directory_uri().'/framework/js/bootstrap.js');         
}   

YOUR OPTION PANEL PAGE CREATED CODE HERE..

/*-----------------------------------------------------------*
/*          THEME OPTION PAGE
/*-----------------------------------------------------------*/
add_action( 'admin_init', 'ease_add_options_1' );
function ease_add_options_1() {
    // Register new options
    register_setting( 'ease_options', 'ease_options', 'ease_options_validate' );
}
/*-----------------------------------------------------------*
/*          THEME OPTION ADMIN IN MENU
/*-----------------------------------------------------------*/
add_action( 'admin_menu', 'ease_add_page_1' );
function ease_add_page_1() {
    /**
     *  IF you want to add in wordpress ==  menu page OR add theme page ==
     */

    // add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );
    // MENU PAGE
    $ease_options_page = add_menu_page( '__ease', 'Theme Option', 'manage_options', '__ease', 'yout_code_here' );

    // THEME PAGE
    // add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );
    // $ease_options_page = add_theme_page( 'ease', 'Theme Option', 'manage_options', 'ease', 'ease_options_page' );

}
function yout_code_here(){
    ?>
    <h2>Select Style</h2>
    <form method="post" action="options.php">
      <!--this option to wp_enqueue_style('style1')-->
      <label>
        <input type="radio" name="myoption[radio1]" value="style1" />
        <img src="//path-to-style1-img" /> Style1 </label>
      <br />
      <!--this option to wp_enqueue_style('style2')-->
      <label>
        <input type="radio" name="myoption[radio1]" value="style2" />
        <img src="//path-to-style2-img" /> Style2 </label>
      <br />
      <!--this option to wp_enqueue_style('style3')-->
      <label>
        <input type="radio" name="myoption[radio1]" value="style3" />
        <img src="path-to-style3-img" /> Style3 </label>
      <br />
      <?php submit_button(); ?>
    </form>
    <?php 
}

wordpressoption-panel