As mentioned here, and in the presentation I did for the Learn Teach Code L.A. meetup group, one of my initial goals when learning how to code was to build my own WordPress theme tailored to my liking.
It was going to be unique, awesome, sexy, tasty, inviting, and award-winning!
OK, so maybe it was going to be just awesome. But it was going to be in my vision.
I’m terrible at WordPress themes. And no, I’m not talking about installing them or messing around with the widgets. I’m bad at sticking with one. I window theme shop all the time. “Best wordpress themes (insert year)” is probably one of my most common search terms.
I just can’t stick with one. The longest I’ve gone with one theme has probably been 5 months with the Twenty Seventeen theme, and even then I had installers remorse.
So it definitely dawned on me that I could just build one myself once I got familiar with learning how to code.
After some trial and error and lessons given to me, I have the beginnings of a theme that I believe suits me well.
In this post, I want to explain how it all came together and what I’m going to be working on going forward. With every theme I’ve installed, I’ve always had thoughts of changing it a few minutes, hours or days later. I don’t think that will happen with this theme.
The harsh reality
In an earlier post, I talked about the biggest lesson learned when it comes to coding, that people spend more time reading code with the goal of understanding instead of actually writing code.
That was the case with building a WordPress theme. I asked myself, did I want to go through the task of building a complete theme from scratch, or take a theme that is already available and make as many edits and tweaks as necessary?
I started searching a lot of the themes available, and many of them looked similar to each other — big banner, tiled posts, social icons. It was as if someone saw a great theme and duplicated it but made a slight change, and then two people saw the great theme and the duplicated theme and made their own changes each, and then four people came along and … yeah.
No. I was not going to build a theme from zero. I was going to find a theme that was close to what I wanted but could be edited to get there.
This was a better starting point. Yes, the challenge is greater, and probably more satisfying, starting at zero. But given that my consulting time has increased, I felt the need to lock this sooner.
I imagine I’m not the first to do this, take a theme and strip it down to just the essentials that work for me.
Think about all of the mobile games, love stories and even soft drinks. They’ve all taken a core concept, tweaked it to their liking and run with it. I was doing the same here. As long as I understood the theme and what was going on, I was going to get my ‘specifically tailored’ theme.
What exactly was it going to look like?
The ideal theme base that came to mind was the Write Theme. It was the perfect starting point. It had one column, a great font and was nearly stripped to nothing already.
It, however, had an annoying menu tab and a search tab that I did not want. There also was a footer tab that had basic text not promoting my own product.
If I could get rid of both of those, then I was well on track to the first piece of my personalized theme.
Fortunately, when I attended a coding meetup in Long Beach, a WordPress guru gave me a lesson on how to tweak the theme to my liking.
That’s when I learned one of my biggest lessons since coding.
Ctrl+Shift+I (or Ctrl+Shift+J) is your friend.
I knew about the trick, which lets you see the code on the current page your on if it’s Google Chrome. The group leaders at Learn Teach Code L.A. had showed how to use the command to do some other cool stuff. But it was about seeing each element and the specific code that created the element.
I sort of was doing that previously, going into the source code (Ctrl+U) of the current page, going into the Editor section on WordPress and then playing the match game until things worked the way I wanted. But that method resulted in more code being eliminated than necessary.
By actually pinpointing the elements, it saved time in guessing which code was related to the element, and then I could add or delete — mostly delete — the specific unnecessary code.
The lesson helped me get rid of the menu bar and search function, at least on the main page. I will probably add a better search function for the blog portion of the site.
Next up was to create the content for the front page, and that was easy. With my freelancing starting to gain traction, I needed the front page to reflect my willingness to help people.
In addition to learning how to pinpoint specific elements, I was offered an alernative: Themify. This is a WordPress theme that allows for a ton of customization. Fonts, buffering, headlines, anything could be altered.
I tried Themify for a little bit before believing I would be better off just altering the code on an existing theme.
There is one thing to be aware of when making this decision, any future update to the them will revert the code back to its original form. Any changes I make will all be eliminated, and I’ll have to put the changes back. I was willing to go through with that, no matter how many times it is.
The next steps
My main priority — getting the front page cleaned up with a better theme — is done. There are several things I would like to do next.
— Add an email popup and an email subscriber page. This is now the new priority.
— Tidy up the posts page. It is a little too spread out at the moment, and I would like to shorten the buffer in between posts. This will require finding the specific code that acts as the buffer.
— Change the dated content for each post. I’m not a fan of having dates so prevalent, but now that I know how to pinpoint the element, I will try tweaking things around to see what will look good while keeping the theme clean.
— Tweak how the categories are presented. You can see it at the bottom. It looks really out of place and bland.
— Tweak the previous posts and next posts links. I don’t want to go full Taboola (goodness please no) but I want to alter the code that makes previous posts more inviting. Or, maybe I get rid of it.
— Prepare a page that will become the main product to offer on this site. I’m debating between one of two products to promote now. By autumn, I will be offering early access to my next book. Speaking of which …
— Prepare a page to promote my next book.
— Code a Hello Bar to the top that will be a signup bar and a Hello Bar at the bottom that will have sharing options. (not actually THE Hello Bar, I want to take code from somewhere and design a bar that’s more specific to my liking)