My current PHP code is working and styling my "Theme Options" page (located under the WP API Appearance menu) the way I want it to look, however...
The CSS stylesheet is also being applied to every other menu in the WP dashboard (such as affecting the "Settings > General-Options") page too. How am I able to go about applying the stylesheet just to my "Theme Options" page only and not tamper with anything else?
My stylesheet is named 'theme-options.css", located within a folder called "include" > include/theme-options.css. The code below is placed within a "theme-options.php" page.
<?php
// Add our CSS Styling
add_action( 'admin_menu', 'admin_enqueue_scripts' );
function admin_enqueue_scripts() {
wp_enqueue_style( 'theme-options', get_template_directory_uri() . '/include/theme-options.css' );
wp_enqueue_script( 'theme-options', get_template_directory_uri() . '/include/theme-options.js' );
}
I was placing the CSS & JS files separately from the building blocks of my page (just above that function). The code is now inside my page build function and I am now getting the results I was after.
Previously:
...
// Add our CSS Styling
function theme_admin_enqueue_scripts( $hook_suffix ) {
wp_enqueue_style( 'theme-options', get_template_directory_uri() . '/include/theme-options.css', false, '1.0' );
wp_enqueue_script( 'theme-options', get_template_directory_uri() . '/include/theme-options.js', array( 'jquery' ), '1.0' );
// Build our Page
function build_options_page() {
ob_start(); ?>
<div class="wrap">
<?php screen_icon();?>
<h2>Theme Options</h2>
<form method="post" action="options.php" enctype="multipart/form-data">
...
...
Solution:
// Build our Page
function build_options_page() {
// Add our CSS Styling
wp_enqueue_style( 'theme-options', get_template_directory_uri() . '/include/theme-options.css' );
wp_enqueue_script( 'theme-options', get_template_directory_uri() . '/include/theme-options.js' );
ob_start(); ?>
<div class="wrap">
<?php screen_icon();?>
<h2>Theme Options</h2>
<form method="post" action="options.php" enctype="multipart/form-data">
...
...
You could only add the css file if the current page is your special page by checking the page before, e.g.:
if (is_page('Theme Options')) { // check post_title, post_name or ID here
add_action( 'admin_menu', 'admin_enqueue_scripts' );
}
=== UPDATE ===
Maybe it is better to check in the function:
<?php
// Add our CSS Styling
add_action( 'admin_menu', 'admin_enqueue_scripts' );
function admin_enqueue_scripts() {
if (is_page('Theme Options')) { // check post_title, post_name or ID here
wp_enqueue_style( 'theme-options', get_template_directory_uri() . '/include/theme-options.css' );
}
wp_enqueue_script( 'theme-options', get_template_directory_uri() . '/include/theme-options.js' );
}