Zen Web Themes 2016 Summary

Date: 2016

Type: ,

Client: Zen Web Themes

Summary:

A wrap-up of the development of Zen Web Themes throughout 2016. The themes I created, what I learned with each one, and what might happen in 2017.




If you’ve been following my work this year, you know that I focused heavily on Zen Web Themes. In October of 2015 I decided that I wanted to learn how to create my own WordPress themes, possibly to sell, but certainly to learn more about how they work. November and December that year I devoted a ton of time to taking classes at Treehouse (here’s my profile) and learned enough to get started.

My goal for 2016 was to design, develop, and release an average of one theme per month, for a total of 12. I released the 12th theme earlier this week, meeting that goal.

This post will give you a summary of what I did with Zen Web Themes in 2016, including what I learned while developing each of the themes and the website that sells them. I’ll try to keep each item brief because this is a lot of stuff. I haven’t had many days off this year.

ZenWebThemes.com

Let’s start with Zen Web Themes itself, the ecommerce website that offers the themes for purchase and download.

Its Theme

ZenWebThemes.com is also on WordPress, so it needs its own theme, of course. It’s a very custom theme that I built from scratch for exactly what I wanted to do with it. I started by designing mockups in Adobe Illustrator for the homepage and the product pages, and then did my best to translate those into WordPress. I evolved everything over the year, but the general design is still the same as my original mockups.

It uses Bootstrap for the navigation menu and FontAwesome for all of the icons throughout the site.

This was my mockup for the homepage (with placeholders for icons and screenshots):

 

And this is what the homepage looks like today:

 

WooCommerce and Product Pages

The ecommerce functionality is from WooCommerce, but I built my own product pages and completely skipped the WooCommerce product pages. So the product items are built with WooCommerce, and the website uses the WooCommerce shopping cart, but that’s all you see of it.

I used Advanced Custom Fields to create my own custom page for the product pages. I created a lot of custom fields for things like the large product image, links to the theme demonstration, the feature description boxes, etc.

Here’s a screenshot of what a product page looks like today:

All of that was coded to place each of the custom fields in their proper place and style them.

There’s also the Shop Themes page, where you can browse all of the available themes. That was created by using the WordPress loop to spit out these specific pages based on their parent page ID.

It automatically pulls in the featured image, title, subtitle, short description, and links to the product page. Right now it displays them based on the date they were posted, but I could arrange them in any specific order.

Documentation

Each theme has a page of documentation. Like the Shop Themes page, there’s a Documentation index. It also uses the WP Loop to display links to all of the pages underneath that parent page. These are in alphabetical order.

The documentation pages themselves, such as this one for the Magazazz theme, give users a detailed walk-through on how to set up their theme. Sometimes screenshots are included if I thought they would be necessary to help people understand the instructions. The Table of Contents at the top is generated with the Table of Contents Plus plugin.

(If you’re interested in technical writing work, you could use this documentation as an example of my instructional writing.)

Blog

Zen Web Themes has a blog, of course. I am attempting to post in-depth articles that are useful to semi-technical website owners—folks who can create their own websites in WordPress but might not be technical enough to do much beyond that. That is, in general, my target audience as a seller of themes.

These are the posts that I think hit that mark:

The Real Difference Between Hiring a Web Developer and Buying a WordPress Theme

Beginner’s Guide to Building a WordPress Website from Scratch

101 Ways to Take Your WordPress Website to the Next Level

And then there’s How To Create a Grid Layout in WordPress with Flexbox. It’s more technical than the other posts because it requires that you manipulate the WordPress loop and write your own CSS. It’s been a hit, though. It gets a lot more views than anything else, and it ranks on page 1 of Google for terms like “wordpress flexbox.”

Theme Demos and WordPress Multisite

For every theme that I develop, I also build an entire website with that theme. This is for a few reasons:

  1. It allows me to test the theme on a live production site
  2. Once the website is online, I can test it on my iPhone and iPad
  3. It provides a live demonstration for people to look at when evaluating whether they want to buy the theme
  4. I can use the demo to take screenshots of the theme for the product page

ZenWebThemes.com runs on WordPress Multisite. That’s a special installation of WordPress that allows you to create multiple websites either on subdomains or in subdirectories of your main website. I set it up so that each theme demo would be in a subdirectory. For example, https://www.zenwebthemes.com/super-minimal-demo/

WordPress Multisite is a little unwieldy. After working with it pretty intensely for a year, I wouldn’t really recommend it. It creates an internal problem where pages will time out and show a 404 for no earthly reason. It’s not even an actual timeout because not enough time passes for anything to timeout … page loads just conk out and display a 404 even though the page does exist. Occasionally it will result in a page or post not publishing or saving, but mostly it just happens when navigating the back-end of WordPress. I’ve Googled around to find a solution but nothing has fixed it.

Goodies

I want to provide some free downloadable things that I’m calling Goodies. These are free digital assets that help you build or run your website in some way.

So far, I’ve created a pack of social media templates for Photoshop and a pack of website background patterns. People are invited to submit their own goodies and get a link back to their website. I have more ideas for goodies that I’ll create myself, but that’s just a matter of time and inspiration.

Premium and Free Versions – An Idea for Backlinks

As you know, I try to be transparent about what I’m doing, so I’ll tell you about something that failed.

One of my original plans was to offer two versions of every theme: Premium and Free. The free version would be a fully functional theme, but with fewer features than the premium version. I would offer free themes in exchange for an email subscription.

The idea was that this would do two things for me:

  1. I would build an email list of people with a demonstrated interested in WordPress themes
  2. I might get a lot of backlinks because every theme has a link back to zenwebthemes.com in the footer (something like “Web design by ZenWebThemes.com”)

Well, that didn’t work out at all because:

  1. The people who are interested in free themes never converted to paying customers
  2. The backlinks never showed up, which tells me that the people downloading the themes removed the link from the footer

Interestingly, though, the website is getting backlinks, but they’re coming from people who bought the premium versions of the themes. For some reason, they are more willing to leave that link in the footer, either because they don’t know how to remove it, or they consciously decided to leave it there.

Once I realized that this whole plan wasn’t working, I stopped the email marketing, but I can tell you that I was using MailPoet, which worked well and integrated with WooCommerce. I also created some exit-intent pop-ups with Optin Monster. Those worked pretty well, but I took them down because I don’t currently have anything to offer in exchange for signups. (Next year I’ll focus more on marketing, so I’ll probably bring those back soon.)

Creative Market

I have a shop on Creative Market where all of the themes are available for sale.

Creative Market is like Etsy, but for digital goods. They sell things like fonts, graphic templates, Photoshop brushes, and lots of different templates. It seems like their audience is mostly women because their popular products are often girly in some way. But I’ve gotten more sales there than on my own website, so it seems worthwhile. I have to create additional screenshots that fit their recommended dimensions and write an additional description for each theme. They take a reasonable cut of each sale. I’ll probably write a more detailed review of my experience with Creative Market at some point.

 

The Themes

In this section we’ll take a look at each of the 12 themes that I built and what was significant about each one. Most were a learning process in one way or another. I’ve already written up full portfolio items about the ones that were the most interesting, but here we’ll just go over them briefly.

I made all of these “desk scenes” with a fun product that I found on Creative Market called Mockup Scene Creator. Best $35 I ever spent. It’s a Photoshop file with a bazillion layers, each with real photos of different objects. You can customize the desk itself, the wall, and choose from a ton of different screens and frames to create product mockups of whatever it is you’re selling. In my scenes I stuck with similar objects each time, but there are many more available.

 

Do Good Theme

Do Good 501(c)

Product Page, Theme Demo

What was the purpose or inspiration for this theme?

My dad has worked with non-profits for many years, so I’ve heard a lot about their particular needs and challenges. Non-profit organizations usually don’t have the budget to hire a web developer, so they’re a perfect market for WordPress themes.

What were the challenges in the development of this theme?

This was the first theme that I made. I actually redid the entire thing because the first version had a terrible design. The second version was much better and has been pretty popular. But overall, everything was a challenge because I had to figure everything out. I figured out how to make Bootstrap work with WordPress menus, how to create custom widgets and widget placement areas, how to make WordPress display the most recent blog posts on the homepage in a specific way, how to let people choose their own colors and fonts, how to get the large background image to work with the text and box over it, and everything else.

What is one special thing about this theme?

Because this theme was the first one, it took the most courage to design it, build it, and release it to the public. I was pretty deathly afraid that I’d suddenly be swarmed with experienced developers who would laugh at my code.

 

Strunk & White

Product Page, Theme Demo

What was the purpose or inspiration for this theme?

I’ve worked with authors and publishers, both directly and indirectly, for many years, so I wanted to create a simple theme for writers.

What were the challenges in the development of this theme?

This is a pretty minimal theme except for the large photo on the homepage. It’s actually a background photo, and as you scroll down, the rest of the page slides up over it. It was tricky to get that to work properly. Even after I thought I had it working, it needed more development to make it work on the iPad.

What is one special thing about this theme?

After I learned more from other themes, I came back and added more features to this one. It has a custom “About Us” widget for your sidebar, which is perfect for authors. It also has a special “end of posts” widget area that lets you automatically add content to the end of every blog post. That’s a nice solution for authors who want to promote a book at the end of each blog post.

 

Color Block WordPress Theme

Color Block

Product Page, Theme Demo

What was the purpose or inspiration for this theme?

The inspiration was something I saw on Pinterest, which seems to be gone now. I think it was an older design for the Burton Snowboards website. It could have been something to do with surfing, though. Similar pins are this one and this one. Basically, a back-and-forth blocky layout.

What were the challenges in the development of this theme?

The main development challenge was to get each “block” on the homepage to line up exactly and to behave nicely at any screen size. A lot of work went into the responsiveness of the layout, especially the headline at the top of the page.

The second challenge was in explaining it to users. I don’t think anyone really understands the potential of this theme. I believe I did a good job of explaining the homepage layout with information like this, but I just have a feeling that it’s all lost on people.

What is one special thing about this theme?

It has a special design and use for the “featured images” that you can set in WordPress. They’re shown as large images at the top of your post or page. Here’s an example of a page, and an example of a post. You can set another big image at the top of your archives pages.

 

You're Hired Resume WordPress Theme

You’re Hired

Product Page, Theme Demo

What was the purpose or inspiration for this theme?

I wanted to make a theme that people could use to create their own online resume in WordPress.

What were the challenges in the development of this theme?

This theme was different because it relies on a ton of custom widgets. I made custom widgets for all of the elements of the resume, like the job experience and education sections. The cool thing is that since they’re widgets, you can add as many as you need to each section. The biggest challenge was in designing the resume itself. I’m still not completely happy with it, and I have another half-done design in the works for it, which will end up being version 2.0 at some point.

What is one special thing about this theme?

The responsiveness of this theme works a little differently than the others because it’s not set up in a content vs sidebar layout.

For example, watch what happens to the skills list as you shrink the page:

That was tricky to get working the way I wanted it to.

 

Zen Life WordPress Theme

Zen Life

Product Page, Theme Demo

What was the purpose or inspiration for this theme?

I wanted to make a sort of “flagship” theme. It needed to be called “Zen” and also be zen, in that it would be a simple theme, but also versatile.

What were the challenges in the development of this theme?

I don’t remember there being any major problems or hurdles. A lot of the work was in creating custom widgets. You can see what those are here. I like the design and result of this theme, in general. It’s an all-purpose blog theme that could be used for a lot of different purposes.

What is one special thing about this theme?

This is a pretty normal theme in that it offers what most themes of this type do, so there isn’t anything super special that stands out. But, a lot of care and attention went into it so that it feels minimal but detailed at the same time. I would use it for my own website if I had one dedicated to blogging.

 

Manly Recipes Theme

Manly Recipes

Product Page, Theme Demo

What was the purpose or inspiration for this theme?

I noticed that most recipe websites look really girly, as if they’re all targeted to women. But I know that men cook too, and there’s a need for masculine-style recipe websites for, say, body builders or low-carb guys.

What were the challenges in the development of this theme?

This is the first theme that I created a custom post type for. The recipe posts give you special fields for your recipe directions and ingredients. It relies on Advanced Custom Fields being installed, but the user doesn’t have to do any configuration with it, just install and activate, so I think that’s reasonable. I also went pretty heavy with Bootstrap by integrating the Bootstrap carousel into the WordPress customizer so that people can set their own slides with headlines, buttons, and links.

What is one special thing about this theme?

It has a double menu for navigation. The menu links above and below the horizontal line are actually completely separate menus. This allows you more room to organize your recipes with categories and tags.

 

Extremely Minimal Theme

Extremely Minimal

Product Page, Theme Demo

What was the purpose or inspiration for this theme?

I wanted to make one of the most minimal themes available.

What were the challenges in the development of this theme?

The goal was to make everything as minimal as possible while still allowing the user some customization options. The theme is very, very simple, but you can still add some custom content on the top and bottom of the homepage, and you can choose your own fonts and colors.

What is one special thing about this theme?

It’s probably the most minimal theme you’ve ever seen! It’s also very lightweight and won’t slow down your website AT ALL.

 

Sell Your Thing WordPress Theme

Sell Your Thing

Product Page, Theme Demo

What was the purpose or inspiration for this theme?

I do writing work for PersonalityPerfect.com. The owner there released a new app recently, and he built this landing page for it. The rest of that website is on WordPress, but that particular landing page was a template he bought specifically for it. I liked the concept of it, and decided to make a WordPress theme that would help people sell digital products like apps or ebooks.

What were the challenges in the development of this theme?

Much of the development of this theme was wrapped up in the WordPress customizer. The majority of the options you can choose are entries in the main customizer at Appearance > Customize in WordPress. That involved creating a ton of fields for user input, and then displaying that input at specific places on the homepage. This page shows you more about how it works.

What is one special thing about this theme?

I think this is a fairly unique concept for a WordPress theme, at least as far as I’ve seen. You can use it as a one-page website, as a landing page, or include a link to a blog in your header menu to make it feel more like a regular website.

 

Magazazz Magazine Theme

Magazazz

Product Page, Theme Demo

What was the purpose or inspiration for this theme?

I wanted to create a magazine-style theme for companies that have multiple authors contributing to a website. I was sort of inspired by sites like Thought Catalog, but mainly developed my own design and layouts.

What were the challenges in the development of this theme?

This theme is quite different than the others that I’ve developed and there were a couple unique challenges. First, it needed to support author pages for all of your contributors. I researched and found out what code was required to include in the theme for that. It also supports displaying Gravatars for each author. Second, I wanted the homepage and archives pages to show posts in a nice grid layout. (That’s what I developed the flexbox grid layout for.)

What is one special thing about this theme?

I really like how individual blog posts handle the featured image and the headline. The image is displayed at the top of the page, and the headline is layered on top of it in a box. See an example here. That was tricky to get working correctly, and in all browsers and devices, and I don’t even remember how I did it now without looking at the code again.

Also, I really love the hover effect that you get when you mouse over the grid. I used the transform effects that are available with CSS3, and it makes each post look like an individual card.

 

Portfolio Prism WordPress Theme

Portfolio Prism

Product Page, Theme Demo

What was the purpose or inspiration for this theme?

I needed to re-design this website, zenwebconsultant.com, and I couldn’t very well buy a theme from elsewhere since I was trying to make myself into a theme developer. So I figured I’d make myself a portfolio theme that I could also offer for sale.

What were the challenges in the development of this theme?

With this theme, I said to myself, “Let’s build a theme that has what we need in a portfolio theme. Maybe other people will like it, maybe not.” So I created the features that I wanted to use personally, figuring that they’d probably be useful to other people, too. It again uses Advanced Custom Fields for the special portfolio posts, and flexbox for the grid layout. I also created a custom page template for the “About Me” page that lets you choose some icons and create three specialties. I wanted to display social media icons both on the About page and in the footer, so I created a way for the user to enter all of their profile links once, and they will be displayed in both places.

What is one special thing about this theme?

I really like the clean design of this theme. The entire thing feels really fresh and crisp.

 

Lightworker WordPress Theme

Lightworker

Product Page, Theme Demo

What was the purpose or inspiration for this theme?

I succumbed to peer pressure, or something like that. There’s one WordPress theme that’s always the top seller on Creative Market, and a few more that are often near the top 10 that have a similar design. I figured I’d make a theme like it to see if it became super popular, too. Spoiler alert: it did not.

What were the challenges in the development of this theme?

There really weren’t any particular challenges in the development of this one, because I pulled bits and pieces from my other themes to build it. It uses the Bootstrap carousel that I created for Manly Recipes, and it uses the custom widgets from Zen Life, as well as a lot of the design features from Zen Life.

What is one special thing about this theme?

Even though it was created as a copycat and is an amalgamation of my other themes, it’s still a very nice all-purpose blogging theme. It has a great carousel on the homepage, if you think your website needs one. It gives you a more feminine look than my other themes, and a lot of attention to detail was put into it.

 

Super Minimal WordPress Theme

Super Minimal

Product Page, Theme Demo

What was the purpose or inspiration for this theme?

My Extremely Minimal theme is quite popular, but it lacks the ability for the user to display their logo in the header. Instead, it displays the “Site Title” from WordPress. So, I decided to make another very minimal theme with a different set of options.

What were the challenges in the development of this theme?

This theme was no challenge at all. I used my good old flexbox grid layout for the homepage and archives, and the rest of it is super minimal, as the name implies.

What is one special thing about this theme?

I built in more support for background images than I did for other themes. Where you see the light gray area in the screenshots, you can choose your own color or display an image.

 

Plans for 2017

In 2017, I will be creating fewer themes but learning more programming. I’m already working on the JavaScript for WordPress course, which is a huge time investment. I’m also using that course as a way to get an in-depth understanding of JavaScript for general purposes because it has become one of the top languages for front-end developers, and I’m trying to steer my career more in that direction.

Second, now that I have a nice set of products to sell, I’m going to put more effort into marketing them. Earlier this year I tried some Adwords but didn’t have any success with it. I am hesitant to put much money into advertising, but I do want to write some guest blog posts and create more articles for my own blog.

A lot depends on what happens with my regular workload. Sometimes I have free time, and other times I have zero extra time for projects like this. I’m also not certain whether I’ll continue to do freelance/contract work like I have been the past few years. That has its pros and cons, and I feel like I’m running out of patience with it in many ways.

If a project like Zen Web Themes brought me enough income to pay my basic monthly expenses, I would definitely pour all of my effort into it, but it is nowhere near that right now. It’s hard to know where to put the most attention when it’s impossible to know what would bring the best results. At the very least, I’ll continue to update the themes when they need it, provide support for any sales that do come in, and release new versions as I make upgrades.

I hope this gave you an idea of the work that has gone into this project and what I’ve learned from it. If it seems like my experience would be valuable to your organization, please let me know. 🙂



Leave a Reply

Your email address will not be published. Required fields are marked *