commonplace-wp-theme

KO | EN

gitlite — search

#react #ai #llm #rust #linux #docker #java #kubernetes #awesome-list #vue #pytorch #security #mcp #open-source

commonplace-wp-theme

(★ 24)

A WordPress theme based on a Commonplace Book

commonplace-wp-theme Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Commonplace WordPress theme

This is a simple, translation-ready WordPress theme that came about after conversations with designer [Bec Worth](http://www.youwouldlovethis.com/) 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](https://github.com/adobe-fonts/source-serif-pro) and [Source Sans Pro](https://github.com/adobe-fonts/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](https://piperhaywood.com), but there are definitely bugs, particularly when it comes to Gutenberg compatibility. Please feel free to [raise an issue](https://github.com/piperhaywood/commonplace-wp-theme/issues) 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.

## Installation and updates

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](https://wordpress.org/support/article/using-themes/#adding-new-themes-using-the-administration-screens).

## Shortcodes

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.

## Utility classes

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.

## Plugins & Extras

This theme integrates the plugin [Related Posts By Taxonomy](https://en-gb.wordpress.org/plugins/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](https://prismjs.com/) for syntax highlighting.

## Development

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](https://gist.github.com/piperhaywood/2a7217964335e22574784153eab1d38b), 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](https://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`).

## Notes

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.

commonplace-wp-theme

commonplace-wp-theme Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

commonplace-wp-theme

commonplace-wp-theme Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README