How to make your own WordPress theme

This is a meta post on blogging, not mathematics. Recently, I got it into my head that I should design my own WordPress theme from scratch. As a consequence, you may have noticed that the theme of this blog has changed a little. I don't know if many other math bloggers will want to try this (given that there aren't too many active math bloggers these days), but if you really want the ultimate in customization, it's the only way to go.

The reason why I did this is that I wasn't totally happy with how customizable my last theme was, even though I like that theme generally. By designing your own WordPress theme, you can pretty much change anything and the final product is only limited by your own technical limitations. If you do design your own theme, you'll realize that designing a WordPress theme is really not that scary after all. Given that, you need a little basic knowledge to get your theme started:

  1. Understanding of CSS: It's easy to learn the basics of how CSS works and you can look up guides or tutorials for anything you can't remember or don't know how to do. Basically, the entire look and feel of the theme will depend mostly on CSS.
  2. Some comfort level with PHP or programming: For certain layout changes, or adding new widget areas, it's a good idea to be comfortable with PHP. You need to know very little.

If you're comfortable with this basic web design stuff, follow these steps:

  1. Download the starter theme Blank Slate. It is the absolute minimum that a theme needs. There are plenty of starter themes for WordPress, but Blank Slate is the best because it is one of the most minimal and easy to understand. Other starter themes often use more advanced frameworks like Bootstrap, and that's not good for beginners.
  2. Unzip the theme into the wp-content/themes directory of your blog. I strongly recommend using a local test install onto an LAMP stack running on your computer, because development will be much faster. If that sounds complicated, just do the development live or on a remote test blog.
  3. Start editing the files. First, pretty much the entire appearance of the theme is controlled via the style.css file. So, change your theme using this file, using the DOM inpsector/console to get the existing classes appearing in your theme.
  4. The Blank Slate theme has very few defaults but it overrides some tags like the bold and italic tag, so make sure to fix that otherwise bold and italic won't work on your blog.
  5. Two things you might like to do to your theme that can't be done with CSS is add a custom widget area or add a custom header
  6. If you want to write mathematics, modify the header.php file to include the MathJax script:

    Note: putting stuff directly into your header.php file will only work with the active theme. Alternatively, you can use the Header and Footer Plugin, which would then be compatible across multiple themes. If your blog is a free one hosted by WordPress, you might want to use the WP-LaTeX plugin instead, or MathJax-LaTeX. This would also be easier than hosting MathJax yourself.
  7. If you are developing on a test blog, upload all the files to your real blog and active the theme through the WordPress interface

In the end I found making my own WordPress theme pretty fun, and I learned a little about how WordPress works as well. There's a reason why it's such a popular platform: it's really easy to use under the hood, at least to do basic stuff.

If you're curious, it took me about 12 hours to finish the theme.

Leave a comment

Fields marked with * are required. LaTeX snippets may be entered by surrounding them with single dollar signs. Use double dollar signs for display equations.