Using Bootstrap within Wordpress admin - a hack by Rush Frisby

admin

Administrator
Staff member
Building my first plugin to Wordpress I came across Rush Frisby's Bootstrap hack, so that you can work with Bootstrap within the admin panel, without conflicting with the Wordpress admin core styles. You'll find it here: <a href="https://rushfrisby.com/using-bootstrap-in-wordpress-admin-panel/" rel="nofollow noreferrer">https://rushfrisby.com/using-bootstrap-in-wordpress-admin-panel/</a>

I have implemented it in my plugin the way he explained.
You can review my code online at <a href="https://github.com/kennnielsen/wordpress_dev" rel="nofollow noreferrer">https://github.com/kennnielsen/wordpress_dev</a>

There is just one problem with this part:

Code:
.bootstrap-wrapper {
    @import (less) url('bootstrap.min.css');
}

The error below will disappear if I remove the (less) from above code, but then the hack is not working as expected - the bootstrap is not loaded within the bootstrap-wrapper.

First of all, I have never really worked with LESS, but I know the basic idea of LESS and how it can ease the work with your CSS.

Nevertheless, when running my plugin, and going to Settings - Custom Login I see the following error:

<a href=" " rel="nofollow noreferrer"><img src=" " alt="Wordpress error"></a>

I have no idea what to do. I have searched the web for answers, but I can't really find a solution nor a fix for this.

Does anyone have an idea on how to solve this?
- and a brief explanation about .map files?

Thank you all in advance!

For you guys that don't want to go to Github, see below code used for the admin page.

Code:
&lt;?php 

// Meaning of abbreviations:
// clsc = Custom login shortcode

// Runs when plugin is activated
register_activation_hook( PLUGIN_MAIN_FILE, 'clsc_install');
// Create new database fields
function clsc_install() {
    $clsc_options = array(

        'Login_link'        =&gt; 'log-in/',
        'Login_string'      =&gt; 'Log in',
        'Login_class'       =&gt; '', // Default is empty to inherit theme styles
        'Logout_link'       =&gt; wp_logout_url( home_url()),
        'Logout_string'     =&gt; 'Log out',
        'Logout_class'      =&gt; '', // Default is empty to inherit theme styles
        'Account_link'      =&gt; 'my-account/',
        'Account_string'    =&gt; 'My Account',
        'Account_class'     =&gt; '' // Default is empty to inherit theme styles

    );
    add_option('clsc_options_array', $clsc_options, '', 'yes');
}

// Register settings for wordpress to handle all values
function admin_init_register_setting()
{    
    register_setting('wp_plugin_template-group', 'clsc_options_array');

}
add_action('admin_init','admin_init_register_setting');


// Create admin option page
function add_clsc_option_page() {
    add_options_page(
        'Custom Login',             // The text to be displayed in the title tag
        'Custom Login',             // The text to be used for the menu
        'administrator',            // The capability required to display this menu
        'custom-login-shortcodes',  // The unique slug name to refer to this menu
        'clsc_html_page');          // The function to output the page content
}
/* Call the html code */
add_action('admin_menu', 'add_clsc_option_page');

// Enqueue admin styles and scripts
function clsc_enqueue_scripts() {
    global $wpdb;
    $screen = get_current_screen();

    if ( $screen-&gt;id != 'settings_page_custom-login-shortcodes' ) {
        return; // exit if incorrect screen id
    } 

        wp_enqueue_style( 'custom-shortcodes-styles', plugins_url( 'admin/css/admin_styles.css', dirname(__FILE__) ) );
        wp_enqueue_style( 'bootstrap', plugins_url('admin/css/bootstrap.css', dirname(__FILE__) ) );
        wp_enqueue_script('admin_js_bootstrap_hack', plugins_url('admin/scripts/bootstrap-hack.js', dirname(__FILE__) ) );
        wp_enqueue_script('jquery', plugins_url('admin/scripts/jquery.min.js', dirname(__FILE__) ) );

}
add_action('admin_enqueue_scripts', 'clsc_enqueue_scripts' );

function clsc_html_page()
{
    if(!current_user_can('manage_options'))
    {
        wp_die( __('You do not have sufficient permissions to access this page.','clsc') );
    }

    ?&gt;

    &lt;script type="text/javascript"&gt;

        var default_logout = &lt;?php echo json_encode( wp_logout_url( home_url()) ); ?&gt;;

        $(document).ready(function(){
            $("#logout-default").click(function(){
                $("#logout-field").val(default_logout);
            });
        });
    &lt;/script&gt;

    &lt;div class="wrap"&gt;

        &lt;form method="post" action="options.php"&gt; 
            &lt;?php 

            $options = get_option('clsc_options_array');     
            settings_fields('wp_plugin_template-group');
            do_settings_fields('wp_plugin_template-group'); 

            ?&gt;          
            &lt;div class="bootstrap-wrapper"&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-md-12"&gt;
                        &lt;h1&gt;&lt;?php _e('Custom Login Shortcode','clsc'); ?&gt;&lt;/h1&gt;
                        &lt;p&gt;&lt;?php _e('To use for shortcode:','clsc'); ?&gt;&lt;br/&gt;&lt;span class="shortcode-preview"&gt;[custom_login]&lt;/span&gt;&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="row" id="login-content"&gt;
                    &lt;div class="col-md-4"&gt;
                        &lt;h5&gt;&lt;?php _e('Log in link:','clsc'); ?&gt;&lt;/h5&gt;
                        &lt;input name="clsc_options_array[Login_link]" placeholder="&lt;?php _e('Example: log-in/', 'clsc') ?&gt;" class="form-control" type="text" value="&lt;?php echo $options['Login_link']; ?&gt;" /&gt;
                    &lt;/div&gt;
                    &lt;div class="col-md-4"&gt;
                        &lt;h5&gt;&lt;?php _e('Log in string:','clsc'); ?&gt;&lt;/h5&gt;
                        &lt;input name="clsc_options_array[Login_string]" placeholder="&lt;?php _e('Example: Log in', 'clsc') ?&gt;" class="form-control" type="text" value="&lt;?php echo $options['Login_string']; ?&gt;" /&gt;
                    &lt;/div&gt;
                    &lt;div class="col-md-4"&gt;
                        &lt;h5&gt;&lt;?php _e('Log in class:','clsc'); ?&gt;&lt;/h5&gt;
                        &lt;input name="clsc_options_array[Login_class]"  placeholder="&lt;?php _e('Example: login_style', 'clsc') ?&gt;" class="form-control" type="text" value="&lt;?php echo $options['Login_class']; ?&gt;" /&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="row top-buffer" id="logout-content"&gt;
                    &lt;div class="col-md-4"&gt;
                        &lt;h5&gt;&lt;?php _e('Log out link:','clsc'); ?&gt;&lt;/h5&gt;
                        &lt;input id="logout-field" name="clsc_options_array[Logout_link]" placeholder="&lt;?php _e('Example: log-out/', 'clsc') ?&gt;" class="form-control" type="text" value="&lt;?php echo $options['Logout_link']; ?&gt;" /&gt;
                        &lt;input class="btn btn-default btn-xs" type="button" name="logout-default" id="logout-default" value="&lt;?php _e('Use default logout link','clsc') ?&gt;"/&gt;
                    &lt;/div&gt;
                    &lt;div class="col-md-4"&gt;
                        &lt;h5&gt;&lt;?php _e('Log out string:','clsc'); ?&gt;&lt;/h5&gt;
                        &lt;input name="clsc_options_array[Logout_string]" placeholder="&lt;?php _e('Example: Log out', 'clsc') ?&gt;" class="form-control" type="text" value="&lt;?php echo $options['Logout_string']; ?&gt;" /&gt;
                    &lt;/div&gt;
                    &lt;div class="col-md-4"&gt;
                        &lt;h5&gt;&lt;?php _e('Log out class:','clsc'); ?&gt;&lt;/h5&gt;
                        &lt;input name="clsc_options_array[Logout_class]" placeholder="&lt;?php _e('Example: logout_style', 'clsc') ?&gt;" class="form-control" type="text" value="&lt;?php echo $options['Logout_class']; ?&gt;" /&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="row top-buffer" id="account-content"&gt;
                    &lt;div class="col-md-4"&gt;
                        &lt;h5&gt;&lt;?php _e('Account link:','clsc'); ?&gt;&lt;/h5&gt;
                        &lt;input name="clsc_options_array[Account_link]" placeholder="&lt;?php _e('Example: my-account/', 'clsc') ?&gt;" class="form-control" type="text" value="&lt;?php echo $options['Account_link']; ?&gt;" /&gt;
                    &lt;/div&gt;
                    &lt;div class="col-md-4"&gt;
                        &lt;h5&gt;&lt;?php _e('Account string:','clsc'); ?&gt;&lt;/h5&gt;
                        &lt;input name="clsc_options_array[Account_string]" placeholder="&lt;?php _e('Example: My Account', 'clsc') ?&gt;" class="form-control" type="text" value="&lt;?php echo $options['Account_string']; ?&gt;" /&gt;
                    &lt;/div&gt;
                    &lt;div class="col-md-4"&gt;
                        &lt;h5&gt;&lt;?php _e('Account class:','clsc'); ?&gt;&lt;/h5&gt;
                        &lt;input name="clsc_options_array[Account_class]" placeholder="&lt;?php _e('Example: account_style', 'clsc') ?&gt;" class="form-control" type="text" value="&lt;?php echo $options['Account_class']; ?&gt;" /&gt;
                    &lt;/div&gt;
                &lt;/div&gt;            
            &lt;/div&gt;

            &lt;?php submit_button( __('Save Changes', 'clsc') ); ?&gt;

        &lt;/form&gt;

    &lt;/div&gt;

    &lt;?php
}
?&gt;