Saltar al contenido

Renew a business website in five hours

Renew a business website in five hours

Scribbleit, my writing, coding and publishing company, is celebrating its 10th anniversary this year.

Although such a long survival is an achievement in itself (the Bureau of National Statistics tells us that about half of enterprises close in five years), the business environment has changed beyond recognition in that decade.

The economy is about 35% bigger, but even more important are the changes brought by technology. Ten years ago, I was using Office XP on an Evesham Micros computer and backing up an Iomega Zip drive; Today, I write in the cloud (using Office 2013 or Google Drive) on a Mac mini with Windows 7 and do it in Dropbox. I can work from anywhere with Wi-Fi, whether it’s in my backyard with my Chromebook or at a coffee table on the Nexus 7.

The economy is about 35% bigger, but even more important are the changes brought by technology.

The work itself did not change, then, as now, I created words for print, website and video, but the publishing process was revolutionized.

Back then, publishing on a computer meant handing over your life savings to a print shop and selling the resulting brochures to local and not-so-local bookstores in the trunk of your car. It was rightly called a «vanity publication» because it made no financial sense (except in print).

Today, however, I can instantly publish to electronic devices around the world and use on-demand printing services such as Lulu and CreateSpace to bring my brochures to major online bookstores at no initial cost.

Scribbleit site

Scribbleit has become a Nielsen registered publisher with its own range of ISBNs, an aspect of the business that I see will expand tremendously in the future – desktop publishing is growing and changing so fast that formatting, publishing and promoting e-books they become a marketable skill.

When it comes to writing code, the main change has been the abandonment of Flash / ActionScript, but PHP and Python are still important, and the development tools I use have not changed. However, the way I create websites has been transformed, and my recently renovated Scribbleit site is a prime example of this.

In 2003, I was a weird Dreamweaver user. I’m a little embarrassed to present this original design to be mocked by the public, but I was a beginner in graphics and Dreamweaver didn’t help me.


As my knowledge of PHP deepened, I started coding sites right away, and while it wasn’t hard enough to do in Notepad, I learned CSS on my own without the luxury of a wysiwyg editor. The resulting sites were thin and efficient, but terribly difficult to update without using an IDE.

Today, I use WordPress for all my site development, either for myself or for clients, which easily limits the type of summaries I can accept; I was recently forced to decline an invitation to create a £ 400 Facebook / eBay hybrid, but this is an exception.

I still haven’t come across any project that I really wish WordPress couldn’t do if it was generously customized by PHP.

In fact, was the first site I converted to WordPress and I found that when combined with Thesis framework , produces a sophisticated and attractive site in a fraction of the time it takes to create a PHP site. right from the start.


That was in 2008 and, to my shame, I left the Scribbleit look unchanged until recently. I originally set it up as a technology blog, but today I prefer to use Google+ for this purpose, and in any case, I wanted to start emphasizing the editorial aspect of the business, rather than discussing Apple.

So, having a few days off between projects, I decided to try to create a replacement site, to start finishing, at that point.

Refresh a business website in five hours

Flying in the ointment was the fact that Thesis underwent a complete transformation between version 1.8.x and version 2, which made all my experience gained redundant.

Moreover, I found the new version unusable, so I decided to do an experiment to see exactly how fast I could build a site from scratch using only WordPress and an alternative to Thesis. The answer? In fact, very quickly.

In the beginning: Genesis

The thesis, before version 2, was the best framework I came across, but it was never the only option. His main rival is Genesis , which, although lacking the refinement of the Thesis, is easier to handle.

It costs 59 USD (38 GBP) and can be used on any number of sites. I decided to base my design on one of about 50 official themes and edit it according to my needs – I chose a skin called Balance, which costs 19 USD (12 GBP), bringing my total expenses to almost exactly 50 GBP.

So far, so good: in fact, the process so far has been faster and simpler than the equivalent using thesis

I bought Genesis by download, extracted the files, then used FileZilla to upload it to WordPress Themee and it acts as «child themes», inheriting most of the FRS code folder. Genesis skins are copied to the same folder as Genesis, while adding additional functionality and design elements.

From the WordPress dashboard, I activated the child theme to access the main controls for Genesis and its child. Then I configured the basic settings in the Genesis submenu on the dashboard.

Genesis adds additional fields to the New Post and New Page sections, mainly related to search engine optimization (SEO), which is a strong point of this framework.

So far, so good: in fact, the process so far has been faster and easier than the equivalent using thesis. However, I had problems customizing the theme.

Thesis provides a neat solution through a CSS class selector called «.custom», which makes it possible to override any CSS settings in Thesis, while ensuring that changes are kept in framework updates.

Genesis does not have this subtlety: the only way to change the look of a child theme is to directly edit the CSS file; although these edits will not be lost when Genesis is updated, they will be when a new version of the child theme replaces my custom CSS file.

WordPress has a built-in editor for editing CSS files, but it’s extremely simple. In the past, I’ve used full IDEs that support remote file access (the latest Komodo Edit), but since I’m adapting an old look, I wanted to see if there’s an easier way.

It existed, due to the extensibility of WordPress, in the form of excellent Synchi plugin , which integrates an IDE into the WordPress CSS editor.

CSS selectors

The easiest way to identify which CSS selectors to change to get a certain effect is to install the Web Developer extension for Firefox (the Chrome version doesn’t have the same depth of functionality).

Visit your site in Firefox and select CSS | Show style information in the toolbar – This allows you to click on any element in the layout and see what CSS rules affect it, what files are contained in it (usually style.css) and even their line numbers.