Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Aurelian Spodarec
10,801 PointsHow to integrate WordPress into Webpack?
I have made a website front-end using: HTML/CSS, Scss, JavaScript and most importantly the power of Webpack.
As you know, Webpack compiles all of that, and bundle js and stuff like that.
However, if you look at my project here how would you put that in WOrdPress? What steps would you take?
I believe I need to set up the WP .php files in the root, webpack direction to a new public folder that has compiled js and css, and then in functions.php wp_enqueue_styles say to get the public/css/app.css file, same with JS.
So that will get the CSS and JS compiled. Meanwhile the style.css has just the required comment.
After that, what will happen I can do is is to run watch changes, so the NPM or Webpack watched for changes in my stylesheets, so I can change something, and it will update.
THe hosting will be done with MAMP, but I can always watch the files.
I remember at work I have been working with something like this, they had, I think two commands, one on the local server, and the other just to watch which was then hosted on mamp.
But can't remember how that was done and I don't have access to that anymore.
And how would you develop front-end first, and then put it in WP?
Or do you go straigh in PSD to WordPress? You develop the pure HTML first, in the .php extensions, and then just change the code inot dynamic one?
At first you can add .php extention, and run a local server just to do the front-end, but later you can do it like I mentioned above.
Right?
How would you translate this into a WP theme?
And no API and stuff like that but just like I mentioned.
2 Answers
Luke Pettway
16,593 PointsYou can certainly set up webpack to work with a WordPress theme/plugin project. I prefer to use Vagrant for developing themes since I can create an environment that symlinks to the theme directory which is a flat github repository that is local on my machine, however you can do the same thing with MAMP. Essentially what that boils down to is having a theme directory that is the root of your project. Your webpack config file would exist at the top level of that theme directory.
Then your webpack tasks would point to a directory that contains your unminified Sass and Javascript files, usually named like src/assets. You webpack tasks would look at the files in that directory and when you build the project for production it would then create a the stylesheet and javascript file for your site in another directory which is up to you at that point. Usually I'll have a folder called stylesheets and another called js at the root level and my theme will look in those files.
As far as developing the theme, looking at those files, I would just split out the common pieces such as the header/footer and start off with that and creating template partials for each. Once those are done you can start to create the various page templates for anything that is a one off, and templates for any reusable pages. How you do that is up to you, you can start off just copying and pasting the HTML from each page into the template, or take the time to add in all of your logic.
Let me know if that answers your question or if you have any more questions.
Aurelian Spodarec
10,801 PointsFinished! What do you think? :)
I need to learn how to make a manual.
Aurelian Spodarec
10,801 PointsAurelian Spodarec
10,801 PointsI figured this out :D
But it's good to get your perspective on this. I feel that web development has many ways to do things, and there isn't always the best way to do something.
If there is, then consider other options that might be better for what you're doing right now, which means that it just depends.
Like you said, "How you do that is up to you" - I asked other developers, and got different answers.
I was looking for the silver bullet, but there isn't one :)
I think having a process is important. I personally, think if the job is to do a PSD to WordPress, then the best thing is to set up a WordPress environment straight up, and then develop the static version of it, using the WP hierarchy from day 1.
Once the static part is finished, proceed to make it dynamic, so then it's WP phase, the back-end.
Here I have made a Webpack to WordPress Starter Template that I will update on how I work - hopefully, this will be helpful for future people that'll come, and they get an idea how to do it.
PS, I'm still working on it, but the main parts are finished, within 24hours I will upload the repo ^^