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.