I recently joined Carrie Dils for an Office Hours discussion about workflows. Here’s a quick summary of what we discussed.
Listen to the Podcast
We discuss all things code, from templates and automation to my perspective on time management.
I have two starter themes: EA Starter, a heavily-modified, underscores-based theme; and EA Genesis Child, a Genesis child theme. Both are structured very similarly. EA Starter uses hooks from Theme Hook Alliance to make it more Genesis-like. I’d say about half my projects are Genesis-based, and the other half are custom WordPress themes.
I use a Core Functionality plugin on all projects, and have a simple mu-plugin on my local install for quick links in the admin bar.
I like to use CodeKit for SASS compiling, JS concatenation and minification, and live refreshing. For projects where you are collaborating with other developers, keeping environments and build processes in sync is more important, and CodeKit might not be a good fit. But as a solo developer it works great for me.
I have been learning to use gulp through my Shared Counts plugin – a collaboration with Jared Atchison. I’ve also been learning webpack and babel in my Gutenberg block development.
I use WPEngine as my development environment. For more information, see my post Git Push with WPEngine.
I use WP Migrate DB Pro to push/pull database and media. I use a bash script to trigger push/pulls. For instance,
project.sh push runs this:
- Pushes code to GitHub.
- Pushes code to correct WPEngine remote branch (production or staging), as defined by
- Pushes database & media using WP Migrate DB Pro (
wp migratedb profile 1).
Since the cli command only accepts profile IDs, I need to make sure I create the profiles in the right order. My initial setup is:
- Create a local WP environment (ex: clientname.local )
- Create a transferrable install on WPEngine (ex: clientname.wpengine.com )
- Make sure WP Migrate DB Pro is installed in both environments and configured to allow push and pull
- On local environment, go to Tools > Migrate DB Pro, select “push”, paste in the connection info, check “Media Files”, and save profile (I name it “WPE Push”).
- Create a new profile, same settings but for “Pull”. I name it “WPE Pull”.
Editing Production Sites
If the client is hosted at WPEngine, then we can use git to push code changes to staging and production environments (more information).
If they are hosted elsewhere, we use WP Pusher to push code changes to the production site.
When working with large sites, moving media back and forth can be difficult. In these cases I’ll often install BE Media from Production. It updates all (or some) media URLs to use the production URL. On my local install I can just have the themes and plugins installed, but all the images still display correctly.
I drop that plugin file in mu-plugins, then create another mu-plugin called local-settings.php where I specify the production URL. See my post Load Media from Production for more information.
Thanks for sharing this. As always I really appreciate it and like to read your blogposts.
When you say half your projects are genesis based, are there technical reasons in that, or is that just depending on the legacy of the project? I sometimes wonder if the need for (of relevance of) using genesis is decreasing by advances in CSS, browser technology and WordPress itself.
Nowadays it seems that more and more developers that where long time public enthousiasts of the genesis framework don’t use it anymore on their own websites, and perhaps less also in their projects, and I wonder what is behind that. Perhaps also to Rainmaker or not to Rainmaker will be more the choice of the future instead of genesis as a theme framework.
Can you talk about why you choose for using genesis (or not) nowadays and what remaining value you see in using Genesis now and in how technology is advancing, sometime? That would interest me too.
Bill Erickson says
That’s a great question.
The main reason I suggest not using Genesis is if there might be a need to create a child theme for a separate site in the future. You’d be surprised how often this happens. For instance, we built a large site for a law firm a year ago and now they want to build practice area specific websites that leverage the existing theme. It only took us a few hours to create a child theme that changes out the logo, base colors, and a custom homepage. Any updates to the main theme get deployed to all sites using it.
WordPress doesn’t support grandchild themes, and I’ve gone down that path with Genesis and it isn’t pretty. Genesis child theme as network theme, core functionality network plugin, site-specific plugin as “grandchild theme”…
On some very custom projects I find that I don’t really use any of the Genesis functionality other than the hooks – we end up removing everything and building it custom anyway. If that’s the case, it makes sense to keep the codebase simpler and start with a custom theme.
Genesis is still a great fit for the simpler sites I build. It provides a lot of great functionality built-in and a great selection of plugins (ex: Genesis Title Toggle) to extend functionality. I especially appreciate the schema filters so that I can easily add the proper schema markup to events, job postings, reviews, and recipes.
If a client is already using Genesis, I like how we can build a completely new child theme but retain the underlying markup. I’m no SEO expert, but I feel this is less disruptive to their short-term SEO rankings.
It often comes down to client preference. Some come to me specifically asking for a Genesis-based website, while others specifically want a custom website and won’t talk about building on an existing theme. That’s why I maintain two base themes and keep them as comparable as possible.
Thanks for elaborating on how you make choices in relation to genesis. Until now I’ve mainly used Studiopress child themes as a base and stayed close to them. I like the presentation of them mostly, although their presentation sometimes seems a bit barebones too (like how those themes present woocommerce pages), but having a lean website is important too.
On the other side having all image files used double the needed size to facilitate for retina in f.i. the digital pro child theme, makes me wonder if that is helping or hurting seo and pageload. And plugins that add cpt’s might not be plug and play in genesis themes, like tribe’s the events calendar. But I agree that for developers and programmers it offers a base-functionality to append upon.
However I don’t know if the choices genesis makes will be enough, since 70% of visitors nowadays are on mobile devices (mostly smartphones) and genesis mostly isn’t mobile first and might not be at the forefront of tech aimed primarily at that platform (in which most bells and whistles have no place) and Genesis childtheme’s CSS is still mainly based on floats rather then flexbox or the grid tag (perhaps for compatibility). Lately I wondered if we might need other indicators that purely screen-size to distinguish pure touch-screen environments from mouse-pointer and keyboard-devices.
When Google and others more and more advance in the direction of PWA’s, I wonder what role genesis will play in that, if at all. And how will WordPress develop in an environment in which companies probably want more of that? Can themes be the vehicle for that, or must development in WordPress shift to something we don’t know yet?
Lots of questions. Exciting times perhaps, but the need for speed and ux is in the core of all of them. Perhaps food for future articles?
thanks for sharing this.
I also built most of my client projects with Genesis, but sometimes especially when it comes to CSS I am a bit frustrated because there is no support for SASS etc. However I want to give this one a try: https://roots.io/sage/ Have you ever used/tried it and if you have tried it, why don’t you use it? Maybe you can share your view on this one?
Bill Erickson says
What in Genesis prevents you from using SASS? I use SASS in my Genesis child theme (see here).
I’ve heard a lot of good things about Sage but haven’t tried it myself. Personally I prefer a leaner starter theme rather than one containing a lot of frameworks (Bootstrap, Foundation, Blade…).
I see your point. Especially for smaller projects a theme setup like Sage is maybe too much.
You are right, I missed to say that usually I go with the Genesis Child Theme from StudioPress as a basis to start. Maybe it’s time to create my own Child Theme on a Genesis basis or even use yours as a starting point 😉
Great post! On the EA Genesis child, I don’t see an area to update the logo. Am I just missing it?
Bill Erickson says
We include the logo in the
/assets/imagesdirectory and then update the stylesheet here to use it.
We don’t make the logo editable in the backend for a few reasons:
1. Clients almost never change their logo. If they are rebranding, they’ll likely need the entire site redesigned at the same time.
2. We often change how the logo appears at different breakpoints. For instance, a site we’re working on now uses a large logo & tagline on desktop, but just a small logo on tablet/mobile to keep the header small.
3. We use SVGs for the logo but the WordPress media uploader doesn’t work well with SVGs.
David H says
Makes total sense and this is exactly what I was looking for. Thank you for the quick response!
Dave Mackey says
Hi Bill – Did you mean to link to codekit.com or to codekitapp.com? The former looks pretty slick, but I’m thinking you meant the latter. 🙂
Bill Erickson says
Haha good catch!