I am pub­lish­ing my first Word­Press theme, Fif­teen Twen­ty. 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 alter­na­tive. This theme is designed as a tech­ni­cal demon­stra­tion of struc­tur­ing a Word­Press theme with a sin­gle core lay­out file. As this is an inver­sion of the stan­dard struc­ture of the default theme Twen­ty Fif­teen I have dubbed it Fif­teen Twen­ty. The appear­ance, styling and gen­er­at­ed html is the same as the orig­i­nal.

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­i­cal­ly change the appear­ance of their blog with just a few clicks. Most of these themes are con­tributed 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 Twen­ty Fif­teen.

Word­Press themes con­sist of a col­lec­tion of php tem­plate files. Word­Press choos­es a tem­plate based on the type of con­tent being request­ed, this allows a dif­fer­ent tem­plate to be used for search results or an audio attach­ment. The deci­sion is made using the tem­plate hier­ar­chy depict­ed below. Word­Press pro­ceeds from left to right until it finds a file which match­es the desired pat­tern, on the far right index.php acts as a catch all for any file types not spe­cial­ly han­dled.

The advan­tage of this struc­ture is that it allows for a huge degree of flex­i­bil­i­ty in the styling. Any con­tent can have a com­plete dif­fer­ent set of styling pro­vid­ed to it and the hier­ar­chy allows for very spe­cif­ic spe­cial­i­ty pages to be cre­at­ed.

The dis­ad­van­tage is that every tem­plate requires a dupli­ca­tion of the site struc­ture. Changes such as reorder­ing the HTML struc­ture require the rework­ing of every sin­gle tem­plate file, this was exact­ly the prob­lem I faced when work­ing on this blog’s tem­plate Piano Black.

In prac­tice I feel the theme hier­ar­chy 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­sis­tent and the vari­a­tions are typ­i­cal­ly iso­lat­ed to the cen­tral con­tent pane. Theme authors attempt to reduce the amount of dupli­ca­tion by using a head­er and foot­er file which is pulled into each tem­plate, this helps to reduce work for minor changes but makes struc­tur­al alter­ations even hard­er.

The alter­na­tive tech­nique is to have a sin­gle 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 request­ed. The par­tial tem­plates pro­vide a reduced lev­el of flex­i­bil­i­ty com­pared to the full tem­plate mod­el but are sim­pler as they do not need to include as much of the site’s struc­ture. The Twen­ty Fif­teen theme actu­al­ly uses both full and par­tial tem­plates, the par­tial tem­plates are used with­in the full tem­plates to cus­tomise dif­fer­ent cat­e­gories of posts.

I do not mean this as an attack or crit­i­cism of the Word­Press team, the choice was a trade off and they chose the more flex­i­ble approach lead­ing to a prod­uct 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 envi­ron­ment with alter­na­tive aes­thet­ic (MySpace) and less use of javascript. They have made a fan­tas­tic prod­uct and the flex­i­bil­i­ty built through it allows for nov­el 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 request­ed 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­tomise spe­cif­ic par­tials.

To demon­strate this lay­out tech­nique I chose to rework the Twen­ty 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 dupli­ca­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 result was unchanged from the ini­tial Twen­ty Fif­teen design.

In the future I’ll be releas­ing my updat­ed ver­sion of Piano Black, this blog’s theme, with mobile sup­port (respon­sive lay­out) and oth­er mod­ernising updates under the hood. I may also make an Angu­lar­JS pow­ered demon­stra­tion ver­sion of Fif­teen Twen­ty for fun.