In my project, the index.php file is a master page with its own header and footer used across most of the site. My single.php file is also a master page with its own header, footer and custom stylesheet.
To ensure the custom stylesheet was only used for the single.php file, I used the ‘do not enqueue’ so it was not used globally and then the ‘IF_is_single’ condition so the stylesheet was only used for the posts.
I tried the same approach when creating a custom page template - I’ve posted images of my settings - but when I use the page template, the global stylesheet overrides the custom stylesheet. What am I doing wrong? Thanks in advance.
@Hannah not sure if settings shown in some of these images are correct:
The Tree panel shows Enqueue Style on link css/careplan.css and Enqueue style on the style element. Shouldn’t the Enqueue action with IF be on the link?
The Export as is set to {pink}.php instead of pink.php
But this might not be the main issue here.
Do you need style.css included on Pink and then override some of it with careplan.css? Or do you want to not include style.css at all on that template?
By default, CSS files from any master page are enqueued globally. If you would want to not include the style.css everywhere that would require using the Enqueue + IF approach.
If you want to include both, you could try to list style.css (use Enqueue style action to set its handle) as a dependancy of careplan.css. That might instruct WP to include style.css before careplan.css.
Hi @matjaz. The link had ‘do not enqueue’ and the the style page had the ‘enqueue with condition’. I tried ‘pink’ without the brackets prior to with the brackets and that made no difference. I have recorded a video of the problem, hopefully it will make more sense. Thanks again.
@Hannah thanks for the video! I did some experiments. You were on the right track to use the IF is_page_template. The action takes the php file as the argument, for example “pink.php”.
Here is a quick test project with two master pages. The Pink page uses IF is_page_template on pink.css to have it included only on that template.
Thank you @matjaz for taking the time to try this yourself and help me with this.
I looked at your solution and can see that it is based on the assumption that the custom template is NOT a master page with its own header and footer. The problem I’m trying to solve is how to make pink.php’s stylesheet the priority when pink.php is a master page. The default master page styling- whether that be index.php for pages or single.php for posts - is being placed as a priority.
I’ve tried adding the condition ‘if is not page template’ to the style.css but the code is ignored by wordpress. I’ve also tried enqueueing pink.php manually so that I could use add action hook to prioritise the stylesheet and that has not worked either.
function proj_template_enqueue() {
if (is_page_template('project-styling')) {
wp_enqueue_style( 'project-styling', get_stylesheet_directory_uri() . '/css/project-template.css', array(), 'all');
}
}
add_action('wp_enqueue_scripts', 'proj_template_enqueue', 99 );
I have renamed the custom post template to project-template.css and it’s stylesheet is called project-template.css
In your code if (is_page_template('project-styling')) { the parameter is not correct. It needs to be the relative name of the php file, for example ‘project-template.php’.
If this doesn’t help, send your project to support@pinegrow.com and we’ll take a look.
Thanks @Hannah, I did some experiments and I believe this is the best approach to handle such complex projects with multiple master pages and combinations of stylesheets (I’ll send you back the modified project through support):
The best approach is to enqueue all styles and scripts on a special page (for example settings.html), that is defined as a master page but is not exported to the project:
Include all stylesheets in the head of this page (make sure stylesheets are included in the correct order) and use Enqueue Style action to include them in the exported theme. Assign an easy to remember, unique handle to each one.
Use dependencies field to list handles of stylesheets that are required for the stylesheets:
Use IF actions to specify on which conditions should a stylesheet be included. For example, is_single:
Or, for a specific post template:
Or, for a 404 page.
In all other master pages in the project add Do Not Enqueue action to all these stylesheets:
This makes settings.html the central place for managing stylesheets and scripts.
This has worked fabulously!!!
My approach only worked on the first export and then the single.php styling would show up in the following export. But I’ve been holding my breath, waiting for that to happen and it hasn’t.
Thank you sooo much. I feel like I’ve just gained a super power. You’re an excellent teacher.
