[Resolved] Disable style sheet for certain pages and posts

Home Forums Support [Resolved] Disable style sheet for certain pages and posts

Home Forums Support Disable style sheet for certain pages and posts

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1054562
    Marcel

    Hello,
    I would ask what if there is an option to disable the style sheet for certain pages and posts. I use a child theme, and I would like to use custom HTML and CSS in some pages and posts. Even I use the Simple CSS plugin on those pages and apply custom CSS, the final result is weird. I know for sure there is a solution for that, please just give me a short guide. Thank you!

    #1054725
    David
    Staff
    Customer Support

    Hi there,

    the correct way would be to save the styles in a separate style sheet and use the wp_enqueue_scripts hook:

    https://developer.wordpress.org/reference/functions/wp_enqueue_style/#comment-340

    But this would require you to add a condition to where the code should be loaded.

    Simplest method would be to use a Hook element and add a link to the style sheet in the WP_head for those specific pages:

    <link rel="stylesheet" id="my-custom-style-sheet" href="full_url_to_my_custom_styles" type="text/css" media="all">

    #1055099
    Marcel

    David, thank you! So, to understand I should create a custom CSS file and store it on my child theme folder, where function.php and style.css already exist and name it according to the example given above (my-custom-style-sheet.css)? Image attached.
    And, the full URL to my-custom-style-sheet would be: my-website.com/wp-content/themes/generatepress_child/my-custom-style-sheet.css?

    #1055113
    David
    Staff
    Customer Support

    Thats correct accept you change the ID="my-custom-style-sheet" and the style sheet file name to whatever you like as long as it is unique.

    #1056665
    Marcel

    Hello David,
    Please guide me on this puzzle:
    – should I put also my HTML into a Hook element and add a link to the style sheet in the WP_head for a specific page
    OR
    just add a link to the style sheet in the WP_head for a specific page and put my HTML into that page (using a custom HTML Gutenberg block, for instance…)? Image here.
    Thank you!

    #1056671
    David
    Staff
    Customer Support

    The second option

    #1056698
    Marcel

    Perfect. It is working. Now, if I would to use wp_enqueue_scripts (the correct way), should I include it on my function.php or using a hook? Could I have a hypothetical snippet from your side, let say for a style sheet with the ID=”my-custom-style-sheet” and adding a condition to where the code should be loaded, let say for the page with ID= 101? Thank you!

    #1056725
    David
    Staff
    Customer Support

    wp_enqueue_scripts would go in the function.php. Tom provides an example of conditional enqueue here:

    https://generatepress.com/forums/topic/mobile-menu-and-mobile-header-color-for-different-page/page/2/#post-502162

    #1061317
    Marcel

    Thank you, David. Should I first use “wp_dequeue_style” first, for better results or it is not necessary?

    #1061652
    David
    Staff
    Customer Support

    wp_dequeue_style is only required if you need to remove an existing style sheet. As you’re adding rather then replacing it is not required.

    #2304731
    Marcel

    Thank you, David!

    #2304957
    David
    Staff
    Customer Support

    You’re welcome

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.