Our process for custom coded WordPress sites

Project prep

Before I type a single line of code, I start every project by reviewing the designs + site content. This ensures that I know what features I need to plan for while also giving me time to send questions over to the designer where needed.

For example, I had a project sent over with 3 different menus on the page (top menu, main menu + footer menu). Each menu had different links except for one that was repeated throughout (support). I made sure that I knew that page was the same link each time instead of the possibility for 2 or 3 iterations.

In that same example, I noted that I needed to set up the site with 3 menus instead of the default of only 1.

While everything I do is digital, this prep phase includes me printing out a couple of the designs to mark up with my color-coded sharpie pens. I’ve found this is the best way for my brain to game plan how the site is built.
Erin also helps with this phase by ensuring we have everything that we need — logins, files, content, etc.

Theme creation

Once I’m armed with a plan + have sent my questions off for clarification, it’s time to set up the custom WordPress theme.

At tiny blue orange, we do not use existing themes or theme frameworks for custom projects. We use a skeleton of the required theme pieces + build the site from there. The reason we don’t believe in existing themes or frameworks is that they are often slow, bloated with files/code/features, not secure, etc. We want to set our clients up with the fastest + most secure sites possible. Starting from scratch allows us to do that.

One of the biggest reasons that developers seem to disappear is because they are developing locally. This is geek speak for developing on a computer instead of on a server.

This way of coding is a huge time saver but it means that you need to be at the computer where the files are stored in order to see anything.

So I take the skeleton theme that I generated for the project + activate it on a fresh version of WordPress. Still, before any coding happens on my end, I create the required pages + add the necessary plugins.

And then I finally start to code! Since the pages exist (even though they are blank), I can code the header + footer with an accurate menu set up. And since these elements exist on almost every page, they are the best place to start coding to see the biggest impact in the shortest amount of time.

Page development

With the repeated elements working on my custom theme, I work through the pages one at a time.

Headings + list styles have already been set up, so this allows me to find the nuances in each page from the designer. The first page I choose normally takes the longest to code + they speed up from there as more content blocks are built into the theme.

When I pick a page to work on, I save all of the images from the design file to my computer + input all of the content from the document without any styling. Then I work down the page on my locally set up WordPress site to get it to match the design file.

Ancillary page development

After coding the pages designed by the designer, I move on to the extra pages that are typically forgotten about or left out of the design process.
These pages usually match a different page that was designed or are easy enough for me to use my design degree to create while keeping the branding consistent.

These types of pages are the search results page, blog post category or tag pages, the 404 page + a style tile page to showcase all of the theme’s headings, font stylings, list options + shortcodes.

Sometimes I will switch the site to a server before this phase so that my client can review things earlier. But with the speed of coding locally, it’s nice when I can wait until all pages are done to send them off for review.

The next post in this series will be about how you can test your site before it goes live! While we at tiny blue orange typically do this step for our clients, you might want to join in or be doing the work yourself + need a way to review.

on your keyboard hit enter to search or esc to close