This is a simple, translation-ready WordPress theme that came about after conversations with designer Bec Worth about the usefulness of a Commonplace Book and what it could feel like on the web. Technically, it borrows heavily from my Notebook theme. Most text is set in the variable versions of Source Serif Pro and Source Sans Pro with appropriate fallbacks for Chinese and Japanese characters.

⚠️ Fair warning: This is a work in progress! 🚧 It’s currently in use on piperhaywood.com, but there are definitely bugs, particularly when it comes to Gutenberg compatibility. Please feel free to raise an issue if you notice anything weird or have suggestions. Unfortunately I do not have the capacity to provide individualized support, so it is provided as-is for you to work with as you wish.

I deliberately do not list this theme in the WordPress theme library because I do not have capacity to go through and maintain that process. As such, installation and all updates must be done manually as described below.

To install the theme, compress the compiled theme folder /commonplace-theme and upload that ZIP file in the WordPress theme management page. Alternatively, the ZIP file can be manually uploaded via your hosting dashboard such as cPanel or FTP/SFTP. For further instructions, see the WordPress documentation page Using Themes.

The shortcode [notebooksearch] displays a search form.

The shortcode [notebookindex] displays an alphabetical index of terms. The Index shortcode can be passed attributes that modify the included taxonomies, the post count threshold, and whether or not year archive links are displayed. For example, [notebookindex taxonomy="category" years="false" count="2"] will pull through only categories with a post count of at least 2 and no year archive links. If no attributes are passed to the notebookindex shortcode, then these default attributes will be used: [notebookindex taxonomy="post_tag, category, post_format" years="true" count="1"].

The shortcode [notebooklist] displays a chronological list of posts.

See the /css/_utility.scss styles for utility classes. The classes that can be useful for content editing are described below.

.hidden sets the element to display: none;. Do NOT use that class if it is an important UI element like a form label; instead, use the .visuallyhidden class for accessibility.

.screenshot will give an element a bit of a box shadow, similar to what a window looks like on a Mac. It can be useful for displaying screenshots.

.pixels should be used on pixel art images to render with crisp edges.

.thumbs should be used on wrapper elements that contain a series of thumb-like images. If you add the class .thumbs--with-border to this wrapper, the images will be given a solid grey border.

.smallcaps can be used to set text in small caps.

.mocking can be used for sarcastic or mocking text, the sort of thing might NoRMaLy wRItE LIkE tHiS if you didn’t have this class.

.discreet-links can be used to make links discreet (only underline on hover).

.notes and .small can be used for small text.

This theme integrates the plugin Related Posts By Taxonomy. This plugin was previously an optional add-on, but I have since incorporated it in to the theme since the plugin itself is no longer actively maintained. Related posts generated by this plugin are displayed using the same styles as the [notebooklist] shortcode.

This theme uses Prism for syntax highlighting.

To use this theme in a development environment locally, install WordPress in a separate directory (as in, not within this repo). You can use this multi-environment wp-config.php gist, or Local by Flywheel can help. Once you have WordPress set up, symlink the theme folder /commonplace-theme within this repo in to your new local WordPress site’s /wp-content/themes directory.

Note that you use the same symlink approach to hook the theme up to multiple WordPress installations. This can be useful for testing your styles against different content. For example, I maintain one site with an environment and content that reflects piperhaywood.com, and another that uses WordPress’s theme testing database.

At this point, run npm i from the root of this repo to install dependencies. Run gulp to build the theme or gulp dev for development. The command gulp dev will compile the files and then use BrowserSync for live reloading. To set a BrowserSync proxy other than the default, run gulp dev --proxy custom-proxy (replace custom-proxy).

The build borrows significantly from my Notebook theme. I’ve opted to be pretty opinionated with the base styles, and then individual components like the menu in the header or the archive list are given classes and styled separately. The classes are a little wild currently, an amalgamation of a few different styles. I’m hoping to streamline them soon. WordPress-specific styles are confined to the wp namespaced CSS files. These styles cover the craziness that Gutenberg and the classic editor can spit out. I’m 100% sure I haven’t caught every eventuality that can arise, so that’s an ongoing task.