Web Design Forum: Plugin Options Page - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Plugin Options Page Rate Topic: -----

#1 User is online   brightonmike 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,996
  • Joined: 27-June 11
  • Reputation: 340
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 23 January 2012 - 10:41 AM

Ok, so as you all probably know I'm a bit naff with PHP.

I've followed Otto's guide for making a plugin options page.

My problem now is, I need to find a way to tie this in to the code I'm using to add a stylesheet to the dashboard.

At the moment, the plugin basically alters the WP dashboard look by adding a stylesheet. I'd like the options page to allow the user to choose different colour schemes. My idea for this is that each stylesheet is in a dropdown and the user chooses from this and this then affects which stylesheet is loaded.

I'm not currently using wp_enqueue styles, but I plan to. My code so far is below but as I've explained currently the options page is not actually affecting the plugin and this is what I need to do.

Any ideas or help would be massively appreciated and I will fully credit anybody that helps.


<?php

/*
Plugin Name: Coffee Admin Theme
Plugin URI: http://michaelgunner.co.uk
Description: This theme gives the Wordpress dashboard a darker, sleeker look. This theme is only compatible with Wordpress 3.3.
Author: Michael Gunner
Version: 1.2.3
Author URI: http://michaelgunner.co.uk
*/

function coffee_admin_head() {
        echo '<link rel="stylesheet" type="text/css" href="' .plugins_url('coffee-admin.css', __FILE__). '">';
}

add_action('admin_head', 'coffee_admin_head');

// add the admin options page
add_action('admin_menu', 'coffee_admin_add_page');
function coffee_admin_add_page() {
add_options_page('Coffee Admin Theme Page', 'Coffee Admin Theme Menu', 'manage_options', 'coffee-admin-theme', 'coffee_options_page');
}
function coffee_options_page() {
?>
<div><h2>Coffee Theme Settings</h2>
Change the appearance of your theme.
<form action="options.php" method="post">
<?php settings_fields('coffee_options'); ?>
<?php do_settings_sections('coffee-admin-theme'); ?>
<input name="Submit" type="submit" value="<?php esc_attr_e('Save Changes'); ?>" >
</form>
</div>
<?php }?>
<?php //add admin settings
add_action('admin_init', 'coffee_admin_init');
function coffee_admin_init(){
register_setting('coffee_options', 'coffee_options', 'coffee_options_validate' );
add_settings_section('coffee_main', 'Main Settings', 'coffee_section_text', 'coffee-admin-theme');
}
function coffee_section_text() {
echo '<p>You options.</p>';
}

?>

This post has been edited by brightonmike: 23 January 2012 - 10:42 AM

0

#2 User is online   brightonmike 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,996
  • Joined: 27-June 11
  • Reputation: 340
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 23 January 2012 - 12:11 PM

*cough*

*splutter*
0

#3 User is online   Renaissance-Design 

  • Available for custom WordPress work
  • View blog
  • Group: Moderators
  • Posts: 3,595
  • Joined: 12-August 10
  • Reputation: 559
  • Gender:Male
  • Location:South Wales
  • Experience:Web Guru
  • Area of Expertise:Designer/Coder

Posted 23 January 2012 - 12:33 PM

Ok, so presumably you need to pick a stylesheet using the option to pass to a custom enqueue function? So you'd take something like this (from the Codex):

function load_custom_wp_admin_style(){
        wp_register_style( 'custom_wp_admin_css', get_bloginfo('stylesheet_directory') . '/admin-style.css', false, '1.0.0' );
        wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action('admin_enqueue_scripts', 'load_custom_wp_admin_style');


and modify to suit:

function load_custom_wp_admin_style(){
        wp_register_style( 'custom_wp_admin_css', plugin_basename(__FILE__) . '/' . get_option('your_field') . '.css', false, '1.0.0' );
        wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action('admin_enqueue_scripts', 'load_custom_wp_admin_style');


Assuming you have a number of stylesheets with name corresponding to the option choices.

This post has been edited by Renaissance-Design: 23 January 2012 - 12:36 PM
Reason for edit: I'm dense.

0

#4 User is online   brightonmike 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,996
  • Joined: 27-June 11
  • Reputation: 340
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 23 January 2012 - 02:44 PM

I'm getting somewhere. I'm getting it to validate and save the options.


But it's not successfully applying the stylesheet.

Thanks for your help, very useful :)

<?php

/*
Plugin Name: Coffee Admin Theme
Plugin URI: http://michaelgunner.co.uk
Description: This theme gives the Wordpress dashboard a darker, sleeker look. This theme is only compatible with Wordpress 3.3.
Author: Michael Gunner
Version: 1.2.3
Author URI: http://michaelgunner.co.uk
*/


function load_custom_wp_admin_style(){
        wp_register_style( 'custom_wp_admin_css', plugin_basename(__FILE__) . '/' . get_option('coffee_colour_string') . '.css', false, '1.0.0' );
        wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action('admin_enqueue_scripts', 'load_custom_wp_admin_style');


// add the admin options page
add_action('admin_menu', 'coffee_admin_add_page');
function coffee_admin_add_page() {
add_options_page('Coffee Admin Theme Page', 'Coffee Admin Theme Menu', 'manage_options', 'coffee-admin-theme', 'coffee_options_page');
}
function coffee_options_page() {
?>
<div><h2>Coffee Theme Settings</h2>
Change the appearance of your theme.
<form action="options.php" method="post">
<?php settings_fields('coffee_options'); ?>
<?php do_settings_sections('coffee-admin-theme'); ?>
<input name="Submit" type="submit" value="<?php esc_attr_e('Save Changes'); ?>" >
</form>
</div>
<?php }?>
<?php //add admin settings
add_action('admin_init', 'coffee_admin_init');
function coffee_admin_init(){
register_setting('coffee_options', 'coffee_options', 'coffee_options_validate' );
add_settings_section('coffee_main', 'Main Settings', 'coffee_section_text', 'coffee-admin-theme');
add_settings_field('coffee_colour_string', 'Colour Scheme', 'coffee_colour_string', 'coffee-admin-theme', 'coffee_main');
}
function coffee_section_text() {
echo '<p>You options.</p>';
}

 

function coffee_colour_string() {
$options = get_option('coffee_options');
echo "<select id='coffee_colour_string'><option value='coffee-admin'>Original</option><option value=''>None</option></select>";} 

// validate our options
function coffee_options_validate($input) {
$newinput['text_string'] = trim($input['text_string']);
if(!preg_match('/^[a-z0-9]{0}$/i', $newinput['text_string'])) {
$newinput['text_string'] = '';
}
return $newinput;
}
?>

0

#5 User is online   brightonmike 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,996
  • Joined: 27-June 11
  • Reputation: 340
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 23 January 2012 - 02:47 PM

I have a feeling it's the validation. It's the only bit I've copied and pasted and don't really understand.
0

#6 User is online   Renaissance-Design 

  • Available for custom WordPress work
  • View blog
  • Group: Moderators
  • Posts: 3,595
  • Joined: 12-August 10
  • Reputation: 559
  • Gender:Male
  • Location:South Wales
  • Experience:Web Guru
  • Area of Expertise:Designer/Coder

Posted 23 January 2012 - 03:33 PM

Ok, I'll install it and have a poke around this PM.
0

#7 User is online   brightonmike 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,996
  • Joined: 27-June 11
  • Reputation: 340
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 23 January 2012 - 03:43 PM

I've not updated the plugin, only locally. I'll send you the updated file.
0

#8 User is online   Spitfire 

  • Mighty Pirate™
  • PipPipPipPip
  • Group: Members
  • Posts: 891
  • Joined: 05-February 11
  • Reputation: 189
  • Gender:Male
  • Location:Berkshire
  • Experience:Web Guru
  • Area of Expertise:Web Developer

Posted 23 January 2012 - 04:04 PM

I've only had a quick look (like Chris says it kind of needs to be installed to troubleshoot properly) but I can't see where you're actually saving the selected option. So when it comes to using get_option(), your variable is blank. After validation you'd need to use something like update_option() to save the option that is selected.

Also, I think "plugin_basename(__FILE__)" isn't right as that will give you the main plugin file (eg: /plugins/coffee/index.php) instead of the actual plugin directory (eg: /plugins/coffee/).

This post has been edited by Spitfire: 23 January 2012 - 04:09 PM

0

#9 User is online   Renaissance-Design 

  • Available for custom WordPress work
  • View blog
  • Group: Moderators
  • Posts: 3,595
  • Joined: 12-August 10
  • Reputation: 559
  • Gender:Male
  • Location:South Wales
  • Experience:Web Guru
  • Area of Expertise:Designer/Coder

Posted 23 January 2012 - 04:12 PM

View PostSpitfire, on 23 January 2012 - 04:04 PM, said:

Also, I think "plugin_basename(__FILE__)" isn't right as that will give you the main plugin file (eg: /plugins/coffee/index.php) instead of the actual plugin directory (eg: /plugins/coffee/).


D'oh. You're quite right, I meant plugin_dir_url(__FILE__).
0

#10 User is online   brightonmike 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,996
  • Joined: 27-June 11
  • Reputation: 340
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 23 January 2012 - 04:14 PM

View PostSpitfire, on 23 January 2012 - 04:04 PM, said:

I've only had a quick look (like Chris says it kind of needs to be installed to troubleshoot properly) but I can't see where you're actually saving the selected option. So when it comes to using get_option(), your variable is blank. After validation you'd need to use something like update_option() to save the option the select.

Also, I think "plugin_basename(__FILE__)" isn't right as that will give you the main plugin file (eg: /plugins/coffee/index.php) instead of the actual plugin directory (eg: /plugins/coffee/).



Does this look better?

wp_register_style( 'myPluginStylesheet', plugins_url('' . get_option('coffee_colour_string') .css'', __FILE__) );



According to the guide I read by Otto, you don't need to update, Wordpress does that bit for you.
0

#11 User is online   brightonmike 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,996
  • Joined: 27-June 11
  • Reputation: 340
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 23 January 2012 - 04:15 PM

Changed it to this: plugin_dir_url

But still no such luck.
0

#12 User is online   Spitfire 

  • Mighty Pirate™
  • PipPipPipPip
  • Group: Members
  • Posts: 891
  • Joined: 05-February 11
  • Reputation: 189
  • Gender:Male
  • Location:Berkshire
  • Experience:Web Guru
  • Area of Expertise:Web Developer

Posted 23 January 2012 - 05:26 PM

View Postbrightonmike, on 23 January 2012 - 04:15 PM, said:

Changed it to this: plugin_dir_url

But still no such luck.


Got a link for this Otto bloke's guide? I still don't see how the option is getting saved :unsure:

Also, if you check the source code for the admin panel, can you see the stylesheet being included?
0

#13 User is online   brightonmike 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,996
  • Joined: 27-June 11
  • Reputation: 340
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 02 March 2012 - 01:22 PM

Right guys. I'm back onto this, and want to get it working.

Found this in my database, in wp_options:

81941 0 coffee_options a:1:{s:11:"text_string";s:0:"";} yes

Any ideas?
0

#14 User is online   brightonmike 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,996
  • Joined: 27-June 11
  • Reputation: 340
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 02 March 2012 - 01:39 PM

View PostSpitfire, on 23 January 2012 - 05:26 PM, said:

Got a link for this Otto bloke's guide? I still don't see how the option is getting saved :unsure:

Also, if you check the source code for the admin panel, can you see the stylesheet being included?



Yes - but minus the value of the field. Btw, this is using the newer settings API, I'm not aware the code you suggested is how it is done any more.

Edit: It doesn't save changes.

I think the issue is with the below, simply because the database field for my settings doesn't show up at all.

function coffee_admin_init(){
register_setting('coffee_options', 'coffee_options', 'coffee_options_validate' );
add_settings_section('coffee_main', 'Main Settings', 'coffee_section_text', 'coffee-admin-theme');
add_settings_field('coffee_colour_string', 'Colour Scheme', 'coffee_colour_string', 'coffee-admin-theme', 'coffee_main');
}


Btw. If anybody would like to help me develop this, just for fun, I'll fully credit you etc...

This post has been edited by brightonmike: 02 March 2012 - 02:14 PM

0

#15 User is online   brightonmike 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,996
  • Joined: 27-June 11
  • Reputation: 340
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 05 March 2012 - 04:41 PM

Neigh?
0

#16 User is online   Renaissance-Design 

  • Available for custom WordPress work
  • View blog
  • Group: Moderators
  • Posts: 3,595
  • Joined: 12-August 10
  • Reputation: 559
  • Gender:Male
  • Location:South Wales
  • Experience:Web Guru
  • Area of Expertise:Designer/Coder

Posted 05 March 2012 - 05:39 PM

Up to my eyeballs today, but can have a look at it tomorrow?
0

#17 User is online   brightonmike 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,996
  • Joined: 27-June 11
  • Reputation: 340
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 05 March 2012 - 07:50 PM

Would be very grateful :)

It's bound to be something silly, but just cannot get my head around it.
0

#18 User is online   brightonmike 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,996
  • Joined: 27-June 11
  • Reputation: 340
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 07 March 2012 - 01:36 PM

I'd made some mistakes with my code, but it still doesn't work! Argh.

function load_custom_wp_admin_style(){
        wp_register_style( 'custom_wp_admin_css', plugin_dir_url(__FILE__) . get_option('coffee_colour_string') . '.css', false, '1.0.0' );
        wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action('admin_enqueue_scripts', 'load_custom_wp_admin_style');


// add the admin options page
add_action('admin_menu', 'coffee_admin_add_page');
function coffee_admin_add_page() {
add_options_page('Coffee Admin Theme Page', 'Coffee Admin Theme Menu', 'manage_options', 'coffee-admin-theme', 'coffee_options_page');
}
function coffee_options_page() {
?>
<div><h2>Coffee Theme Settings</h2>
Change the appearance of your theme.
<form action="options.php" method="post">
<?php settings_fields('coffee_options'); ?>
<?php do_settings_sections('coffee-admin-theme'); ?>

<input name="Submit" type="submit" value="<?php esc_attr_e('Save Changes'); ?>" >
</form>
</div>
<?php }?>
<?php //add admin settings
add_action('admin_init', 'coffee_admin_init');
function coffee_admin_init(){
register_setting('coffee_options', 'coffee_options', 'coffee_options_validate' );
add_settings_section('coffee_main', 'Main Settings', 'coffee_section_text', 'coffee-admin-theme');
add_settings_field('coffee_colour_string', 'Colour Scheme', 'coffee_setting_string', 'coffee-admin-theme', 'coffee_main');
}
function coffee_section_text() {
echo '<p>You options.</p>';
}

 

function coffee_setting_string() {
$options = get_option('coffee_options');
echo "<input id='coffee_colour_string' name='coffee_options[colour_string]' type='text' value='{$options['colour_string']}' />";} 

// validate our options
function coffee_options_validate($input) {
$newinput['colour_string'] = trim($input['colour_string']);
if(!preg_match('/^[a-z0-9]{12}$/i', $newinput['colour_string'])) {
$newinput['colour_string'] = '';
}
return $newinput;
}

0

#19 User is online   brightonmike 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,996
  • Joined: 27-June 11
  • Reputation: 340
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 07 March 2012 - 02:59 PM

I have done it!

Now going to finish the plugin and release.

If anybody wants to contribute some admin themes, that would be amazing.
0

#20 User is online   Renaissance-Design 

  • Available for custom WordPress work
  • View blog
  • Group: Moderators
  • Posts: 3,595
  • Joined: 12-August 10
  • Reputation: 559
  • Gender:Male
  • Location:South Wales
  • Experience:Web Guru
  • Area of Expertise:Designer/Coder

Posted 07 March 2012 - 03:33 PM

Damn, I meant to take a look at this for you. Oops. Glad you've nailed it though.
0

#21 User is online   brightonmike 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,996
  • Joined: 27-June 11
  • Reputation: 340
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 07 March 2012 - 03:59 PM

No worries! I've updated the plugin, should all be good now!
0

#22 User is online   brightonmike 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,996
  • Joined: 27-June 11
  • Reputation: 340
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 09 March 2012 - 01:35 PM

I need the default value of the SELECT to reflect what the user has selected. Otherwise, they will have to re-select it every time they make other changes.

The idea is to echo the value of the selected theme into the ID of the select. Then I can refer to that ID using PHP, and if it matches the value of the OPTION, then inside the option tag "selected='selected'" is echo'd.

This is what I've got:

<td><select name="dashtheme_sample[themeselect]" id="<?php echo $options['themeselect']; ?>">
<option value="coffee-admin" <?php if (get_option( $themeselect['id'] ) == $option) { echo 'selected="selected"'; }?>>Coffee Green</option>


Trouble is, it's not quite working because it echo's Selected for all of them. Any ideas? Trying to get to grips with PHP here and I've written this myself.


Sorry :(


Fixed it.


<option value="coffee-admin" <?php if ( $options['themeselect'] == 'coffee-admin' ) echo 'selected="selected"'; ?>

This post has been edited by brightonmike: 09 March 2012 - 01:49 PM

0

#23 User is online   Renaissance-Design 

  • Available for custom WordPress work
  • View blog
  • Group: Moderators
  • Posts: 3,595
  • Joined: 12-August 10
  • Reputation: 559
  • Gender:Male
  • Location:South Wales
  • Experience:Web Guru
  • Area of Expertise:Designer/Coder

Posted 09 March 2012 - 02:20 PM

Are you going to be releasing this on wordpress.org or commercially?
0

#24 User is online   brightonmike 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,996
  • Joined: 27-June 11
  • Reputation: 340
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 09 March 2012 - 04:35 PM

It's been released on .org - still under the "Coffee Admin Theme" name though.

I've noticed poor old Fluency Admin has not been updated to 3.3 despite it's huge popularity, considering contacting the author and seeing if they'd be cool for me to port it over.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users