Question

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' );   
}   

Answer 1

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">

        ...
        ...