0

I have a WP website: after reading docs everywhere, I made up a little, personal plugin that lets me display a particular app, made with VueJS, into a single Page.

Now, the theme of this website is a commercial one.

I red I can add my styles using wp_enqueue_style: my idea was to override some of the theme styles, but in the docs I found wp_enqueue_style:

Registers the style if source provided (does NOT overwrite) and enqueues.

So, as I understand, I can't use this method to overwrite the current style (default theme) of the website.

What should I do to properly style my HTML? Consider one thing: the style must be applied only to one page, I don't need it "globally" (it should simply style my app inside my page, that's it).

1

You will need to build a child theme to prevent your changes being overwritten when the theme is updated. This child theme needs only to consist of a functions.php file and a stylesheet that you don't name style.css to prevent it from being loaded automatically.

In your functions file you load the stylesheet only for this specific page, like this:

add_action ('wp_enqueue_scripts','wpse278950_add_my_style');
function wpse278950_add_styles () {
  if is_single ('slug-of-your-page')
    wp_register_style ('my-style', get_stylesheet_directory_uri() . '/my-style.css');
  }
}

Note: I didn't test the code, it might need debugging.

  • Ok, during the last day, I started doing it, but suddenly I stopped when I discovered I could enqueue styles at a higher priority using: add_action( 'wp_enqueue_scripts', 'myEnqueueFunction', 10); Of course, this is less elegant than the child-theme option, but I only had 4 css rules to overwrite... – 3000 Sep 4 '17 at 16:02

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.