Redesigning and Learning

It’s been a bit quiet here the past few weeks, but as you might have noticed, this blog has a fresh, new look to it! About a month-and-a-half ago, I set out to rebuild the WordPress theme for my blog from scratch, and I have busy finishing it up these past for weeks. I built the original theme over a year ago, and have learned a ton since then about front-end development, design and getting the most out of WordPress. For a while, I had been bugged by the many mistakes I made in creating the theme, so I decided to do something about it.

Before going any further, I thought I’d address the question of “Why WordPress?” I know Jekyll and other static site solutions are all the rage among developers. I had contemplated the idea for a while, but ultimately decided to stick with WordPress for several reasons: 1) My existing content was already in WordPress. In addition to creating the new site and learning the tooling around static site generation, I would have to port all of my content to the new system, and I didn’t want this to turn into a project that would take up a lot of time, and 2), I saw this as a golden opportunity to level up my WordPress theme development skills. I had been accidentally learning many advanced WordPress concepts at work. This was my chance to apply what I learned to do some pretty cool things.

Armed with my new-found advanced knowledge of WordPress, and my idea book, I got to work at planning out my new theme. Actually, this planning stage took place earlier in the fall, I just didn’t actually have a chance to start building until after the holidays. Back then, I had planned out the basic structure of the site, and drew wireframes for each template in that structure. You can see an example of one of the pages from my idea book below:

Wireframes depicting the layout and site structure for my new blog template
Wireframes for the mobile home template and mobie menu on the left, and the site map on the right.

The overall structure of the site looks like this:

  • Home – the blog post index, linking to single posts
  • Projects – an index of personal and volunteer projects, with links to more detailed information about each project
  • Skills – an index of all skills I have learned/posted about in blog posts, projects, and work experience. Each skill in the index would link to an archive page containing all posts/projects/work experience that matched that skill.
  • Jobs – an index of professional work experience, with links to more detailed information about each job.
  • Contact – a contact form to send an email.

The site would also have searching functionality, and links to my various social media accounts.

From a design standpoint, I went with a mobile-first approach. I created all of the mobile templates, and then played around with expanding the design to fit larger screens later. This also has the added benefit of making the CSS a little bit easier to organize: mobile is the default, and then you just @media (min-width: ...) for other breakpoints as you need them.

Each page has the same basic design:

  • Masthead, nav, social and search at the top of each page (on mobile, the latter three condense into slide-out menu accessed by a hamburger)
  • A “hero” image overlaid with either a featured post on index templates, or post meta data on single templates
  • The index or single post content.
  • The footer with copyright info.

The one section whose design is a little different is the skills list. For this template, I wanted a grid of all the skills, represented by a large icon. This template was the most fun and challenging part of building the theme, and I’ll get into the details in a bit.

Once my planning was complete, I was ready to start building. I got a new project set up in my IDE (I’ve become a fan of PHPStorm, with Vim mode turn on, of course), spent probably too long getting my dev environment set up, and got Gulp set up with SASS pre-processing and BrowserSync.

I decided to encapsulate all of the logic of the theme into an instance of a singleton class. I like this because it keeps everything nice and organized, and also keeps me from having to namespace all of the functions by prefixing them. I defined a Bobderrico class in a separate file, which I include and instantiate in my functions.php file. The class contains a variety of methods, many of which are called by filters and action hooks. I also have theme defaults stored as a properties, which are set in the constructor. The constructor also calls the register_hooks()method, which adds all of the actions and filters.

In the Bobderrico class, I define the custom post types for Projects and Jobs. I also needed some custom metadata for my new post types. The Projects post type needs a production URL and a GitHub or BitBucket URL. The Jobs post needs company, start date, end date, and location. These are also defined in methods called by the add_meta_box and save_post filters for displaying on the post edit form and saving in the database.

I also created a Bobderrico_Skills class, containing all of the logic related to the Skills custom taxonomy. I broke it into it’s own class, because there were a lot more method involved in dealing with skills than with other areas. The custom taxonomy is registered here, as well as a meta box for posts containing checkboxes for selecting skills (similar to the category checkbox). There is also a method for rendering the skills icons.

As mentioned before, the skills icons are one of my favorite parts of this theme. I am using the font technology-icons for the skills. In the description for each skill, I include the CSS classname for the icon. The render_skills_icon() method inserts the description as the class attribute for the icon, displaying the correct character. The technology-icons font had most of the icons I needed, but I did need to add a few. This involved a crash-course in SVG and font-editing with FontForge, and I was able to successfully add a few icons I was missing. Being it an open source project, I will be submitting a PR for the new icons so others can also benefit.

There were many other lessons learned here, including working with pre_get_posts to alter the query, new ways to organize my SASS files, finally getting around to using flexboxes, and working with WordPress images, but these will have to wait for another post.

So, now that you know the ins-and-outs of this theme, browse around, and let me know what you think in the comments.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Leave a Reply

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