1

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

0

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 ); 
9
  • ok, this is one way to do it. How about doing it the way I would like to do? I am aspecially curious about the action to hook for pages while loading, so that I can hook to that action and load (append) my css. I am not only trying to achieve this, I am also trying to learn something. Thanks for the answer by the way.
    – honor
    May 10 '14 at 16:19
  • See my update, hope this answers your question May 10 '14 at 16:43
  • Hello Pieter and thanks for the answer. So I see that wp_enqueue_style and wp_enqueue_script are used for enqueuing style and script files respectively. This is a way to tell wordpress which style or script files are to be loaded. wp_enqueue_scripts is the action that performs the actual loading and works for both scripts and styles. But I think this "wp_enqueue_scripts" method runs for all the pages, am I correct? In this case this style will be loaded even if the contact form is not loaded right? Is there a way to load my custom style only for a specific page when that page is rendered?
    – honor
    May 11 '14 at 14:12
  • Your assumptions is correct. I have added an edit to my answer, please check it out. May 11 '14 at 17:45
  • Interestingly, is_page_template does not work for me. The contact page template is "page-contact.php" but is_page_template( 'page-contact.php' ) does not return true. I found another conditional tag, is_page( 'Contact' ); works for me. Explanation says "When the Page with a post_title of "Contact" is being displayed.". I don't understand why is_page_template does not work for me but is_page works. Do you have any idea? Thanks a lot for the beautiful answer. Marking it as Answer now.
    – honor
    May 11 '14 at 20:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.