Making custom templates for dummies?
June 17, 2013 1:52 PM   Subscribe

I'd like to start editing wordpress themes and I'm finding that while there's loads of individual tutorials, getting a handle on everything I need to learn is proving more of a challenge. Where do I start?

I have a very mildly successful blog (as in a regular viewer base of about 30 people a day with occasional bumps of 200 or so people all at once when I say something smart) that makes less than zero dollars, which I run out of a basic template with a few widgets. I have my own domain and web hosting through Nearly Free Speech. I'm very proud of my little project and for me, I'm using it to learn google analytics while having fun, but I'm ready to do a bit more..

But there's a lot I can't do with my skills. :(

Sure I can install wordpress, and add themes other people made, and then slot widgets in. But I'd really like more flexibility in regards to editing the look of the blog, where I can put widgets (ie in posts) and so forth. I understand the basics of HTML and the concept behind CSS and a master filter for the look of the page, but I stopped doing amateur web design when everything was tables and div layers started being more common. I'm finding googling resources is for me, overwhelming. I generally learn better from static text than youtube videos, but I need a lot of hand holding. I'm also happy to buy a book or two.

So, where do I start when I want to make my own pretty wordpress page?
posted by Phalene to Computers & Internet (11 answers total) 9 users marked this as a favorite
 
Start here. More specifically, here.

This is also good.

I've got to tell you, though, theme development has gotten really complicated. If you want to create a responsive design, and use all the cool whizbang features that are in Wordpress, it's pretty daunting.

A better idea is to create a child theme that builds on a starter theme such as Starkers.
posted by adamrice at 2:16 PM on June 17, 2013 [2 favorites]


Yes, the way to begin is via child themes. Use a minimalist theme (like the one mentioned above), or just one of the defaults (twenty twelve for example). Child themes are a very nice incremental way to learn the ins and outs of how Wordpress works.
posted by pipeski at 2:27 PM on June 17, 2013


I found this website really helpful when I was trying to modify a Wordpress theme. Yes, you'll need lots of Wordpress-specific help, but you'll probably also need help with the details of HTML and CSS, which is what I used it for. I particularly liked the "Try it yourself" editor.
posted by ootandaboot at 2:58 PM on June 17, 2013


I'm going to disagree about building child themes as a starting point. Yes, they're useful for small amounts of customisation on top of an existing complex theme, such as with Twenty Twelve, but they're a poor choice to begin learning Wordpress development. You're typically working with an abstracted subset of rules which are partially Wordpress and partially that particular parent theme. You're spending your time battling the particular choices (good and bad) that theme designer made when building their theme, and you end up wasting your time overly specialising in just altering that particular theme.

I think the best way to learn would be to code up a static site from scratch and then Wordpress-ize it. That's how I started, and in some ways I still think it's a great way to work, especially if you have a relatively simple site. It would also allow you the opportunity to get to grips with modern web development, which (if you take away the crazy whiz-bang stuff) is actually far simpler and easier than it ever has been.

The way I normally work is to take something like Underscores and start building on top of it. It gives you a thorough but lightweight base to start from. You don't need all the cool features to start with, and I could implement your current site with it in about an hour or two, possibly quicker. You certainly don't need any advanced features to emulate it, and the beauty of having the entire theme under your control is that you can build it up as you go. Suddenly decide you want widgets in the footer? Create a widget area in the footer and stick some widgets in there. It's very empowering once it all starts coming together. Plus because you built it, you know how it works.
posted by Magnakai at 3:20 PM on June 17, 2013 [1 favorite]


I also strongly recommend caution when using w3schools.
posted by Magnakai at 3:22 PM on June 17, 2013 [1 favorite]


My wife's blog was using K2 + a child theme to do some light customization (header image, ad insertions background color).

When it came time to revamp the site we first tried using Headway, a commercial theme with WYSIWYG tools for creating completely custom designs and layouts, but that started to seem like a dead end -- Templated web applications and WYSIWYG tools aren't a good fit, there are too many gaps where things can go wrong.

I decided that I'd instead start from scratch with a solid CSS framework. I chose Twitter Bootstrap because I'd been learning it for another personal web learning project and I thought it would be best to leverage that effort. I experimented with a number of Bootstrap-based themes before I decided that I was better off using a starter theme and integrating Bootstrap on my own.

For the starter theme I chose the above mentioned Underscores because it was relatively recent, not too clever for its own good, and was created by Automattic (which runs wordpress.com and employs many Wordpress contributors) for their own use.

I am, overall, pretty happy with the experience and the current results. I've fussed with CSS in the distant past (4-5 years ago) and while I am not much a developer, I can generally figure out what code is supposed to do and how to tweak it to do what I need.

If I were doing it over again, I'd probably either choose a different CSS framework (like Zurb Foundation, or PureCSS), or I'd just start customizing underscores directly, without using a separate CSS framework. I like Bootstrap, but it puts a lot of presentation directly in the markup, rather than abstracting it semantically, which is probably great for rapid prototyping, but when you are done, it feels like the "house" you built has a lot of exposed scaffolding.

Given what you've said, I think Underscores is a good place for you to start. It provides , walls, a roof, and plans for different interiors. Starkers looks like a foundation with some basic utilities stubbed out and a pile of building materials.
posted by Good Brain at 4:11 PM on June 17, 2013


Dig WP (book and website) might be a good start.
posted by backwards guitar at 4:55 PM on June 17, 2013


I also recommend underscores as a good starter (style free, just the PHP skeleton and basic markup to get you going). But it sounds like you don't have much (or any) experience with PHP, and you're going to need to get your head around the basics there in order to do much with WP, especially if you decide to start from scratch.

The codex is a good place to start with WP-specific template tags, but some general reading on the basics of PHP will help to understand how the templates are working, if you're not familiar with it at all. Otherwise, coming at it from the perspective of static, styled HTML, I think you might quickly get overwhelmed.
posted by stavrosthewonderchicken at 5:20 PM on June 17, 2013


Response by poster: but some general reading on the basics of PHP will help to understand how the templates are working

Exactly. To amend my question a bit, what are some good n00b resources for this?
posted by Phalene at 6:14 AM on June 18, 2013


It's not free, but Tuts+ Premium's PHP Fundamentals course provides a good introduction to PHP (although there is no specific WordPress focus). Perhaps you could sign up for a month to give it a go? They also have courses on WordPress, and many other things. I know you said you'd prefer non-video resources, but the instructor is really good. That said, there's also a number of free books included with membership, and these ones look relevant to what you're trying to learn:

WordPress for Mere Mortals
WordPress Essentials - Techniques for Beginners
Mastering WordPress
Getting Good With PHP
Digging into WordPress (this is the digwp.com book I mentioned earlier, didn't realize it was available here.)
How to be a Rockstar WordPress Designer
How to be a Rockstar WordPress Designer 2
posted by backwards guitar at 7:42 AM on June 18, 2013 [1 favorite]


Without wanting to get too orthagonal, PHP is a relatively simple programming language. The best course I've found on simple programming concepts for newbies is the Javascript course at Codeacademy. It gives you a really solid basis in variables, manipulating variables, if statements, and various loops. Once you've got those concepts down, you can easily do everything you need in Wordpress with just a little googling. The differences in Javascript that you'll learn and the PHP you'll use are actually fairly minor.

Bonus: Javascript is insanely useful for web design.
posted by Magnakai at 1:35 PM on June 18, 2013 [1 favorite]


« Older Finding critics of SEO   |   The E Word. Well 2 of them, Euthanasia and... Newer »
This thread is closed to new comments.