6 ms·

Tonik — WordPress starter theme with CLI, ES6, Webpack and more

52 points by patrulo 9y ago

mandazi 9y ago
Cool. I'll check this out. One thing I really find myself having a hard time working with WordPress themes is that many of them are bloated and require so many plugins. The amount of css/js files that are required to load a page in a premium WordPress theme averages around 30+ files (at least from what I have seen working with WordPress themes).
- tyingq 9y ago
  >The amount of css/js files that are required to load a page in a premium WordPress theme averages around 30+ files HTTP/2 alleviates most of this, but there are plugins that can concatenate and minify css/js. It is a shame though that most of the attractive themes are so bloated.
  - ajohnclark 9y ago
    Autoptimize is a good one
    - zulkar 9y ago
      yes
  - chrisan 9y ago
    > It is a shame though that most of the attractive themes are so bloated. The target audience just doesn't care (or dont even know). Theme authors want to solve as many problems as possible to increase the chances someone buys their theme. It's in their best interest to sell something with everything but the kitchen sink (V5.0 now with kitchen sink!)
    - tyingq 9y ago
      Sure. But it's more than that. For example, they take 3 pieces of functionality and make them all emit separate js/css. Often with copy/paste code duplication for common functions. Or pull in some huge 3rd party library to use one tiny piece of it that you could do in vanilla js anyway.
  - Cthulhu_ 9y ago
    A simple (to install) solution for this is Google PageSpeed Module - https://developers.google.com/speed/pagespeed/module/ https://developers.google.com/speed/pagespeed/module/. It's like a proxy in front of your website that will serve optimized / minified / concatenated versions of the theme and such. It inlines small stuff, resizes images where needed, all that good stuff. I don't have it on my current webserver though, I'm not comfortable manually having to compile nginx, it seems like there's a lot that can go wrong there.
dangerface 9y ago
I keep seeing these projects to make wordpress work more like a cms and I keep thinking why not just use a cms?
- austinpray 9y ago
  WordPress is a cms first and foremost. edit: lol today I learned cms != blog
  - tyingq 9y ago
    I'd say "sort of". It does support custom field types and custom post types. But you have to either write code, or use some 3rd party plugin to manage/use them.
  - bybjorn 9y ago
    Why do you then still get a blog when you install it?
    - hobofan 9y ago
      Legacy behavior nobody bothered to update ;)
  - zaphar 9y ago
    No. WordPress is a blogging platform. A CMS is much more than that. If you need a CMS you probably want something more than WordPress.
    - SippinLean 9y ago
      Have you used it recently? What you say was true 10 years ago, but what features does it lack compared to a "true" CMS today? I've built several high-traffic e-commerce sites using it, none of them had a blog. Compared to something like Drupal it's a total pleasure to use.
      - deleted 9y ago
fimdomeio 9y ago
I started separating the admin from the "theme" by using the wordpress rest api (admin running in a subdomain). While this might seem overkill at first but I find that there's a lot less documentation to read and I can reuse a lot more code from other projects without any changes.
- bluetidepro 9y ago
  Do you have any detailed notes on how you set this up? I haven't used WP in a long time, to be honest, so not sure how their rest api works? Is it straight forward? Would love to read about this setup you do, sounds great.
  - rmccue 9y ago
    The REST API is included with WordPress 4.7+ and on by default. Docs here: https://developer.wordpress.org/rest-api/ https://developer.wordpress.org/rest-api/ (if you find anything missing, I'd love to know)
- Already__Taken 9y ago
  Most of my WP sites don't do a lot. Can you use the rest API to handle the contact form and search? that was I could just use a static generation from wp itself. The wp admin wouldn't even need to be publically accessible then.
  - sanat 9y ago
    The WP API handle search but not contact forms. Most plugins still don't provide you with an API. Contact form 7's latest build has them using their own API - but it's still undocumented.
- yellowboxtenant 9y ago
  I can't picture developing WP themes without WP_Query class. Does that ever pose a problem for you?
- _neil 9y ago
joe_momma 9y ago
I like it, neat that NPM is used
gibbitz 9y ago
I built a custom gulpfile that uses composer to manage the updating of WP and plugins along with building and FTP transfer a while back that I've been using for about a year. I should have built a swanky page and open-sourced it then :(. Composer sure makes WP development much easier to integrate with build systems. This is totally the way to go as long as clients prefer using WP to something more full-featured or server intensive. I'll have to check this out when I decide that webpack has some advantage over gulp/rollup. Right now I'm able to get smaller packages and do more easier with gulp, so I'm in no hurry.
zulkar 9y ago
hi
ezekg 9y ago
This looks pretty cool. A couple years back, I built a similar starter theme and CLI package for WP dev. Back then CoffeeScript and Grunt were the norm, so it's a bit outdated now. But the CLI actually grew from a scaffold like you have now, to being able to deploy over SSH using Capistrano, database and all, which was really nice. I don't do much WP dev anymore (thankfully moved to using Rails, Go and Node), but when I do I usually use that old project for deployment. I'll be sure to check this out, as the services architecture looks like a nice change of pace. I tried Bedrock/Sage in the past, but it was just too much for me and made some things harder than they should be. Added links to my old projects below in case anybody is curious, [0]: https://github.com/themejuice/tj https://github.com/themejuice/tj (CLI) [1]: https://github.com/themejuice/sprout https://github.com/themejuice/sprout (theme)

52 points by patrulo 9y ago

Cool. I'll check this out. One thing I really find myself having a hard time working with WordPress themes is that many of them are bloated and require so many plugins. The amount of css/js files that are required to load a page in a premium WordPress theme averages around 30+ files (at least from what I have seen working with WordPress themes).

tyingq 9y ago
>The amount of css/js files that are required to load a page in a premium WordPress theme averages around 30+ files HTTP/2 alleviates most of this, but there are plugins that can concatenate and minify css/js. It is a shame though that most of the attractive themes are so bloated.
- ajohnclark 9y ago
  Autoptimize is a good one
  - zulkar 9y ago
    yes
- chrisan 9y ago
  > It is a shame though that most of the attractive themes are so bloated. The target audience just doesn't care (or dont even know). Theme authors want to solve as many problems as possible to increase the chances someone buys their theme. It's in their best interest to sell something with everything but the kitchen sink (V5.0 now with kitchen sink!)
  - tyingq 9y ago
    Sure. But it's more than that. For example, they take 3 pieces of functionality and make them all emit separate js/css. Often with copy/paste code duplication for common functions. Or pull in some huge 3rd party library to use one tiny piece of it that you could do in vanilla js anyway.
- Cthulhu_ 9y ago
  A simple (to install) solution for this is Google PageSpeed Module - https://developers.google.com/speed/pagespeed/module/ https://developers.google.com/speed/pagespeed/module/. It's like a proxy in front of your website that will serve optimized / minified / concatenated versions of the theme and such. It inlines small stuff, resizes images where needed, all that good stuff. I don't have it on my current webserver though, I'm not comfortable manually having to compile nginx, it seems like there's a lot that can go wrong there.

dangerface 9y ago

I keep seeing these projects to make wordpress work more like a cms and I keep thinking why not just use a cms?

austinpray 9y ago
WordPress is a cms first and foremost. edit: lol today I learned cms != blog
- tyingq 9y ago
  I'd say "sort of". It does support custom field types and custom post types. But you have to either write code, or use some 3rd party plugin to manage/use them.
- bybjorn 9y ago
  Why do you then still get a blog when you install it?
  - hobofan 9y ago
    Legacy behavior nobody bothered to update ;)
- zaphar 9y ago
  No. WordPress is a blogging platform. A CMS is much more than that. If you need a CMS you probably want something more than WordPress.
  - SippinLean 9y ago
    Have you used it recently? What you say was true 10 years ago, but what features does it lack compared to a "true" CMS today? I've built several high-traffic e-commerce sites using it, none of them had a blog. Compared to something like Drupal it's a total pleasure to use.
    - deleted 9y ago

fimdomeio 9y ago

I started separating the admin from the "theme" by using the wordpress rest api (admin running in a subdomain). While this might seem overkill at first but I find that there's a lot less documentation to read and I can reuse a lot more code from other projects without any changes.

bluetidepro 9y ago
Do you have any detailed notes on how you set this up? I haven't used WP in a long time, to be honest, so not sure how their rest api works? Is it straight forward? Would love to read about this setup you do, sounds great.
- rmccue 9y ago
  The REST API is included with WordPress 4.7+ and on by default. Docs here: https://developer.wordpress.org/rest-api/ https://developer.wordpress.org/rest-api/ (if you find anything missing, I'd love to know)
Already__Taken 9y ago
Most of my WP sites don't do a lot. Can you use the rest API to handle the contact form and search? that was I could just use a static generation from wp itself. The wp admin wouldn't even need to be publically accessible then.
- sanat 9y ago
  The WP API handle search but not contact forms. Most plugins still don't provide you with an API. Contact form 7's latest build has them using their own API - but it's still undocumented.
yellowboxtenant 9y ago
I can't picture developing WP themes without WP_Query class. Does that ever pose a problem for you?
_neil 9y ago

joe_momma 9y ago

I like it, neat that NPM is used

gibbitz 9y ago

I built a custom gulpfile that uses composer to manage the updating of WP and plugins along with building and FTP transfer a while back that I've been using for about a year. I should have built a swanky page and open-sourced it then :(. Composer sure makes WP development much easier to integrate with build systems. This is totally the way to go as long as clients prefer using WP to something more full-featured or server intensive. I'll have to check this out when I decide that webpack has some advantage over gulp/rollup. Right now I'm able to get smaller packages and do more easier with gulp, so I'm in no hurry.

zulkar 9y ago

ezekg 9y ago

This looks pretty cool. A couple years back, I built a similar starter theme and CLI package for WP dev. Back then CoffeeScript and Grunt were the norm, so it's a bit outdated now. But the CLI actually grew from a scaffold like you have now, to being able to deploy over SSH using Capistrano, database and all, which was really nice. I don't do much WP dev anymore (thankfully moved to using Rails, Go and Node), but when I do I usually use that old project for deployment. I'll be sure to check this out, as the services architecture looks like a nice change of pace. I tried Bedrock/Sage in the past, but it was just too much for me and made some things harder than they should be. Added links to my old projects below in case anybody is curious, [0]: https://github.com/themejuice/tj https://github.com/themejuice/tj (CLI) [1]: https://github.com/themejuice/sprout https://github.com/themejuice/sprout (theme)