A Starter Child Theme For Genesis

While my last post about a theme was for my my first Gutenberg-ready theme, Malik, I do a good portion of my work with the Genesis Framework, and often use the custom themes that StudioPress sells.

I like to save time and repurpose code wherever I can, and several years ago I decided that I needed to build my own starter theme. This theme would be a Genesis child theme, and it would incorporate many of the features that I use over and over again for client sites. I put the code up on Github, so you can download or repurpose my Genesis child theme used for Orange Blossom Media projects.

Overview

I will clarify now that I haven’t updated this theme in a few months, and I clearly need to give it some TLC this weekend. For instance, I’m still loading version 4.7.0 of FontAwesome, when the superior version 5.0.13 (as of writing) is even better and easier to use. I’ve included it already, but I need to update the maintenance version and remove the unused, older files. Likewise, I need to remove the favicon which has been replaced with a WordPress customizer feature.

In addition to providing an icon font, the theme enqueues a login stylesheet, as well as some functions that allow you to change the login page title, icon, and layout. This makes it easier to add client information to the WordPress login screen, making it feel more custom to them.

I also pre-include a few scripts that I use for a lot of sites. This includes Sidr, a script for pull out menus which I use for responsive site menus. I have another script that will load a different type of menu, depending on the use case. Finally, there are some Modernizr scripts included to help integrate with older browsers, and a Javascript file with some modifiable scripts included.

There are a few includes that load on initialization, including a PHP based mobile detector in the event that I want to selectively run some server-side code. Functions that run on the admin side of the WordPress dashboard are loaded in a separate file from frontend code, and includes lots of hooks and filters to manage dashboard display and Genesis features, making it easier to toggle them on or off as needed. I’ve been slowly moving some of these functions to plugins that I load on client sites in the event that they change themes, but I kept them here for ease of use.

There are some customizer defaults that get loaded, as well as custom front-page.php, page-landing.php, and single.php. These handle a homepage separate of the latest posts, a page template that removes the header and footer, and an individual post, respectively.

Finally, the functions.php file defines a lot of sane standards, includes more hooks and filters to toggle as needed, and allows some quick repositioning of Genesis actions on specific page types. The stylesheet likewise makes assumptions of how the site will be designed, allowing you to modify as opposed to create from scratch each time. This should still be updated (for instance to be mobile-first), but it’s a familiar standard for me, and for everyone who’s modified a StudioPress theme already.

Why Spend Time on This?

Initially I put extra effort into creating this starter over building a specific client site. I even spend some time now reviewing it and making minor changes over time. Why would I spend time that I could be using for productive work doing something like this?

The investment of time and focus on planning and making templates and defining standards is a long-term gain. I’ve created a collection of code that can be reused over and over again, and set myself up for success every time I start a new site. It’s almost not a joke when I say that I activate this theme and half the work of building a client site is done for me.

By using the same codebase over and over again, I’ve allowed myself mental shortcuts that overall make me more productive, and allow me to provide better value by not reinventing a feature or layout every time I get started. It turns out that time was well spent, as I’ve been able to repeatedly apply this code.

Tomorrow I’ll discuss how I made this process just a bit easier, and learned some new things along the way, to create a theme generator.

For now, download the starter theme here if you want a leg up on building a custom Genesis themed site! 


https://github.com/davidwolfpaw/obm-genesis-child

My First Gutenberg Ready, Mobile First Theme

tl;dr you can find the code for this theme and download on my Github profile.

When I decided to revamp my blog, I knew that I’d want to start with a fresh theme. I’m not much of a designer, but I appreciate themes that are minimal, make decisions for the display of content, but allow some customization options to let others make it their own.

With Gutenberg around the corner, I also knew that I’d want to take advantage of the content layouts that the new WordPress editor provides, and future proof the theme a bit for both that editor and the variable screen sizes that visitors would be coming from, making it a mobile-first theme.

With that in mind, I took a look at some of the existing resources for Gutenberg theme development, including articles like this introduction to adding theme color palettes by Brian Gardner, and plotted out some of the features and settings that I’d want to include.

Introducing Malik Theme

This new theme is named in honor of Om Malik, a long-time blogger, friend of WordPress co-founder Matt Mullenweg, and founder of the sadly changed Gigaom. While I’m using the theme with a header on top of the page, I’ve created a layout similar to Om’s personal blog, with a left sidebar displaying the site title, menu, and information.

I’ve added a few settings that the site owner can modify, and am considering what new features to include or default for anyone using the theme. The existing settings currently include the following:

  • Header Location – You can choose to put the header on top or on the side of the site
  • Hide Header on Scroll – Make the header info disappear on scroll
  • Hide Header Menu on Scroll – Ditto for the header menu
  • Font Pairing – I used some font guides to select good pairings for typography-illiterate people like myself
  • Night Mode – Let visitors toggle night mode to make the page darken for low-light reading
  • Read Time – Display an estimate for how long an article will take to read
  • Article Progression Bar – Show a progression bar for how far you’ve scrolled in an article
  • Author Info – Choose whether to display the author picture, display name, and description at the bottom of articles
  • Post Meta Header – Display info such as author URL, comments, tags, categories, post time, and post date via shortcodes before articles
  • Post Meta Footer – Display info such as author URL, comments, tags, categories, post time, and post date via shortcodes after articles
The sidebar header layout of the Malik Theme
The sidebar header layout of the Malik Theme

These features were built with blogging in mind. I use night mode on apps like Pocket and Twitter, and having the option available on a website is something that I would like to see more frequently.

Night Mode is a useful feature for reading in a darkened room

Speaking of Pocket, I appreciate how it gets out of my way while reading by hiding menus on scroll. Read time and progression bars are available to give an indication of article length, which helps me determine if something is going to be read right now or added to Pocket for later reading in the first place.

The theme is still under active development, but you can see it in action right here on my personal site. If you want to try it out, you can get the code on Github. If you find a bug or have suggestions for new settings or features, I’m always looking to improve!

Note: Gutenberg itself is in active development as well, so if you use this theme, be sure to watch it for updates!

Installing Vagrant, Virtual Box, VVV, & VV On Mac

I’ve been using Vagrant with VirtualBox for local development for over a year now, after introduction to the tools on top of Varying Vagrant Vagrants at a WordCamp. It’s become my default standard for starting new WordPress sites, and it’s more highly accessible than I realized at the time that I first tried it, though it can also be a bit of a black box from the outside.

Throughout the post I’m going to cover a quick install guide (though by no means exhaustive), and borrow heavily from a guide that I put together and am keeping updated on my Github page. I also discussed this at a developer meetup for WordPress Orlando last month, which you can check out if you want to give ServerPress or MAMP a try too.

Note, I’m coming at this from a Mac, which used to drive me bananas in guides, so apologies if you’re on Windows.

Installing Virtual Box, Vagrant, VVV, and VV

First, let’s talk about what we’re setting up here. The outcome of this post should give you a local development environment for WordPress sites that you can start and expand upon rapidly, making it easier to build new sites for yourself or your clients. We’re going to start by downloading and installing VirtualBox, which is by far the largest part of this project. I use Virtual Box because it is free and accessible for a wide variety of platforms, but VVV supports Parallels, Hyper-V, VMWare Fusion, and VMWare Workstation as well.

After you’ve downloaded and installed VirtualBox, you’ll want to ensure that you have Vagrant installed. This can be installed a wide variety of ways, but the most straightforward is going to the official download page and installing the version that matches your computer. After Vagrant is installed you should be able to open Terminal and type the command vagrant and see a list of flags that you can use.

You’ll also need Git for some of this, so if you don’t have it, download here and install it.

Vagrant installed on Terminal

Next, you’re going to install vagrant-hostupdater with the command vagrant plugin install vagrant-hostsupdater, then install vagrant-triggers by typing vagrant plugin install vagrant-triggers into Terminal too. These tools will allow Vagrant to automatically set hosts for you, which are a pain in the butt on your own, and allow triggers to run, which lets other programs (say VV?) attach their own events to Vagrant.

Up next, install Varying Vagrant Vagrants, which is thankfully shortened to VVV. You can do this in Terminal too, using the command git clone git://github.com/Varying-Vagrant-Vagrants/VVV.git vagrant-local. You’re going to move into that directory by typing cd vagrant-local, since vagrant-local is the name of the folder that you made and put it into when you cloned it to your computer.

The next portion of this is really long. Like, don’t do this at a coffeeshop or via a mobile data plan long. Probably should give fair warning that setting up VVV is a long process on slow internet. Let’s assume that you are on fast internet or have plenty of time to kill. Thankfully you can run this in the background and go along your day, provided heavy YouTube viewing is not part of your downtime. Run the command vagrant up, which is a command that you’ll be getting used to over time. The first time that you run the command it will have to download a whole box for Virtual Box, basically meaning you’re downloading and installing a new operating system that will run alongside your existing one.

When VVV is installed, you should be able to visit vvv.dev in your browser and see it in all of it’s glory!

Default VVV page
In the next post, we’ll make this page show useful information and look pretty.

Look, at this point you probably need a coffee or something. Relax, you’re doing great, and treat yourself to that caffeinated goodness.

Site Creation with VV

To make site creation even easier, we’re going to use Brad Parbs‘ cool tool Variable VVV, or VV for short. There are a few methods to install this, and while I use HomeBrew which makes it rather easy, in the event that you don’t, check out his install instructions here: https://github.com/bradp/vv/#installation.

With VV installed you can use the command vv --create to install new WordPress sites to a single VVV install with ease. I’m going to save the discussion on how to do that for the next post, since it can cover quite a bit.

Next Time on the Show!

I’m going to go through some enhancements in my next post on this topic, like using a custom VVV dashboard, how to get value out of VV, how I make VVV a bit easier to use, and some of the testing that I’ve done around squeezing performance out of VVV and making it load faster.

I hope that if you’ve stuck around for the journey you were able to successfully get going, or at least will give it a shot. If you’re having any trouble, please leave a comment and I’ll try to help you out here so others can troubleshoot too.

Workshop – Building a Business with WordPress

Last weekend I hosted a workshop for members of WordPress Orlando where we worked on websites as businesses. The event was set up like a quicker Startup Weekend, where attendees pitched ideas and voted on them to work together in groups. At the end of the day, each group shared what they worked on and what they learned during the day.

The goal was not to further the business of any one attendee, but to have everyone work together. We also sent attendees home with some cool tools, including a free year of hosting at SiteGround, to ensure that they had no excuse not to get started with their businesses.

WordPress Orlando Business Workshop

We gave groups a mandate not to focus on writing code, but instead look for tools that could help them out. This let us focus on the idea and a minimum viable product than on perfect execution, which is all but impossible in one day. They learned how to set up membership sites, newsletters, payment gateways, or even just install WordPress. They focused on the structure of a business model and website, not on the exact layout and design.

I believe that empowerment is the key feature that WordPress offers. I’m always talking about the community and how important it is to be involved and how it helps raise everyone up, but empowerment is the reason for that community to exist. WordPress can make it easy for someone who is retired, between jobs, raising a family, going to school or already employed to start a new business or expand upon a hobby. Giving someone the option to start their own business without having to wait for approval or jump through a ton of hoops is a great way to get them involved in something fun that can produce tangible results.

WordPress Orlando Business Workshop

I would say that the event was a success overall. We had about thirty attendees stay the full day to work, and we rarely had to step in to help. I think that’s the best sign of success for me – that we were facilitators and mentors, not walking people through every step of the way. We’ve already had requests to do the event again, and I took copious notes on how to improve for the future.

I can’t thank our awesome sponsors enough for the support that they gave us. I didn’t ask for money, I asked for tools for our attendees to take home with them, and did they provide! This is my blog, so I can put my affiliate code, but if you attended the event, you got some of these tools for free or at a heavy discount. 😀 Thanks again!

  • Director of Innovation for Orlando, Matt Broffman, came by to share with attendees his path to building Bungalower, a site that exemplifies many of the lessons that we aimed to teach.
  • Canvs donated space for our teams to work and eat throughout the day.
  • SiteGround graciously donated free hosting to all attendees and gave us some awesome notebooks for the event
  • StudioPress offered a discount on their themes, which I use for a lot of site builds.
  • Easy Digital Downloads  and iThemes offered a discount on their extensions to help users start an online store
  • CodeGuard and MainWP gave users free tools to help manage their sites and keep them safe and up to date.

WordPress and Enterprise Level Solutions

It’s already been better discussed elsewhere, but the latest security release of WordPress (v4.0.1) exposed a fatal flaw in how some developers improperly created their own shortcodes, eschewing the Shortcode API that has existed since v2.5, making it a nearly seven year old issue.

The discussions on whether this update should have happened, what it means for automatic updates and the ill will that can be created when “WordPress is broken” have been had already, causing those of us who’ve had to explain to people in the past the difference between WordPress core and community made plugins and themes work overtime in the past week. Last night I got into a discussion over Twitter concerning the issue and how it relates to WordPress being viewed as an enterprise level solution for website development.

The discussion that I had was concerning a web property owned by a multi-billion dollar corporation. My gut reaction to say that they should know better has to be tempered with the fact that no, they should not have to. It’s the job of every site owner to vet their system, but to make a platform that is truly global, that vetting should be delegated. Web hosts and security analysts should vet code for collisions and bugs. Theme and plugin shops should ensure that their products adhere to best practices. Putting accountability for the full stack on each site owner is not only inefficient, but impractical. Inherent trust should exist that code in the official repository maintains a baseline level of code, trust that is eroded when the problems that occurred with a subset of sites on this update occur.

I’m not one for intrinsically weakened systems. I don’t think, for instance, that the ability to toggle off a security improvement like this should be readily available. That said, it is to the developer who understands the system, as it is to write them in a system-approved manner in the first place. What I do think needs to happen is a better system of education, both for clients and for developers new to WordPress (or new to specific tools in it). There needs to be more public discussion on why progress will invariably cause a bit of trouble upon adoption and how to react or future-proof. There needs to be discussion on how that trouble can lead to lack of faith, and a mistrust in the next level of WordPress growth: higher adoption among enterprise clients.

To avoid these discussions invites stagnation of growth, inhibition of progress and a lack of advancement for WordPress and its adherents everywhere.