Everyone’s road to becoming a web developer looks a little different. For me, as for many people, I started as a designer. WordPress makes it easy to get a fantastic-looking site up and running without knowing any code. As a designer, you can change themes, adjust settings, add plugins, and do so much to control the appearance of the site. But at the end of the day, a lot of designers want to go a step further and dictate pixel for pixel what the site looks like.

There are two ways to accomplish this: hire a developer to implement your design or acquire some development skills yourself. Even if you hire a developer, there will be times when knowing how to do some development is a great asset. Plus, when you can handle development needs for your clients, you become even more valuable to them and can increase your rate accordingly.

Making the leap from designer to developer is a big undertaking. I’m going to suggest some simple steps to take so you can get started on transitioning from someone who creates the site designs to someone who can build and implement those designs as well.

Good news, you’re in the right place

Chances are if you are here reading The Layout, you are at least a little familiar with WordPress. WordPress opens the door for someone to move from designer to developer better than any other platform on the web. One way it accomplishes this is the Editor, which can be found in the WordPress dashboard under Appearance > Editor.

You can view all of the theme’s code right there in the WordPress Dashboard without any special tools or server access. It does provide capabilities to edit the code as well, however, I would not suggest doing that here (we’ll talk about better ways to do that later). This is a great place for you to take a peek and see what is going on. So go ahead and look under the hood of your theme and see if you can start to make sense of what’s there.

You will typically see three different kinds of files here. To simplify things, think of these files like the “body” of your website. PHP files (.php) contain HTML (the bones) and PHP (the nerves which connect everything to the brain, the database). Stylesheets (.css) are the skin of your site, determining what it looks like. JavaScript (.js) can be thought of as the muscles of the site, typically controlling the moving parts and reacting and responding to how the site is being used and interacted with. Go ahead and explore a little bit. Do you see any descriptive words that indicate what section of the site the code is for? Or words that describe some of the visual aspects of the site?

The other great way WordPress closes a gap between designer and developer is that it breaks things into pieces, allowing you to easily identify the section you want to edit and make changes to just one part of the site. WordPress separates the content from the templates from the functions of the website. It also uses consistent structure among files, so you can jump between sites and still easily be able to find the files you want to edit.

Don’t be afraid

One of the phrases I most often use when training others is, “don’t be afraid, you can’t mess this up in a way I can’t fix.” There is very little in the world that can’t be undone. Of course, you’ll want to take advantage of the tools that will make it easy for you to undo, should your edits not go as planned. Two great tools that Flywheel provides are their Staging feature and their ability to easily make a backup and restore from it. When you do decide to jump into the code, use a staging site to make edits. This way you aren’t risking your live site, and can easily reset your staging environment if needed. If you do inadvertently make a change on your live site, no fear, just restore your latest backup and in less than five minutes, you’re back on track. These tools should give you confidence to start taking some baby steps in editing some code!

Pro-tip: once you get a little more comfortable with code, I would encourage you to explore version control, either Git or SVN, as a third layer of security and the front line of tracking changes and catching glitches before your code goes live.

Where to begin?

Now that we’ve addressed some of the initial mental hurdles, where should you begin? If you are a designer, then the most natural place to start working with code would be CSS. As we mentioned before, this is the skin of our site; it controls what the site looks like and how it’s laid out. Before we can dissect CSS, we need to understand how it works with HTML. HTML has a variety of tags to differentiate the content within. Those tags can have many different attributes, which provide some additional information about the tag and its content. The two attributes we are going to look at are id and class. Here is a code snippet with three different HTML tags. You’ll notice that not every tag has an id or class. They are not required, but they help to differentiate tags on the same page from each other. Ids should only be used once on a page, whereas classes can be repeated and used multiple times.

<article id="post-1" class="inset">
	<p class="highlight">Hello, <span>world!</span></p>
</article>

So we have the tags, <article>, <p>, and <span>. Article has an id of post-1 and a class of inset. The p tag has a class of highlight and the span tag does not have an id or a class.

The CSS to go with the above HTML might look like this:

/* This is a comment, it doesn't affect the code. We can use it to make notes or write instructions */
article { /* These styles will apply to every <article> tag on the page */

background: #eaeaea;  /* This makes the background gray using a HEX color code */

padding: 20px; /* give the article 20 pixels of space around the inside */

margin: 10px; /* give the article 10 pixels of space around the outside */

}

#post-1 { /* These styles will apply to only the tag with id of post-1 */

border: 1px solid green; /* green solid line around the container */

}

.highlight { /* These styles will apply to anything with a class of highlight */

background: yellow; /* give this text a yellow background */

}

span { /* These styles will apply to every <span> tag on the page */

font-weight: bold; /* bold this text */

text-transform: uppercase; /* make this text ALL CAPS */

}

To dig more into CSS and how it works, there are lots of fantastic resources. Some great places to start are A List Apart Books, codeschool.coma, codecademy.com, lynda.com, css-tricks.com, and wpbeginner.com. Each of these resources is a little different; some offer a general, learn the basics approach, and others focus on use cases and will give specific code snippets or tutorials on a specific task. Everyone learns in different ways, so find what’s right for you.

Look at code “In the Wild”

We talked earlier about one way to “peek under the hood” but another way is to use the development tools built into your browser. Most browsers will let you explore around in the code on a web page. Go ahead and right click or ctrl click on this text, and select “Inspect” or “Inspect Element.” A window will pop up that should show you the HTML tag and corresponding CSS. You can even edit the properties and see what they look like when changed.

Google is your friend

When in doubt, Google! Seriously, there are so many people writing about code, chances are someone has written about what you are trying to do. So Google and see what you find. There may even be several ways to accomplish what you are going for, and you can find the best way given your own style and circumstances.

Putting it into practice

You don’t have to build a theme from scratch to make use of some of these new found developer skills. I encourage you to start small. Try making some tweaks to an existing theme, like changing some colors or using a different font. As I noted before, there are better ways to edit a theme’s code than using the Editor. Themes offer updates, and if you have edited the theme files directly, a theme update will override your changes. One of the easiest ways to add some custom code to an existing theme is via a plugin. And the perfect plugin for CSS is Simple Custom CSS by John Regan and Danny van Kooten. This lets you add some of your own CSS to your site without messing up the theme files, and is great for making small visual changes to your WordPress site.

Formalize your workflow

Once you get more comfortable working with some smaller snippets of code through the Dashboard, you will want a more formal workflow for your development tasks. Developer’s workflows can range from very simple to extremely complex. There are good reasons for some more complex workflows, but we are going to start with the basics. The two things you must have if you want to edit code outside of the Dashboard are a code editor and an FTP program, which will allow you to put and get files from your server. Elegant Themes has a great post comparing code editors. It’s an excellent resource when trying to determine which editor is right for you. Some code editors have FTP built in, but there are also a lot of free or low-cost options out there.

Pro-tip: another great tool for a WordPress developer’s workflow is DesktopServer by ServerPress. This lets you set up and build a WordPress site on your computer locally with just a few clicks.

Try creating a child theme

Now that you have a more formal editing environment, try creating a child theme. This is a custom theme that is based on another theme. Both themes must be installed on your site for it to work, and the child theme should be the one that’s activated. The two things required for a child theme are style.css and functions.php files. The Genesis framework leverages this functionality extremely well and is a great place to jump in and start building some of your development skills. Carrie Dils has done several lynda.com courses on using child themes with Genesis. It’s a fantastic next step in your designer-to-developer journey.

Don’t get discouraged

It’s natural that as you jump into learning code, at some point you’ll get discouraged, but don’t be. Everyone has been there. Even experienced developers have days where they feel like they know nothing. Some of the best ways to get past these humps are by staying connected with others on your same journey. Twitter, Slack, and participating in the WordPress.org forums are all great ways to stay connected. Follow some blogs like the Layout, and you can cultivate relationships and learn along the way. Some of my favorite people to follow who have helped me on my development journey are Carrie Dils, Tom McFarlin, and John Regan.

Where should I go from here?

Once you feel like you have a good handle on HTML and CSS, the next logical step is JavaScript, or you can take it a step further and dig into the WordPress Codex to learn how to pull pieces of WordPress content into your code. Happy coding!