Adding a Stylesheet to the Options Page

Sometimes you need to add styles to your options pages. You could do everything with inline styles, but that's hardly efficient!

Listing 7-33 shows the function that will display the styles in the options page's <head> area. In this case, you have very little to add, so you won't go to the trouble of creating a separate stylesheet for Simplex Flex. However, it would be easy to do so; just include a link to a separate stylesheet, admin-styles.css, which would be located in the simplex-flex theme directory.

Listing 7-33. Styles for the options page function simplex_flex_admin_css() { ?> <style type="text/css">

<link rel="stylesheet" type="text/css" src="<?php bloginfo('stylesheet_directory'); ?>/admin-styles.css">

Now you have to add this function to the admin pages somehow. You could use the admin_head() hook, but that puts the styles on every page. It would be much better to add it only to the theme options page.

In addition to admin_head(), there's another hook that's specific to each page, admin_head-filename. The filename should include the extension. For example, if you wanted to add a stylesheet to the Dashboard, the hook would be called admin_head-index.php.

Now you just need the name of the current theme options page, without the preceding path that you'd get with the_FILE_constant. As it turns out, that's easy. The add_theme_page() function returns the file name of the theme page that gets added. In Listing 7-29, you didn't need the returned value, but now you can make use of it.

Listing 7-34 shows the necessary changes to the simplex_menu() function.

Listing 7-34. Adding a stylesheet to the options page function simplex_menu() {

$file = add_theme_page('Simplex Flex Options', 'Simplex Options',

'edit_theme_options', _FILE_, 'simplex_options_page');

Was this article helpful?

0 0

Post a comment