No CSS in Child Theme

[rishadfb]

I have tried using the plugin Child Theme Configurator to generate a FoundationPress child theme. However, after generating the functions.php and style.css files, there is no CSS visible on the site. It looks exactly like it does before running npm install in the original theme directory.

I also tried following the instructions here to generate the child theme manually but I had the same result.

Has anyone had any success with creating a child theme? If so, I would appreciate any help with this!

[randmanrjr]

Hi there. It is possible to use a child theme with Foundationpress, but it is not without it's challenges. I have done it, but it requires modification of the build system (gulpfile.js) to eliminate a lot of redundant file inclusions and building. You'll need to cherry pick what components/dependiencies you need for your child theme. For me I was mostly interested in changing some of the css for the theme, so I created a "simple" build system that just compiled the css.

I have recently switched to building sites with Foundationpress without a child theme. Since Foundationpress uses a build system, you will always control the build of your custom theme. No worries about updating a theme from a theme author and overwriting your changes; essentially, you become the theme author :-)

Developing themes with Foundationpress requires a different approach than most Wordpress developers have been using. Foundation and Foundationpress both use a build system (currently gulp) to generate the final theme from a set or working files. There is a learning curve with the build system, but once you master it, you will never look back. It has completely changed my Wordpress theme development practices. I would read the getting started with Foundationpress article on the official Foundationpress website.

https://foundationpress.olefredrik.com/

There is some info here on whether or not to use a child theme with Foundationpress:

http://foundation.zurb.com/forum/posts/19765-foundationpress-child-theme

The style.css in the Foundationpress theme is really a placeholder to comply with the Wordpress theme architecture. The real css is in the assets/stylesheets/ folder in the theme. This css is compiled from the sass files that are included with Foundationpress.That is why you are not seeing any styles on your site.

I don't think you will be able to use the Child Theme Configurator plugin to create a Foundationpress child theme.

Let me know if you have any questions.

[rishadfb]

@randmanrjr Thank you very much for the detailed reply! 👍

I've used FoundationPress on one project so far without a child theme already, but I've noticed that there have been some structural changes to the original FoundationPress theme since then. I would like to have the ability to update to the latest changes ideally, but I'm not sure if this is a deal breaker. What do you think? I have some experience with gulp so I wouldn't mind making a custom build system to get it to work.

[randmanrjr]

Hi Rishad,

Recently Foundationpress was updated for Foundation 6. A lot of the template files have been changed. The Foundation 5 version is still available as the foundation-5 branch of the current repository. They also changed build systems from grunt to gulp consistent with the changes in Foundation 6. So if you are interested in updating to the latest version, you will probably have to update a substantial amount of the files for your custom theme.

I have stopped using child themes, as it actually made the process of keeping the child theme up-to-date more difficult.

To keep my sites up to date, I maintain a fork of the Foundationpress repository. I keep that fork up to date with olefredrik/FoundationPress. I then clone my fork for each project I work on. I keep my fork as the origin, and then setup another remote for the project and track that project remote for the day to day changes on the project. I then merge in the changes as Foundationpress is updated. I try as much as possible to keep my site-specific code in their own files so the merges are not too painful. Sometimes I have to cherry pick the updates as to not break any customizations that I have done. I use diff a lot to view the changes from my up-to-date fork and the current project.

I also try to keep as much of my custom "functions.php" type code either in a plugin for the site, or as separate files that I require in the FoundationPress functions.php.

Having my own fork allows me to add other branches for testing, etc.

This may not be the perfect workflow, but so far it has been working for me.

Hope that helps.

Let me know if you have any other questions.

[Aetles]

Very good suggestions from randmanrjr. Even before the recent update to Foundation 6 there were a steady stream of breaking changes in FoundationPress, both in templates and build process. As I understand it FoundationPress was never mean to be upgraded in the traditional way. Having your own fork and carefully picking the changes you like is probably the best way (or just not upgrade it at all).

[colin-marshall]

Great discussion!

@randmanrjr that is a great workflow, thanks for sharing. That's the only workflow I've seen that's better than doing it all manually. Since the theme uses Sass, a build system using the parent and child theme would get pretty complex and you would end up with bloat from overriding every parent theme style in the child theme. Not worth the hassle IMO.

@Aetles I agree that updates to a starter theme like FoundationPress are much different than updating a traditional theme, because you're supposed to develop FoundationPress into a theme of your own, not leave it the way it is.

[rishadfb]

@randmanrjr Thanks again, that looks like a much better workflow than manually copying files!

I think considering that I will have others collaborating on my project soon, it might be best to just port the theme to Foundation 6 and it leave it at that. With gulp replacing grunt, it's a pretty up to date workflow to develop with so I think a child theme might not be necessary for me.