customization - Changing the CSS with a plugin

IT技术

更新时间：2025-03-173

admin管理员组
文章数量:1328777

I'm trying to make a plugin that changes the CSS file. My client want to change the colors each season, and we want to make it foolproof so they won't break anything.

I've managed to create the option page but I can't seem to get the actual function to work.

<?php
class SeizoensKleuren {
    private $seizoens_kleuren_options;

    public function __construct() {
        add_action( 'admin_menu', array( $this, 'seizoens_kleuren_add_plugin_page' ) );
        add_action( 'admin_init', array( $this, 'seizoens_kleuren_page_init' ) );
    }

    public function seizoens_kleuren_add_plugin_page() {
        add_menu_page(
            'Seizoens kleuren', // page_title
            'Seizoens kleuren', // menu_title
            'manage_options', // capability
            'seizoens-kleuren', // menu_slug
            array( $this, 'seizoens_kleuren_create_admin_page' ), // function
            'dashicons-admin-appearance', // icon_url
            81 // position
        );
    }

    public function seizoens_kleuren_create_admin_page() {
        $this->seizoens_kleuren_options = get_option( 'seizoens_kleuren_option_name' ); ?>

        <div class="wrap">
            <h2>Seizoens kleuren</h2>
            <p>Verander hier de kleuren van de site n.a.v. het seizoen!</p>
            <?php settings_errors(); ?>

            <form method="post" action="options.php">
                <?php
                    settings_fields( 'seizoens_kleuren_option_group' );
                    do_settings_sections( 'seizoens-kleuren-admin' );
                    submit_button();
                ?>
            </form>
        </div>
    <?php }

    public function seizoens_kleuren_page_init() {
        register_setting(
            'seizoens_kleuren_option_group', // option_group
            'seizoens_kleuren_option_name', // option_name
            array( $this, 'seizoens_kleuren_sanitize' ) // sanitize_callback
        );

        add_settings_section(
            'seizoens_kleuren_setting_section', // id
            'Settings', // title
            array( $this, 'seizoens_kleuren_section_info' ), // callback
            'seizoens-kleuren-admin' // page
        );

        add_settings_field(
            'seizoen_0', // id
            'Seizoen:', // title
            array( $this, 'seizoen_0_callback' ), // callback
            'seizoens-kleuren-admin', // page
            'seizoens_kleuren_setting_section' // section
        );
    }

    public function seizoens_kleuren_sanitize($input) {
        $sanitary_values = array();
        if ( isset( $input['seizoen_0'] ) ) {
            $sanitary_values['seizoen_0'] = $input['seizoen_0'];
        }

        return $sanitary_values;
    }

    public function seizoens_kleuren_section_info() {
        
    }

    public function seizoen_0_callback() {
        ?> <select name="seizoens_kleuren_option_name[seizoen_0]" id="seizoen_0">
            <?php $selected = (isset( $this->seizoens_kleuren_options['seizoen_0'] ) && $this->seizoens_kleuren_options['seizoen_0'] === 'lente') ? 'selected' : '' ; ?>
            <option value="lente" <?php echo $selected; ?>>Lente</option>
            <?php $selected = (isset( $this->seizoens_kleuren_options['seizoen_0'] ) && $this->seizoens_kleuren_options['seizoen_0'] === 'zomer') ? 'selected' : '' ; ?>
            <option value="zomer" <?php echo $selected; ?>>Zomer</option>
            <?php $selected = (isset( $this->seizoens_kleuren_options['seizoen_0'] ) && $this->seizoens_kleuren_options['seizoen_0'] === 'herfst') ? 'selected' : '' ; ?>
            <option value="herfst" <?php echo $selected; ?>>Herfst</option>
            <?php $selected = (isset( $this->seizoens_kleuren_options['seizoen_0'] ) && $this->seizoens_kleuren_options['seizoen_0'] === 'winter') ? 'selected' : '' ; ?>
            <option value="winter" <?php echo $selected; ?>>Winter</option>
        </select> <?php
    }

}
if ( is_admin() )
    $seizoens_kleuren = new SeizoensKleuren();

/* 
 * Retrieve this value with:
 * $seizoens_kleuren_options = get_option( 'seizoens_kleuren_option_name' ); // Array of All Options
 * $seizoen_0 = $seizoens_kleuren_options['seizoen_0']; // Seizoen:
 */

function seizoenplugin_enqueue_styles() 
{
    // Get the user's stylesheet choice from the options, default to "lente"
    $seizoens_kleuren_options = get_option( 'lente');

    // Conditionally load the appropriate stylesheet
    if( $seizoens_kleuren_options == 'lente' ) {
        wp_enqueue_style( 'seizoenplugin-lente', plugins_url( '/css/lente.css', __FILE__ ) );
    } elseif( $seizoens_kleuren_options == 'zomer') {
        wp_enqueue_style( 'seizoenplugin-zomer', plugins_url( '/css/zomer.css', __FILE__ ) );
    } elseif( $seizoens_kleuren_options == 'herfst') {
      wp_enqueue_style( 'seizoenplugin-herfst', plugins_url( '/css/herfst.css', __FILE__ ) );
    } elseif( $seizoens_kleuren_options == 'winter') {
    wp_enqueue_style( 'seizoenplugin-winter', plugins_url( '/css/winter.css', __FILE__ ) );
  }
}

add_action('admin_enqueue_scripts', 'seizoenplugin_enqueue_styles' );

  
  ?>

Any help would be greatly appreciated :). Cheers!

I'm trying to make a plugin that changes the CSS file. My client want to change the colors each season, and we want to make it foolproof so they won't break anything.

I've managed to create the option page but I can't seem to get the actual function to work.

<?php
class SeizoensKleuren {
    private $seizoens_kleuren_options;

    public function __construct() {
        add_action( 'admin_menu', array( $this, 'seizoens_kleuren_add_plugin_page' ) );
        add_action( 'admin_init', array( $this, 'seizoens_kleuren_page_init' ) );
    }

    public function seizoens_kleuren_add_plugin_page() {
        add_menu_page(
            'Seizoens kleuren', // page_title
            'Seizoens kleuren', // menu_title
            'manage_options', // capability
            'seizoens-kleuren', // menu_slug
            array( $this, 'seizoens_kleuren_create_admin_page' ), // function
            'dashicons-admin-appearance', // icon_url
            81 // position
        );
    }

    public function seizoens_kleuren_create_admin_page() {
        $this->seizoens_kleuren_options = get_option( 'seizoens_kleuren_option_name' ); ?>

        <div class="wrap">
            <h2>Seizoens kleuren</h2>
            <p>Verander hier de kleuren van de site n.a.v. het seizoen!</p>
            <?php settings_errors(); ?>

            <form method="post" action="options.php">
                <?php
                    settings_fields( 'seizoens_kleuren_option_group' );
                    do_settings_sections( 'seizoens-kleuren-admin' );
                    submit_button();
                ?>
            </form>
        </div>
    <?php }

    public function seizoens_kleuren_page_init() {
        register_setting(
            'seizoens_kleuren_option_group', // option_group
            'seizoens_kleuren_option_name', // option_name
            array( $this, 'seizoens_kleuren_sanitize' ) // sanitize_callback
        );

        add_settings_section(
            'seizoens_kleuren_setting_section', // id
            'Settings', // title
            array( $this, 'seizoens_kleuren_section_info' ), // callback
            'seizoens-kleuren-admin' // page
        );

        add_settings_field(
            'seizoen_0', // id
            'Seizoen:', // title
            array( $this, 'seizoen_0_callback' ), // callback
            'seizoens-kleuren-admin', // page
            'seizoens_kleuren_setting_section' // section
        );
    }

    public function seizoens_kleuren_sanitize($input) {
        $sanitary_values = array();
        if ( isset( $input['seizoen_0'] ) ) {
            $sanitary_values['seizoen_0'] = $input['seizoen_0'];
        }

        return $sanitary_values;
    }

    public function seizoens_kleuren_section_info() {
        
    }

    public function seizoen_0_callback() {
        ?> <select name="seizoens_kleuren_option_name[seizoen_0]" id="seizoen_0">
            <?php $selected = (isset( $this->seizoens_kleuren_options['seizoen_0'] ) && $this->seizoens_kleuren_options['seizoen_0'] === 'lente') ? 'selected' : '' ; ?>
            <option value="lente" <?php echo $selected; ?>>Lente</option>
            <?php $selected = (isset( $this->seizoens_kleuren_options['seizoen_0'] ) && $this->seizoens_kleuren_options['seizoen_0'] === 'zomer') ? 'selected' : '' ; ?>
            <option value="zomer" <?php echo $selected; ?>>Zomer</option>
            <?php $selected = (isset( $this->seizoens_kleuren_options['seizoen_0'] ) && $this->seizoens_kleuren_options['seizoen_0'] === 'herfst') ? 'selected' : '' ; ?>
            <option value="herfst" <?php echo $selected; ?>>Herfst</option>
            <?php $selected = (isset( $this->seizoens_kleuren_options['seizoen_0'] ) && $this->seizoens_kleuren_options['seizoen_0'] === 'winter') ? 'selected' : '' ; ?>
            <option value="winter" <?php echo $selected; ?>>Winter</option>
        </select> <?php
    }

}
if ( is_admin() )
    $seizoens_kleuren = new SeizoensKleuren();

/* 
 * Retrieve this value with:
 * $seizoens_kleuren_options = get_option( 'seizoens_kleuren_option_name' ); // Array of All Options
 * $seizoen_0 = $seizoens_kleuren_options['seizoen_0']; // Seizoen:
 */

function seizoenplugin_enqueue_styles() 
{
    // Get the user's stylesheet choice from the options, default to "lente"
    $seizoens_kleuren_options = get_option( 'lente');

    // Conditionally load the appropriate stylesheet
    if( $seizoens_kleuren_options == 'lente' ) {
        wp_enqueue_style( 'seizoenplugin-lente', plugins_url( '/css/lente.css', __FILE__ ) );
    } elseif( $seizoens_kleuren_options == 'zomer') {
        wp_enqueue_style( 'seizoenplugin-zomer', plugins_url( '/css/zomer.css', __FILE__ ) );
    } elseif( $seizoens_kleuren_options == 'herfst') {
      wp_enqueue_style( 'seizoenplugin-herfst', plugins_url( '/css/herfst.css', __FILE__ ) );
    } elseif( $seizoens_kleuren_options == 'winter') {
    wp_enqueue_style( 'seizoenplugin-winter', plugins_url( '/css/winter.css', __FILE__ ) );
  }
}

add_action('admin_enqueue_scripts', 'seizoenplugin_enqueue_styles' );

  
  ?>

Any help would be greatly appreciated :). Cheers!

Share Improve this question edited Jul 28, 2020 at 14:51 asked Jul 28, 2020 at 12:10 mennobrein 112 bronze badges

1 There’s a lot of code there. What, specifically, isn’t working? – Jacob Peattie Commented Jul 28, 2020 at 12:26
@JacobPeattie Hi, thanks for reaching out! It's the last function: seizoenplugin_enqueue_styles. It doesn't do anything, I select the option 'Zomer' on my settings page but it doesn't enqueue the CSS located at /css/zomer.css – mennobrein Commented Jul 28, 2020 at 12:39
Are you trying to load the stylesheets in the admin? – Jacob Peattie Commented Jul 28, 2020 at 12:40
No, I'm trying to load them in the front-end. – mennobrein Commented Jul 28, 2020 at 12:45

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

You're using the wrong hook to enqueue your styles:

add_action('admin_enqueue_scripts', 'seizoenplugin_enqueue_styles' );

As the name suggests, admin_enqueue_scripts is for enqueuing scripts and styles in the admin. To enqueue scripts on the front end use wp_enqueue_scripts:

add_action('wp_enqueue_scripts', 'seizoenplugin_enqueue_styles' );

本文标签： customizationChanging the CSS with a plugin

版权声明：本文标题：customization - Changing the CSS with a plugin 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1742226214a2436365.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

customization - Changing the CSS with a plugin

1 Answer 1

更多相关文章