Hacktober 2016: Best WordPress Theme in the world

My hacktober project will be a WordPress Theme that is very extensible and contains clean code. Instead of multiple project I concentrate on one new and the first steps look very good! This will become the greatest theme of all time. Read the more up to date and famous one afterwards!
WordPress 4.7: Custom bulk actions, Theme inheritance and more
Open in new tab for later

Well at least I hope for that but it already feels like a shiny new theme. I hope some theme developer read this and leave me some hints in the comments below.

WordPress Theme to the rescue

It took a long time to decide what my project for October would be. There is a buzzword “Hacktober” coming up, so I wanted to do lots of things at once. Every week something different and great. But then I had a better idea.

Instead of starting off multiple things and never finish them, I want to start one thing and make it right. This feels very good because I want to deliver quality instead of quantity just for SEO and buzzword reasons. Besides that I do not want to overwork myself. As a backend developer I might learn some things about theming.

Keep it stupid simple

But where do I start? First of all I heard about the underscore theme which is good to start from scratch. It is mostly made by Automattic and comes with everything a fresh WordPress Theme needs. I took that for the beginning and after a few seconds it felt like the right decision. There are code lines you can uncomment and the theme has totally different style and features (as in “_site.scss”):

// @import "../layout/content-sidebar";
// @import "../layout/sidebar-content";

That is what I want. This is simple and a very neat way for rapid prototyping the customers theme. But I also know that I am not good ad theming so I needed to find some helper package.

For a long time now I am familiar with the classes of Bootstrap 3 which are almost the same in Bootstrap 4 (not yet released). Combining the underscores Theme with Bootstrap is easy, if you just take the mixins and place them at the right places of the underscores theme. The following example will show what I mean.

_s and Bootstrap 4 – now kiss

It feels weird, that Bootstrap 4 is not done yet but already part of the theme. Well, adding only the mixins is working so far and what else do you need than a grid system. So I took the existing layouts and enhanced them with the Bootstrap 4 grid system:

.content-area {
  @extend .col-lg-3-4;
  @extend .col-xs-4-4;

.site-content .widget-area {
  @extend .col-lg-1-4;
  @extend .col-xs-4-4;

This is responsive and has a appropriate width at once. Just a few lines and a few minutes into the project and the theme looks good (for a nerdy developer).

WordPress Theme with _s and Bootstrap 4
WordPress Theme with _s and Bootstrap 4 already looks good after a few minutes of work.

The content has 3/4 (class col-lg-3-4) of the full width and the sidebar only 1/4 (class col-lg-1-4) of it. In smaller views both will have 100% (class col-xs-4-4) and the sidebar moves below the content. It is the usual .col-lg-3.col-xs-4 etc. as known from Bootstrap 4 but I added some magic.

Multiple grids at once

There is a mixin that allows multiple grids at once. Usually you are stuck to one kind of grid like 12 columns but with a simple hack you are able to have as many grids as you like:

//@include add-grid(2); // adds .col-**-#-2
//@include add-grid(3); // adds .col-**-#-3
@include add-grid(4); // adds .col-**-#-4
//@include add-grid(5); // adds .col-**-#-5
//@include add-grid(6); // adds .col-**-#-6
//@include add-grid(7); // adds .col-**-#-7

And so on. The add-grid mixin is a copy of the make-grid mixin delivered by Bootstrap 4 with the total column number as a suffix. In this way you can have multiple grids at once and can even combine them:

<div class="col-lg-1-2"></div>
<div class="col-lg-1-3"></div>
<div class="col-lg-1-6"></div>

As long as they sum up to 100% full width. This is not the only goodie I bring you. Imagine your customer can decide how the header should look like via TinyMCE or Page Builder – that would be great.

Build header and footer with your favorite editor

Manage the header and footer for each template.
Manage the header and footer for each template.

It will be possible to manage the header and footer for each template via backend. This can be done via TinyMCE, the Editor, Page Builder (as shown here) or some other favorite tool of yours. So from now on you just need to add a template, if the customer wants their own design for some pages. This is very helpful for landing pages.

bildschirmfoto-2016-10-02-um-11-23-12WordPress enhances this even further with the publish date. A header for christmas, new year, easter or other occasions can be automatically applied by using the publish date. The theme will consider such settings as well as the visibility and status.

Next up for the upcoming week

If you like this project then follow me on Twitter (@ScreamingDev), where I update things that I implemented into the theme. Next up will be some testing, because I like it to be a high quality and well coded theme at first sight. Good themes help more than some beauty but dirty coded ones is my experience.

Wish me luck that everything works as planned. There are more features in my mind that you can read about next week in this blog.

If you have any suggestions or wishes then please leave a comment below.

Leave a Reply

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