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
Erin also helps with this phase by ensuring we have everything that we need — logins, files, content, etc.
Theme creation
Once
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,
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
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
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.