A Path to Becoming a Professional WordPress Front End Developer

I had the privilege of addressing the audience at WordCamp Welly 2014 this weekend where I shared my journey to becoming a professional WordPress front end developer and passed on some of the ideas I have about what skills and tools you need to go from someone who tinkers about with their site to someone who’s turning out great websites with professional standards.

For the record, I don’t think that this is the only way to get on that road, this is basically my story and how I’ve got to where I am, working full time as a freelancer, working exclusively doing website development on WordPress.

Maybe you’ll find some parallels in your journey, maybe you’ll be able to identify where on the time line you are, and pick up some tips to take you from there further into the wonderful world of the front end.

If you’re interested in just flicking through the slideshow, You can see them on Slideshare

I was born in 1968, I had  a rural child hood, and as a product of my time, and in typical small town style I wasn’t particularly ambitious. I thought I’d grow up to be a nurse, marry, have kids and… well… I’d not given much thought to it after that. There was certainly no web development or technology careers on my radar, they didn’t exist.

The above picture was taken around 1972 – the IANA was born that year (the infrastructure that allocates IP addresses) but we had no idea then where that would take us.

14 years later, I remember seeing a mouse for the first time at school. The year was 1984 and Macintosh was an infant being demonstrated for us at my school… owning one was beyond our means, for sure, but they sure were awesome looking, and so powerful!

One of the subjects I was studying that year was Applied Maths.  God knows why, I can’t do maths to save myself… but I could compute… and in a parallel universe I hope there’s a Dee out there who left school a year later and went to university to do some kind of computing, but it wasn’t this Dee… I left school before my final exams to go to work in a bank,  like I said… not ambitious. Just a girl, in a country school on the edge of an information age that my teachers couldn’t have foreseen.

Fast forward 20 years, I was personal assistant, sending out HTML email newsletters, and fiddling about on my first ever PC, a home built one I’d been given by an old boss. Having got to grips with HTML while I was doing those mailouts I curiously picked up a website ‘how to’ manual to fiddle around with my first site… 

And that was the beginning. I got captivated by HTML and later CSS and before long the HTML emailing boss had gone and I working full time in the IT department running the organisation’s website.  I went from that to uni, and supported my way through university (Masters of Digital Communication and Culture USYD) doing freelancing. Static sites to start, my own personal blog as a sandbox, then building sites in my first CMS-like tool, CityDesk, then, Movable Type,  WordPress.

The reason I’m telling you all of this is that all of us are on a journey, some will be new to the WordPress eco system, some a little more long in the tooth.  We’re all on that road, and for the purposes of this talk talk I’ve identified three places on the theme developer spectrum… there may be more, but I feel as though today, we’d all fall into one of these broad categories…  The Tinker, the Hobbyist, and The Professional.

IN each of these places on the developer path, I’ll suggest what it is that one might want to be doing to WordPress at that level, and then suggest areas of WordPress and development a person at each level should be across.  In this, each of these ‘points’ builds on the last… so if I’m talking about what someone interested in being a theme development Professional should be across, they ought to be up to speed on what the others already can do, likewise the Hobbyist should be across what the Tinker can do.

The Tinker fiddles around, a little like I was doing in those very early days… I was messing about with static HTML but it was an excellent proving ground on how the underlying structure of a web page works.  A Tinker may have an existing site, and theme and just want to do a couple of bits and pieces to make their site more ‘their own’ than the design they got out of the box.

When I refer to an understanding of the code, I’m talking about being able to read it, more than being able to write and develop it yourself.  It helps to have at least a working knowledge of what’s going on before you embark on editing things.

When I was learning to drive, in a paddock on the farm as we sat in the car, Dad gave me a breakdown on what was happening underneath the car when I depressed the clutch and then engaged the gears… as someone with a technical bent, that really helped me get to grips with making smooth gear changes.  Having an understanding of what you’re doing when you tinker with your website will help  you both be able to make yourself better understood when you’re contracting a developer to work for you down the track or to have enough of a clue how to troubleshoot simple things as you go.

There are options in a lot of these kinds of themes that will allow you to write custom CSS to make simple changes.

And where do you go to learn this stuff??  You can’t go past http://codecademy.com or http://teamtreehouse.com – both great resources for learning to code.

When you level up to Hobbyist getting comfortable with more than just simple code tweaks is the order of the day. Creating child themes so you can change themes safely without breaking their update path is the mark of a hobbyist who’s doing it right.  Being able to find your way around the file structure of a WordPress site, knowing what how to read the stylesheet and being confident editing the stylesheet directly, maybe even editing a little bit of the HTML or PHP in some of the theme templates. Finding code snippets from other sites and being able to paste it in the right place confidently…

Let’s start at looking at basic tools that will help make development a lot easier…

First, a text editor, if only for syntax highlighting (colour coding your code). On a Mac, give Text Wrangler (Mac) a go for a PC user, Notepad++.

Secondly, if you’re navigating between a remote server and a local machine you’ll need some kind of file transfer program… Filezilla is a free one that’s cross platform, Transmit is a paid-for application for Mac.

Finally, development tools in your browser. Chrome, Firefox and Safari all have tools built in to help you examine your web pages and help debug web pages, among many other things such web page layout inspection/testing and web performance profiling, to speed up your workflow.  In the talk I mentioned the Getting to Grips with Firebug talk from WordCamp Sydney 2012 you might want to watch that to get some more information if you’re interested in finding out more, particularly if Firefox is your browser of choice, though there will be crossover between its tools and the others’ ones.

Best Practice: Creating a Child Theme

If you’ve got a theme that you like that’s showing you the bare bones of what you want your site to look like, you may find yourself wanting to do just a few custom tweaks that may not be available in the Theme’s Options.  This is where you can start applying more of the HTML and CSS knowledge you’ve gained and the best way to do this is to create yourself a child theme and then start fiddling around with some experimentation in your CSS and HTML/PHP.  You can read a whole lot more about child theming on the Codex.  It’s the most important thing when you want to start theme customisiing

There are a great many resources on how to set up a Child Theme and get things under way, start at the codex and work from there.

 

Builder/Starter Themes

In as much as I’m talking you through how to build on basic code knowledge with some other technical underpinnings, those simple ‘Tinker’ basics aren’t really enough to do some of the more convoluted edits to a theme/site that you may want. This is often the case if you’re in the early stages of learning to code, you may well want to access some tools that are going to make the path to developing a lot quicker than learning to code from scratch.

This may also server you well if you have a custom design that you’d like to build from scratch but have found that you don’t yet have enough knowledge to be able to do that using code…

Enter builder themes that make it possible to build custom sites, or to significantly customise existing themes without having to do a whole lot of code.

Some of the most notable, quality builder themes are WooThemes Canvas, Dynamik for Genesis, iThemes Builder, and a new entry into this field is Divi by Elegant themes, a really tidy looking theme that has an interface for building your site, page by page with excellent customisation options.

The pros of these kinds of themes is that you can get building really quickly and turn out some really tidy looking design stuff without having to get too deep into the code.
They may also  suit designers wanting to get into building simple sites for clients on WordPress without having to use the services of developer. Furthermore, they’ll suit the hobbyist who wants just that little bit more control over what their site looks like.

The cons of some of these themes are that sometimes the code they turn out may not be too clean, which could potentially have an impact on performance on large scale, higher traffic sites. Also, as flexible as they are, we invariably find that there is sometimes those weird custom tweaks that a client will want that will leave you frustrated by your lack of code knowledge and the odd, obscure things clients sometimes want us to provide.

It’s also possible that because these builder themes try to bundle in as much functionality and bells and whistles that they can be affected by bloat, you may end up with way more than you need.

The other thing to be wary of is that added extras like portfolio content, testimonials and other custom post type information being built into your theme may make changing themes later on down the track a bit more problematic. So there’s a growing movement away from building themes that do more than change styles, epic functionality should, in my view remain in the domain of plugins.

The other added benefit of some of these sites, particularly thinks like Canvas is that they can be used for making really simple, clean wireframes or mockups that you can use to demo/test out working prototypes.

Having appropriated all of that… maybe you want to go further into what I call ‘Professional’ Level.

The Professional isn’t just interested in tweaking existing themes, they’re designing up, or working with designers who have created whole web site designs and they’re wanting to convert those designs into a working WordPress site.  They’re not only comfortable messing about with other people’s HTML and CSS (and PHP) but they’re confident at writing their own.  They know Code Standards so that their work will pass muster not only with other professionals but also with WordPress itself.  

First off, here are some tools to help you develop a professional type work-flow.

Now when you get to this level you may be able to take a Photoshop design and convert it to beautiful web standard HTML and CSS and want to then drop it into WordPress. You may have already come across some of those great CSS frameworks out there like Bootstrap or Foundation and are using them to build out your designs.  Realistically the sky’s limit in terms of how to get started in that arena.  You can now develop into great static HTML content… how do you get it into a CMS?   

Because we’re talking about how I got here, I shortcutted a whole lot of this part of the process by finding a starter theme that made it possible for me to get from ground zero to a custom design a whole lot more quickly than doing it this way would take me.  This is one of the wonderful things about the web community, people are constantly making tools that make their workflow faster and then sharing them with people.

So, at Hobbyist level, we’ve talked about themes you can use that don’t require a bunch of code to get you started, but if you want to get a little more hands on, and down and dirty with code. There are also themes out there that give you the opportunity to write more code and which, give you that much more fine grained control of your site. So let’s look at a couple of those.

If you want to get into theme development for WordPress the WordPress way… _s is the way to do it.If I’d had my time again, I’d totally go here… Underscores is really well documented so if you’re new to PHP and learning how things do what they do, the theme files give you an awesome lot of help to figure stuff out as you go.

Underscores is a starter theme, you don’t make child theme of it, you take it, and build on it and make it your own. 

There are also people out there who’ve taken underscores and added other awesome things to it to jump start their own development process and so if the blank page with now styling freaks you out… then it’s a good idea to start with someone else’s work…

Quark is built on _s and its whole reason for being is to put some of that styling into _s to make jump starting your theme development easier… so if _s is a 1000 hour headstart… this one’s a 1500 hour head start… it pulls in some awesome font icons, Bootstrap features and other goodies to make your site dev even easier… again, you don’t make a child theme of this, you rewrite it!!  

Here’s an example… this guy’s taken Quark and turned it into his own theme. He’s released it into the wild for free, but has  a pro version too… so he’s also making some cash out of it! #kudos!!

Finally, we rejoin my story and connect with the tool that I use consistently as my 1000 hour head start… I use Genesis Theme Framework to build on.  I found Genesis accidentally.. and then, blow me down if I didn’t completely fall in love with it… and discover that there’s very little that I can’t make it do.

Genesis functions differently to the underscores starter theme… Genesis relies on being a parent theme… you never edit or change Genesis itself, but you can completely modify how it looks using a child theme. It’s a premium theme, so you have to buy it, but once you have it you can do with it whatever you like as many times as you like.  You can also get the basic sample child theme (pictured) for free.  As you can see it’s pretty basic… but you can turn it into any number of different looking sites.

I have developed sites based on existing child themes either made by Studiopress, the vendors as this helps keeps cost down for clients as I’m basically customising a theme, but I’ve also used the bare bones theme pictured to trick it out to make it behave like the designer wanted…

This is a customisation of the bare bones starter (above) theme based on a design that I commissioned ( I don’t design, I suck at it)

This is a customisation of the popular Metro theme, one of Studiopress’ child themes. The designer and I who collaborated on this could keep the price down by using an existing layout, some awesome plugins and a great design to make the site look awesome and stay within the client’s budget.

This is a proof of concept of a beautiful design that has all sorts of magical bells and whistles like AJAX content switching and the like but the client never ended up using it… I’ve kept it alive of proof of what I can make Genesis do!!

I’ll go on the record here as saying that Genesis is amazingly powerful 

So when it all comes down, there are amazing tools, and products out there that can get you started on this crazy WordPress journey, it’s only a question of finding which one works for you and learning it well, and seeing just how far you can push it.

That said, never be certain you’ve found the one right answer… always be on the lookout for other awesome tools and things that people are making WordPress do… That’s one of the brilliant things about it.  You can stretch it SO far… and someone will always take what you’ve done and build on it.  That’s the wonderful thing about Open Source and why I am still messing around in it after all these years.

I don’t know a single coder who hasn’t spent hours on the web searching for and finding code snippets, tutorials and information to keep taking them and their skills to the next level (or frankly, to just learn how to do stuff) …  There isn’t any kind of code information that you can’t find there if you go looking.

One of the incredible things I’ve discovered about this community is how willing they are to discuss and share their knowledge. It’s incredible… Everywhere you look people are sharing code, sharing tips, tricks and teaching each other. Heck, every time I discover how to do something I document it in a tutorial so that I can come back to it later, and so that other people can learn how to do things… People are so willing to share… 

Furthermore I’ve even had some of my ‘code gurus’ have become my mentors, simply because I’m open to learning… I have to tell you, it’s disconcerting when you put your new website out there to show it off and the people you look up to post a page of things that could be improved out there in the public on Facebook… suck it up, let them… they want WordPress to be better… so do you…

Get involved in the community, I’m a member of groups on Facebook, Skype and other places where we gather around a ‘virtual watercooler’ to talk shop (and sometimes vent about clients).  Regular meetups are also an amazing way to stay connected to other users and developers… Get in there, it’s amazing!