Let’s create a WordPress theme

So, I’ve wanted to give this site a makeover for a while. It’s in pretty poor shape currently. The code sucks, it’s not responsive, the design is somewhat bland, and I’ve simply learned a lot since I did any sort of major overhaul. I have wanted to release a WordPress theme for a long time too, and I may as well release what I create for myself. I build themes for clients every day, and now I want to build one for me (and maybe you).

In this project, I’m going to design (as well as I can), code, and submit a WordPress theme to the official theme repository, and blog as many of the steps as I can. I didn’t get kickstarted for $90,000 to do this (not that I’d even back myself), so it’s likely definitely not going to have all the fantastical magic I’m sure Chris Coyier’s CSS-Tricks redesign will (which I’m excited to back!), but I do have some goals in mind:

  • Create a good-looking design fit for a blogger, but also have a place to showcase work
  • Design and develop a custom home page
  • Design and develop blog archive and singular post templates
  • Design and develop portfolio archive (via CPT) and single templates
  • Integrate post formats for (at least) links, images, galleries, video, and audio

I’m looking for some feedback on what you’d like me to share the most. I’m primarily interested from a code and workflow perspective, because I’m probably going to do most of the design in the browser, hopefully with some periodic input from some designer friends of mine :) (shhh, I haven’t told them yet).

I’m considering covering the following:

  • Concepting the site via sketches and/or wireframe
  • Font and color selection? Design considerations from a non-designer (exciting I know!)
  • Setting up the template hierarchy, and the general philosophy for what code goes in what templates
  • The post format integration
  • The custom post type integration (hint: this part will be a plugin)
  • How to organize custom functions
  • Integrating with the Hybrid Core framework (don’t less this part let you down if you aren’t a Hybrid user, it won’t be totally reliant on the framework, I’m just going to let it save me some time)
  • Making the theme responsive, and considerations for WordPress
  • Theme settings / customizer? (hopefully there won’t be many/any!)
  • Browser testing
  • Active plugin rundown for the site?
  • Post “launch” tweaks / review?

Would you like to see anything else? Does the coding environment matter to you? Do you want to see more writing on the topics, or mostly code progress? I’m considering adding audio with extra information about each post – would that be valuable? Would you like me to blog about the theme submission process (I probably will).

Some of the things I list above have been tutorialized really well elsewhere, and I fully intend to use resources available to me. However, I think it would be beneficial to blog what resources I’m using to build a certain feature, and maybe add some notes on my implementation (for instance, post formats and the theme customizer).

Maybe I can even get a few people in the community to review this with me as I go (I’m sure I’ll make mistakes, please call me out when I do). It may even be fun to record those conversations and post them as I go along. If you’re interested in that, hit me up.

Oh

I’m also thinking I’m going to do most of this live. As in, I’ll have a live URL as soon as the index.php and stylesheet are up and you can track the progress on that URL. I figure it will be best if I mirror the theme to a public Github repository so you always have a place to reference, and I’ll have a handy way to permalink progress. Sound like fun?

I’d love to get your thoughts and advice. This has pretty much been a brain dump.

PS

I’m by no means the best developer in the world. I don’t want to do this because I think I’ll be able to fill anyone that reads it full of knowledge. I’m doing it because I need a redesign, and I think maybe we can learn together if I do it openly so anyone can watch and join in the party.

PSS

This isn’t going to take a week and a half. I fully expect to work on it a couple of times a week for the next couple of months. So, don’t expect it all at once, but definitely keep me accountable!

View all posts in this series

18 Responses

  1. Sami Keijonen

    Great idea! I will follow and let you know if there is something else I want to learn.

  2. Bill Robbins

    Looks like you forgot the slider…can’t do that :)

  3. Daniel Immke

    It’s pretty brave putting your development on front street like that! I’d be interested in hearing about the frontend side of things, e.g. writing accessible HTML5 markup that renders cross platform.

  4. Amy Hendrix

    I love the idea, and I’ll be following along – I’m a big fan of putting workflow and thinking to the forefront, not just the final results!

  5. Devin Price

    Every time I post a tutorial about something in WordPress I learn way more than if I had kept it to myself, mainly because of the feedback it generates. I’m sure you’ll have the same experience. On that note:

    I know you mentioned using Hybrid to save development time, but I’d also highly recommend the _s theme as a base: https://github.com/Automattic/_s

    If you don’t already have a Portfolio Post Type plugin in mind, I’d suggest this one (and not just cause I built it): http://wordpress.org/extend/plugins/portfolio-post-type/

    Sounds like a great idea. Looking forward to the videos.

  6. David Hickox

    My advice for design and the path I usually follow:

    1. Sketch out 4-6 layouts. Sketch large so that you can fill them in with detail that is proportional to the final build. Walk away. Come back to them fresh and see what works in each of them. Take the best parts and combine them into one master plan.

    2. Sketch a responsive flow based on that plan.

    3. Start with type. Set the mood of your design with the typeface you choose. This is the part that people will interact with the most, and setting the mood with the text first will keep you from overdesigning and overstyling later.

    4. Create a base stylesheet starting with the text. Set a base line height and build everything off of that. Make it look really good at this stage. If you do, the rest will be downhill. Base everything off these default settings and you can create clean, reusable CSS.

    5. Start adjusting things to logical dimensions. Since you haven’t touched Photoshop, you’re not trying to recreate some exact pixel placement. This allows you to base the layout on percentages that make sense. Do a little reading on the Golden Ratio and basic grid systems and round to the nearest whole or half-decimal number. Nothing has to add up to 100%. Use that concept to create useful negative space and avoid irrational math.

    6. Add in breakpoints and don’t tailor them to known dimensions. The best method I’ve used is to start resizing the browser until it breaks or looks wrong and insert a breakpoint that fixes that. Keep going until you’re all the way down to phone size. Go back later and make final adjustments for specific currently-known device sizes.

    7. Rejoice.

  7. Monica

    I’ll be following the progress! I think this is a great idea =D I’ve been developing a theme from scratch, after several years of editing premade themes. It’s a learning experience for sure.

  8. tim

    I’m looking forward to this. One thing I get confused by is the comments.php file. It seems like there are a number of ways people handle this file, but after looking at various themes’ code and reading one of Otto’s posts, I find it even more complicated. So if you’re starting from scratch and don’t mind explaining how to code this properly, that would be great. Thanks.

  9. Jens

    A great initiative!

    I’m really looking forward to see how you use Hybrid Core, since I’ve never used these kinds of frame works – and for some reason don’t like them, but maybe I can be converted :-)

    I have a blog I rarely – if ever use – but I like to rebuild it every one in while, so I’m thinking I should try and follow in your footsteps and make every step of the development public – in case someone could use any of it.

Leave a Reply