0

I made a large-scale research. But there are no anything what I want. I want to style my options page in a static style file. How can I do that?

Sources

/*
*Create A Simple Theme Options Panel
*Exit if accessed directly
*/
if (!defined('ABSPATH')){
exit;
}

    // Start Class
if ( ! class_exists('Azura_Theme_Options')){
class Azura_Theme_Options{
    public function __construct(){
        // We only need to register the admin panel on the back-end
        if (is_admin()){
            add_action('admin_menu', array( 'Azura_Theme_Options', 'add_admin_menu'));
            add_action('admin_init', array( 'Azura_Theme_Options', 'register_settings'));

        }
    } 
    public static function get_theme_options() {
        return get_option('theme_options');
    }
    public static function get_theme_option($id) {
        $options = self::get_theme_options();
        if (isset($options[$id])){
            return $options[$id];
        }
    }

    // Add sub menu page
    public static function add_admin_menu(){
        add_menu_page(
            esc_html__('Azura Panel', 'text-domain'),
            esc_html__('Azura Panel', 'text-domain'),
            'manage_options',
            'azura-panel',
            array('Azura_Theme_Options', 'create_admin_page')
        );
    }

    /**
     * Register a setting and its sanitization callback.
     * We are only registering 1 setting so we can store all options in a single option as
     * an array. You could, however, register a new setting for each option
     */
    public static function register_settings(){
        register_setting('theme_options', 'theme_options', array( 'Azura_Theme_Options', 'sanitize'));
    }

    // Sanitization callback
    public static function sanitize($options){
        // If we have options lets sanitize them
        if ($options){
            // Input
            if (!empty($options['site_name'])){
                $options['site_name'] = sanitize_text_field( $options['site_name'] );
            }else{
                unset($options['site_name']); // Remove from options if empty
            }

            // Select
            if (!empty($options['select_example'])){
                $options['select_example'] = sanitize_text_field( $options['select_example'] );
            }
        }

        // Return sanitized options
        return $options;
    }

    /**
     * Settings page output
     */
    public static function create_admin_page(){ ?>

        <div class="wrap">
            <h1><?php esc_html_e('Tema Ayarları', 'text-domain'); ?></h1>
            <form method="post" action="options.php">
                <?php settings_fields('theme_options'); ?>
                <table class="form-table wpex-custom-admin-login-table">

                    <?php // Text input example ?>
                    <tr valign="top">
                        <th scope="row"><?php esc_html_e('Başlık', 'text-domain'); ?></th>
                        <td>
                            <?php $value = self::get_theme_option('site_name'); ?>
                            <input type="text" name="theme_options[site_name]" value="<?php echo esc_attr($value); ?>">
                        </td>
                    </tr>

                    <tr valign="top">
                        <th scope="row"><?php esc_html_e('Açıklama', 'text-domain'); ?></th>
                        <td>
                            <?php $value = self::get_theme_option('site_desc'); ?>
                            <input type="text" name="theme_options[site_desc]" value="<?php echo esc_attr($value); ?>">
                        </td>
                    </tr>

                    <tr valign="top">
                        <th scope="row"><?php esc_html_e('Buton', 'text-domain'); ?></th>
                        <td>
                            <?php $value = self::get_theme_option('top_header_btn'); ?>
                            <input type="text" name="theme_options[top_header_btn]" value="<?php echo esc_attr($value); ?>">
                        </td>
                    </tr>

                    <tr valign="top">
                        <th scope="row"><?php esc_html_e('Buton Link', 'text-domain'); ?></th>
                        <td>
                            <?php $value = self::get_theme_option('top_header_btn_link'); ?>
                            <input type="text" name="theme_options[top_header_btn_link]" value="<?php echo esc_attr($value); ?>">
                        </td>
                    </tr>
                </table>
                <?php submit_button(); ?>
            </form>
        </div><!-- .wrap -->
    <?php }
}
}
new Azura_Theme_Options();

// Helper function to use in your theme to return a theme option value
function myprefix_get_theme_option( $id = '' ) {
    return Azura_Theme_Options::get_theme_option( $id );
}
0

In your construct function you also need to enqueue a custom stylesheet that will house the CSS to style up your theme options.

A simplified example would look like this:

function admin_style() {
    wp_enqueue_style( 'theme-options-style', get_template_directory_uri().'styles/theme-options-style.css');
}
add_action('admin_enqueue_scripts', 'admin_style');
| improve this answer | |
0

@Rian's answer is good if you're placing that code in a theme. If you're going to be using it in a plugin then enqueue with:

from the codex:

function load_custom_wp_admin_style($hook) {
        // Load only on ?page=mypluginname
        if($hook != 'toplevel_page_mypluginname') {
                return;
        }
        wp_enqueue_style( 'custom-admin_css', plugins_url('admin-style.css', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

This will return the full URL to custom.css, such as example.com/wp-content/plugins/myplugin/custom-admin_css.

If you are unsure what your $hook name is .. use this to determine your hookname. Put the code after the { from the function

wp_die($hook);

(Alternately just look at the last portion of your url when you're on your admin page)

This code ensures you don't load the css on every page of your site; but only on the admin page of your plugin.

| improve this answer | |
-1

Give your HTML elements existing classes from the WP admin CSS and they'll inherit styles consistent with the rest of the Dashboard. Elaborately styling theme or plugin UI to clash with the rest of the application is an abomination.

| improve this answer | |
  • 1
    this would be your opinion, and definitely doesn't answer his question. – rudtek Jul 18 '17 at 15:09
  • Good UX isn't a matter of opinion. – Chris Cox Jul 18 '17 at 15:31
  • oh, I forgot. That's why all applications and websites look the same. – rudtek Jul 18 '17 at 15:37
  • False equivalence. Multiple solutions can be right, but a website or app that arbitrarily changes a section of its UI for a reason that means nothing to the user is undisputably wrong. – Chris Cox Jul 18 '17 at 15:45

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.