search

olefredrik / FoundationPress

FoundationPress is a WordPress starter theme based on Foundation 6 by Zurb
https://foundationpress.olefredrik.com
MIT License
2.7k stars 869 forks source link

How do I finalize the theme for upload in WP Dashboard? #1305

Closed AngelaStucky closed 5 years ago

AngelaStucky commented 6 years ago

I ran my first footer.scss edit - just a quick background color change - to see if I can affect the theme and upload it. Command line is watching when I make edits, but when I typed npm run build and npm run package, nothing happened. Perhaps I've missed something. I'm very new to all of this.

AngelaStucky commented 6 years ago

So, update - I installed MAMP, so I can see that even though I'm not seeing a result from npm run build and npm run package, the css file is being changed by the scss because i am running npm start. I am still a little confused though, about how the final theme package will look. I'm assuming that I won't need everything that's in my FoundationPress folder that I cloned from github. Is that correct? Thank you so much to whoever can help me!

matt-antone commented 6 years ago

I've used this and it works great. Just upload the resulting zip file via the "Add Theme" button on the themes page on your production or staging WordPress installation.

From the readme:

To create a .zip file of your theme, run:

npm run package

Running this command will build and minify the theme's assets and place a .zip archive of the theme in the packaged directory. This excludes the developer files/directories from your theme like /node_modules, /src, etc. to keep the theme lightweight for transferring the theme to a staging or production server.

AngelaStucky commented 6 years ago

Hi Matt, thank you for your time and your help, you are awesome!!!

I WAS having some problems, but I think I figured them out. I have to STOP "npm start" (using ctrl c as you know I'm sure) BEFORE I can run "npm run build" and/or "npm run package" haha my mind is blown. I'm clearly a newbie 👍 but learning!!!

matt-antone commented 6 years ago

ah. I see what your missing. You need to incorporate your all the commands into your workflow.

npm start compiles the scss and injects the styles into you browser via BrowserSync while you're developing the templates, styles and javascript for your theme.

you need to run npm build in order to see the updates on your dev server without BrowserSync to test your compiled css and javascript.

when your ready to publish your theme you can npm run package

AngelaStucky commented 6 years ago

Do I run npm build or np run build?

matt-antone commented 6 years ago

I've gotten the same results either way.

AngelaStucky commented 6 years ago

Yes, I'm still seeing that even though my terminal says [10:49:14]File src/assets/scss/modules/_footer.scss changed. [10:49:14] Starting 'sass'... [Browsersync] 1 file changed (app.css) [10:49:15] Finished 'sass' after 852 ms [10:49:42] Starting 'copy'... [10:49:42] Finished 'copy' after 12 ms It's still not compiling the sass into the css, even though I did run npm run build

AngelaStucky commented 6 years ago

At least, I'm not seeing it in my browser, and the file in finder does not have a timestamp to say that it's changed.

matt-antone commented 6 years ago

OK. I just fired up my dev server. Ran npm build. I show the file has not been updated in the Finder, and couln't see the changes. Cleared my browser cache and viola. Does clearing browser cache help? I think because the date isn't changing in the finder, you're being served a cached file.

AngelaStucky commented 6 years ago

Oh my gosh you're right! I'm doing it! winning at liiiiiiife THANK YOU!

conorbarclay commented 6 years ago

@AngelaStucky @matt-antone What browser are you using? In the Chrome and Firefox dev tools, there is an option in the settings to disable the browser cache while you have the inspector window open. Super handy, and helps to avoid these types of issues.

matt-antone commented 6 years ago

yeah. but then I always seem to forget to turn that off, so the rest of the interwebs are so slow.

you may want to look into using Vagrants instead of MAMP. I've found that it's much easier to replicate your production server.

I use this exclusively for the last 3 years: https://varyingvagrantvagrants.org

conorbarclay commented 6 years ago

yeah. but then I always seem to forget to turn that off, so the rest of the interwebs are so slow.

AFAIK, that setting is only in effect while your dev tools are open. Surely you're not doing your normal browsing with them open ALL the time.

AngelaStucky commented 6 years ago

I am using Chrome. Thank you, that's helpful! I set it to disable cache when Dev Tools is open, and it's working great. I will also check out Vagrants. Thank you both!