2

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.

2

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.

0

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 
}

  • 1
    Thanks for your help Mahavar Hitesh. Unfortunately I couldn't get your solution to work, but I finally got it working, code is above. – user3438958 Jul 21 '15 at 22:30

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.