theme assets folder during watch and production

[phoheisel]

During development, I link my assets at theme_name/theme/assets after running a bundle, those files will end up under theme_name/assets

Probably linking them like this is not the right way?

[gregsullivan]

Hi Philip—Thanks for posting this!

During development, I link my assets at theme_name/theme/assets after running a bundle, those files will end up under theme_name/assets

That is definitely the expected outcome in terms of where the assets folder would end up after npm run bundle.

Probably linking them like this is not the right way?

In what sense? Are the contents of the assets folder not meant to be part of the bundled theme (because they're used to generate other files, for example)?

Please let me know what kinds of files are inside the assets folder and why you're concerned about that folder being part of the published theme, and I'd be happy to give you feedback!

[phoheisel]

Yes, sorry for not asking more specificly.

Yes the assets should be and are in the bundle. I have fonts and images in that folder. My issue is linking them in my css files. As the link in dev and bundled production is not the same. Maybe I just missed how to dynamicly link them?

Example for my fonts.css:
src: url('/wp-content/themes/theme_name/theme/assets/fonts/font-name.woff2')

After bundling this link won't work as the fonts end up in /wp-content/themes/theme_name/assets/fonts/

[gregsullivan]

No problem at all! I understand now.

For fonts and images declared in CSS, I use relative links. Keeping in mind that the CSS all compiles into ./theme/style.css, you can use something like url('assets/fonts/font-name.woff2'). Here's an example from a project I'm working on:

@font-face {
	font-family: "Freight Sans Pro";
	src: url("fonts/freight-sans-pro-book.woff2") format("woff2"),
	     url("fonts/freight-sans-pro-book.woff") format("woff");
	font-weight: 400;
	font-style: normal;
}

[phoheisel]

ok well, that was to easy to solve! Thanks for your fast response!

[gregsullivan]

You're very welcome—happy to hear it's resolved!

[andrew0g]

Hi @gregsullivan! First of all, thank you so much for this theme - it's awesome! Sorry if this follow-up question seems basic, but I'm relatively new to npm and this type of coding. I'm importing some data from an external system into WP, and within that data, there are taxonomies with descriptions. Some of those descriptions contain images in the HTML code. I’ve copied all those images to theme_name/theme/assets and changed the URLs in the img src to /wp-content/themes/theme_name/assets. However, as @phoheisel pointed out in his initial question, during development, these URLs will be incorrect. Is there a simple way to make it work in the development environment?

Thanks in advance!

[gregsullivan]

Hi Andrew—You're very welcome, I'm happy you like it!

I think the best place to start here is with your migration workflow. Your development domain presumably wouldn't match your production one, so are you using something like WP Migrate, or a set of WP-CLI commands, to make changes to your database to replace all the development URLs with production ones (and vice versa)? If so, I would likely add a search-and-replace for the theme folder to that process.

I generally don't include links to theme assets in post content or taxonomy descriptions, preferring to have anything in those contexts exist in the media library, so I haven't directly encountered this.

Your other option off the top of my head would be to create a shortcode that outputs the path to the theme root so that you could use it in taxonomy descriptions.

Happy to discuss this further if you have follow up questions or comments about the above options!