I am pub­lish­ing my first Word­Press theme, Fif­teen Twenty. Born out of frus­tra­tion at the Word­Press theme struc­ture when attempt­ing to update the theme of this blog it demon­strates an altern­at­ive. This theme is designed as a tech­nical demon­stra­tion of struc­tur­ing a Word­Press theme with a single core lay­out file. As this is an inver­sion of the stand­ard struc­ture of the default theme Twenty Fif­teen I have dubbed it Fif­teen Twenty. The appear­ance, styl­ing and gen­er­ated html is the same as the original.

Word­Press is an open source blog­ging plat­form, it is the most pop­u­lar blog­ging plat­form with over 60 mil­lion web­sites using it. To enable all of these web­sites Word­Press has a theme sys­tem which allows the user to rad­ic­ally change the appear­ance of their blog with just a few clicks. Most of these themes are con­trib­uted by users but the Word­Press team does release a theme every year, this is the default theme and acts as a best prac­tices tem­plate for theme design­ers. The default themes are named after the year, the cur­rent one is Twenty Fifteen.

Word­Press themes con­sist of a col­lec­tion of php tem­plate files. Word­Press chooses a tem­plate based on the type of con­tent being reques­ted, this allows a dif­fer­ent tem­plate to be used for search res­ults or an audio attach­ment. The decision is made using the tem­plate hier­archy depic­ted below. Word­Press pro­ceeds from left to right until it finds a file which matches the desired pat­tern, on the far right index.php acts as a catch all for any file types not spe­cially handled.

The advant­age of this struc­ture is that it allows for a huge degree of flex­ib­il­ity in the styl­ing. Any con­tent can have a com­plete dif­fer­ent set of styl­ing provided to it and the hier­archy allows for very spe­cific spe­ci­al­ity pages to be created.

The dis­ad­vant­age is that every tem­plate requires a duplic­a­tion of the site struc­ture. Changes such as reorder­ing the HTML struc­ture require the rework­ing of every single tem­plate file, this was exactly the prob­lem I faced when work­ing on this blog’s tem­plate Piano Black.

In prac­tice I feel the theme hier­archy struc­ture is a poor design choice as you want to retain the same look a feel across the entire site. This means that the lay­out is con­sist­ent and the vari­ations are typ­ic­ally isol­ated to the cent­ral con­tent pane. Theme authors attempt to reduce the amount of duplic­a­tion by using a header and footer file which is pulled into each tem­plate, this helps to reduce work for minor changes but makes struc­tural alter­a­tions even harder.

The altern­at­ive tech­nique is to have a single tem­plate file which sets the struc­ture of the web­site. This file then pulls in par­tial tem­plates based on the con­tent being reques­ted. The par­tial tem­plates provide a reduced level of flex­ib­il­ity com­pared to the full tem­plate model but are sim­pler as they do not need to include as much of the site’s struc­ture. The Twenty Fif­teen theme actu­ally uses both full and par­tial tem­plates, the par­tial tem­plates are used within the full tem­plates to cus­tom­ise dif­fer­ent cat­egor­ies of posts.

I do not mean this as an attack or cri­ti­cism of the Word­Press team, the choice was a trade off and they chose the more flex­ible approach lead­ing to a product far more suc­cess­ful than any I have ever pro­duced. This choice was also made for the ini­tial release in 2003, a dif­fer­ent online envir­on­ment with altern­at­ive aes­thetic (MySpace) and less use of javas­cript. They have made a fant­astic product and the flex­ib­il­ity built through it allows for novel uses, like mine.

By remov­ing all the cus­tom tem­plate files Word­Press will always use index.php as a tem­plate. As the tem­plate is a full php file it can exam­ine the reques­ted con­tent type and pull in the required par­tial tem­plate. This tech­nique uses the Word­Press par­tial include func­tion which enables sub-themes to cus­tom­ise spe­cific partials.

To demon­strate this lay­out tech­nique I chose to rework the Twenty Fif­teen theme as it is designed as a basis for theme authors to work from, which is also my goal. I took each of the tem­plate files and pushed the com­mon ele­ments up to index.php con­vert­ing them into a par­tial. The files designed to reduce duplic­a­tion such as header.php, footer.php and sidebar.php were also pushed into index.php. I then set up a demo site using the wptest​.io test data and used wget –mir­ror, HTML tidy, a tiny bit of sed and diff to beat the last bugs out and ensure that the final res­ult was unchanged from the ini­tial Twenty Fif­teen design.

In the future I’ll be releas­ing my updated ver­sion of Piano Black, this blog’s theme, with mobile sup­port (respons­ive lay­out) and other mod­ern­ising updates under the hood. I may also make an Angu­larJS powered demon­stra­tion ver­sion of Fif­teen Twenty for fun.