While there is details below, here is a summary of the files one is required to understand as WordPress renders a single static page for each of the themes. Non-standard (WordPress) files are highlighted in red.
| Barebones | Twenty Fifteen | BlankSlate | Sage |
| functions.php header.php style.css Misc. Script/Styles* page.php footer.php |
functions.php header.php style.css Misc. Scripts/Styles* page.php content-page.php footer.php |
functions.php header.php style.css Misc. Scripts /Styles* page.php footer.php |
functions.php 8 custom PHP files base.php templates/head.php Misc. Script/Styles header.php** templates/header.php page.php templates/page-header.php templates/content-page.php templates/content-footer.php |
**note: While header.php is attempted to load, the theme does not provide this file.
Barebones
One solution is to roll one's own theme, e.g., https://github.com/larkintuckerllc/barebones.
This example theme consists of
- functions.php
- style.css
- seven of the eight (skipping comments-popup.php) primary templates
- secondary template front-page.php.
- header.php
- footer.php
To get a sense of the weight of the theme, here are the elements used to render a singular static page:
functions.php
Weighing in at 22 lines, the code is straight out of the WordPress documentation on enqueueing third-party scripts and registering menus. https://github.com/larkintuckerllc/barebones/blob/master/functions.php
header.php
At 6 lines, this is a minimal amount of HTML at the top; in reality one will want to add a minimal amount of additional meta information, e.g., "<!DOCTYPE html>".
https://github.com/larkintuckerllc/barebones/blob/master/header.php
style.css
This is essentially empty (in the example, just put in a sample selector to demonstrate that the file is being used).
Misc. Scripts and Styles
While not necessary, this theme includes the following popular elements as a demonstration as to how to incorporate third-party scripts.
- jQuery (JavaScript)
- Bootstrap (CSS and JavaScript)
page.php
At 9 lines, this simply injects a minimal navigation menu, breadcrumbs, and the page content.
https://github.com/larkintuckerllc/barebones/blob/master/page.php
footer.php
The 3 lines in this file simply pull in the WordPress footer and close out the HTML tags opened up in the header.php file.
https://github.com/larkintuckerllc/barebones/blob/master/footer.php
Twenty Fifteen
Twenty Fifteen is the default theme for WordPress in 2015, https://codex.wordpress.org/Twenty_Fifteen.
This theme represents the polar opposite of Barebones in that it is designed to be used by novices to build out their site. The theme follows the WordPress documented structure of functions.php, styles.php, and standard template files.
Again, to get the sense of the weight, we review the elements used to build a singular static page.
functions.php
At 355 lines, it actually still is a fairly easy to follow implementation mostly consisting of WordPress function calls to setup things like enqueuing JavaScript, setting up menus, etc.
https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentyfifteen/functions.php
header.php
The 50 lines here is a fairly understandable implementation consisting of standard HTML meta information and some WordPress specific elements.
https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentyfifteen/header.php
style.css
Weighing in at 6002 lines, this definitely introduces significant opinionated structure to the theme.
https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentyfifteen/style.css
Misc. Scripts/Styles
In addition to to lengthy style.css, this theme includes:
- Google Fonts (CSS)
- Genericons (CSS)
- ie.css (custom CSS)
- ie7.css (custom CSS)
- skip-link-focus-fix.js (custom JavaScript)
- comment-reply (standard WordPress JavaScript)
- keyboard-image-navigation.js (custom JavaScript)
- functions.js (custom JavaScript)
page.php
This is a small 38 line standard implementation of the template file.
content-page.php
While not one of the WordPress standard template files, this short template file is common in WordPress themes. Presumably, the purpose of this being in a separate file is to avoid having to repeat oneself as one builds out custom page templates.
https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentyfifteen/content-page.php
footer.php
Not much interesting here in the 34 lines.
https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentyfifteen/footer.php
BlankSlate
Like Barebones, this theme, https://github.com/tidythemes/blankslate, is designed to be a light unopinionated theme. The theme follows the WordPress documented structure of functions.php, styles.php, and standard template files.
The elements used to build a singular static page.
functions.php
This is a smallish (66 lines) implementation of standard WordPress function calls to setup menus and such.
https://github.com/tidythemes/blankslate/blob/master/functions.php
header.php
The 24 lines here is a fairly understandable implementation consisting of standard HTML meta information and some WordPress specific elements.
https://github.com/tidythemes/blankslate/blob/master/header.php
style.php
Appears to include a single (long) selector designed as a CSS reset. Presumably would replace with own CSS reset or framework, e.g. Bootstrap.
https://github.com/tidythemes/blankslate/blob/master/style.css
Misc. Scripts/Styles
In addition to to lengthy style.css, this theme includes:
- jQuery (JavaScript)
page.php
Short, 18 line, standard page template.
https://github.com/tidythemes/blankslate/blob/master/page.php
https://github.com/tidythemes/blankslate/blob/master/page.php
footer.php
Short, 11 line, standard footer template.
https://github.com/tidythemes/blankslate/blob/master/footer.phpSage
In the same vein as Barebones and BlankSlate, Sage is designed to be a starting point for building out one's own WordPress template with a minimal opinion on style and structure.
However, it departs from the other three themes as it is very opinionated as to workflow. It seems to be part of a growing trend of software that pieces together a number of workflow tools to form an end-to-end workflow framework.
note: I tend to avoid such workflow frameworks as they tend to add their own layer of complication to what is already a fairly simple activity.
In addition to the opinionated workflow, Sage diverges from the standard WordPress templating strategy with their Theme Wrapper concept: https://roots.io/sage/docs/theme-wrapper/. This effort, in my opinion, is an overly complicated solution to a non-issue, i.e., having to include commands like "get_header()" in the WordPress templates.
For a singular static page, the following is used:
functions.php
This short 30 line file is a loader for 8 other custom php files consisting of some standard WordPress function calls, primarily init.php, and custom PHP functionality (the rest of the files).
base.php
This fairly short non-standard file fills the role of the header.php and footer.php (sort of) in more traditional themes. With a bit of PHP magic, this file wraps the standard WordPress template files; injecting their content into the main tag. The actual HTML is fairly standard and non-opinionated.
https://github.com/roots/sage/blob/master/base.php
templates/head.php
This is a non-standard file that renders the HTML head element; HTML is a short vanilla head.
https://github.com/roots/sage/blob/master/templates/head.php
Misc. Scripts/Styles
Sage uses a configuration file sage/assets/manifest.json with a complex gulpfule.js to prepare the CSS and JavaScript files for injection by the lib/assets.php (called from functions.php) file.
- jQuery
- modernizer
- assets/scripts/main.js (custom JavaScript)
- assets/styles/main.scss (custom CSS)
- assets/styles/editor-style.scss (custom CSS)
templates/header.php
This is a non-standard file to render content just after the HTML body tag, e.g, banners and navigational menus.
https://github.com/roots/sage/blob/master/templates/header.php
note: Looks like base.php also attempt so find the standard header.php file and render it into the body above the header.php (not included in the theme).
page.php
This is the standard page.php file that gets injected into the main section of base.php; basically used to include two non-standard files.
https://github.com/roots/sage/blob/master/page.php
templates/page-header.php
This is a non-standard file to display the top part of pages, e.g., custom page templates, 404.php, etc.
https://github.com/roots/sage/blob/master/templates/page-header.php
templates/content-page.php
This is a non-standard file that simply puts the content on the page.
https://github.com/roots/sage/blob/master/templates/content-page.php
templates/footer.php
This is a non-standard file that outputs a footer section on the page.
https://github.com/roots/sage/blob/master/templates/footer.php
No comments:
Post a Comment