Select a Text for CSS

Question

I am learning WordPress Plugin Development. I have below HTML in a Admin Panel Page.

<form method="post" action="options.php">
    <table class="form-table" role="presentation">
        <tbody>
            <tr>
                <th scope="row">My Text</th>
                <td></td>
            </tr>
        </tbody>
    </table>
    <p class="submit">
        <input type="submit" name="submit" id="submit" class="button button-primary" value="Save Changes">
    </p>
</form>

How can I select My Text uniquely so that other Admin Panel pages will not affected ?

Answer 1

Start by creating a stylesheet for your plugin.Then you can use the do_action('admin_enqueue_scripts') to enqueue it in the controlpanel only, avoiding it to be loaded in the frontend.

You could do something like this:

function my_plugin_admin_styles() {
    wp_enqueue_style('my-plugin-admin-style', plugin_dir_url(__FILE__) . 'assets/css/admin-style.css', array(), '1.0.0', 'all');
}
add_action('admin_enqueue_scripts', 'my_plugin_admin_styles');

Just make sure to correct the path for your stylesheet. In the code above, it's assumed the stylesheet is in an "assets" folder - and in a "css" folder within the assets-folder. Also, I would highly recommend to rename the function name - and the style ID "my-plugin-admin-style" to something more fitting for your plugin.

Then you can add the classes to your optionspage, and style them in the stylesheet without messing anything else up - as long as the classes are unique.