Process

The most difficult part about this project was the very start. I spent weeks trying and failing to create a new theme. The problem was down to me overthinking it. Should I use a classic theme, or a block theme? Should I just use a page builder such as Elementor? In the end, I just stuck with the block theme.

‍

Before building the website, I first needed to design it. I began putting together a wireframe in Figma. This low-fidelity mock-up gave me a general idea of how the website would look, before I committed to implementing colours, images and fonts.

‍

Once I was happy with the overall structure, I began using the colour scheme that I chose. For this project, I chose earthy and natural colours; to reflect the fictional business I was building it for. I used black, white, green and brown. As an experiment, I decided to use brown as the Accent. Since it is considered a dull-looking colour, I was expecting to have to change it. However, I found a shade of brown that I thought stood out quite well against the white and green.

‍

With the design finished, I moved on to developing with WordPress theme. I used LocalWP, which allowed me to work on the website, and the theme, locally. Block themes in WordPress use the theme.json file. This file stores pretty much everything related to the design of the theme, including fonts, colours, styling and settings. This meant that the file got confusing quite quickly. Fortunately, code editors such as VS Code allow you to hide sections of code, opening only those that you are working with. This helped make the process easier.

‍

I also needed to create the structure of the theme. Folders that stored templates and patterns were necessary. I then created the header and footer files. I would build them in the WordPress block editor later. For now, the basic structure was all I needed. I then set up page templates. Once that was done, I could move on to building the website inside WordPress.

‍

I started with the header and footer. Very simple designs, so they didn’t take long at all. It was then I started to run into a few headaches. WordPress stores information in multiple different areas. Trying to make sure the theme was kept clean, with all code and styling in one area, became quite tedious. For example, I would build the header in the block editor, then copy the code and paste it inside the header file within the theme. I had to do this with every pattern and every template.

‍

With the patterns done, I started creating the pages. The images I used were all found in Unsplash. Fortunately, the settings within the theme.json file made it easy for me to keep things aligned.

‍

As for the next few pages, I kept the design quite similar, even taking a few sections and reusing them as components. The about us page still uses Lorem Ipsum filler text. For the contact form, I used WPForms, a free plugin that lets you build functioning contact forms.

‍

That was how I built the Landscaper Wordpress website. As you can see, the design is quite minimal and clearly structured. I took the approach of dividing up the content that I wanted into rows and worked on each row individually. Separating a page like this helps make it less daunting to take on.

Since this project, I have worked on developing my design skills further, adding more visual flair while maintaining the simple and minimal design that I personally prefer.