Add external css to Contact Page

Question

I am trying to add custom CSS to my contact form in wordpress which is a wp page which loads at mysite.com/contact. I don't want to edit any existing codes, I want to do this writing a simple plugin. (Actually the main purpose is to hide the google maps component on this contact page by adding a style to make it "display:none;")

I know I can use wp_enqueue_style() for this puspose but I don't know to which action I should hook. I want to load this css (append this css to existing contact for css) only when needed, when the contact form page loads.

How can I achieve this?

Which one is the correct action to hook?

And if I was to make the question more generic: "What action should I hook to to load a custom css while loading a wordpress page?"

Answer 1

I do feel that you are trying to over complicate things here. What you want to achieve would be easier in a child theme. It is something that I would consider as it is really something simple that you want to achieve.

All you simply will need to do, copy the contact form template to your child theme, add the custom css to that template, and style accordingly in your child themes' style.css. Your child theme will then always use this template instead of the parent themes' template

EDIT 1

OK, seems I misunderstood things a bit here.

wp_enqueue_style() is used to correctly enqueue/add stylesheets to a wordpress page. These stylsheets are available for all pages. However, stylesheets can also be loaded conditionally using conditional tags. What this does is, you can decide to load a stylesheets only for a specific page, or only when a certain condition exists

wp_enqueue_scripts is the proper hook to use to enqueue scripts and stylesheets in the front end.

So, you can create your stylesheet and call it pluginstyle.css for instance, and add your custom style in there. Now, in your main plugin file, you'll need to enqueue that stylesheet. First, create a function in which you will add your wp_enqueue_style(). Secondly, hook that function to the wp_enqueue_scripts hook. Just remember $src are diffirent for parent themes, child themes and plugins. Here is an example

function plugin_stylesheet() {
    wp_enqueue_style( 'plugin-styles', plugins_url( '/pluginstyle.css', __FILE__ ) );
}

add_action( 'wp_enqueue_scripts', 'plugin_stylesheet' ); 

I hope this answers your question. It is a good idea to go and have a look at the functions/hooks I've just given you.

EDIT 2

Your assumptions made in your comment is correct. As I stated in my first edit, you will need conditional tags, please see the link given in that edit.

For the purpose of your question, you will need to use is_page_template() conditional tag to target the contact page. So for this to work, you will need to wrap wp_enqueue_style() in a if statement that will check if you are on the specific page, and if you are, then the stylesheet will be loaded, if not, the stylesheet will not be loaded.

Just one thing that I forgot to mention in edit 1, you also have to specify a priority when you are adding your function to the wp_enqueue_scripts hook. By default, this will be 10, so for your styles to be loaded after the main stylesheet of the theme, you will need to load it later, thus a number higher than 10. I here used a priority of 999, but it can be anything more than 10.

So, with all said, you can use the following in your plugin. Just change the page template to the one you are using for your contact us page. I have use a test page (template page-test.php) to test my code.

function plugin_stylesheet() {
    if(is_page_template( 'page-test.php' )) {
         wp_enqueue_style( 'plugin-styles', plugins_url( '/pluginstyle.css', __FILE__ ) ); );
    }
}   

add_action( 'wp_enqueue_scripts', 'plugin_stylesheet', 999 );