How I Designed ‘Fish’
In August of 2020 I decided to design my own website from scratch. Behance was not really cutting it. I designed the ‘Fish’. My own WordPress theme. Here’s how.
I never really liked the Behance approach. And don’t get me wrong here, I love the fact that it is free and pretty much all tools that you need to make a decent UI, UX, Branding profile is available on Behance. What I didn’t like was the it is never truly yours. From the URL to the fact that there is so much distraction. A strict and standard approach that it asks you to fall in line. Other things that I’ll probably get into another day. I also explored options like Squarespace, WIX and other similar platforms. I did host my website on Squarespace for a while. I really didn’t like the pricing model and all the additional restrictions to where you need to upgrade in order to expand your website features.
I started looking into building one from scratch. I made a list of requirements and list of skills that I need to acquire to design one myself. Here’s what I came up with:
- Beginner level HTML
- Beginner level CSS
- Beginner level to moderate level of core PHP to build a CMS
- Understanding of Website Hosting and Domains
- Basic understanding of Servers and their compatibility
- Will and motivation to learn more and fix things when it breaks 😛
I knew pretty much everything from above except the 3rd point. And 7 being a little subjective where I had my days losing my head over smallest of the issues. I knew that I needed to learn PHP is some shape or form if I want to build my own CMS. I can’t really say why I decided with PHP and not any other programming language at this point. But I can say I am glad I picked PHP. It’s a fun language to learn.
The UI and the UX of Wallfish
I started designing my website in Figma. It took me around 3 days to my UI and UX figured out. I knew I wanted a design with a side navigation bar. The challenge was to align design on the right hand side section. When you design anything with a navigation on the left side the question is where should the content flow start on the right hand side. This struggle was specific to the desktop. Considering in the mobile view everything would fall one below the other. The idea for me was to integrate a small information box in the desktop design parallel to the logo so that the content could begin at the point where my navigation starts.
Attempt One – The Labor of Love
I started coding my website with HTML and CSS. I decided to use Sublime as my text editor. I love Sublime over any other editor because it’s lag free. If you are a developer, you might think why not Visual Studio Code (VSC). Well, as I said the lag. Coding in VSC is like playing a game at 60 FPS vs coding in Sublime which feels like playing a game at 120 FPS. You will hardly notice a different but when you do, it gets annoying.
My focus was set up my pages using the .php extension and not .html because it was going to be running php scripts and I wanted to split my header and footer file so I don’t need to hard code them on each page. I also used PHP to identify my current page selection and highlight the navigation. I think this was possible using JS but I decided to improvise with what I knew and fix that later. I had decided that I will pick languages and frameworks which are more sustainable and doesn’t deviate me from my goal. So I decided to learn Flexbox over learning Bootstrap. Which is why also I decided that I will invest time wisely and did not bite off more than I could chew. I decided to put a pin on learning SASS, Bootstrap and learning JS. Considering these languages were not crucial for developing my website. Having said that, I used a little JS on my navigation. I explored a few tutorials on JS and experimented a few things using Codepen. It took me around a week to finish my front end. After that I started working on server side form validation. If you fill my contact form I wanted to validate if each input field was filled with correct data. This part was challenging and took me a few trial and errors. A lot of them actually. Almost a week in fact. But it finally was over.
This was the time to face the music and start working on the CMS part of the website for my portfolio and blog. I had my front end ready. I had my portfolio listing page along with it’s inside page. I could’ve just copy pasted one page after the other and got done with it. In fact one of my friend told me to do just that. But it felt like cheating to me. It was not a long term solution. So I decided to turn up the heat on learning PHP. I signed up at Codecadmey and started learning PHP in further detail. I had to take a break from design my website and focus on learning a few more concepts of loops and conditional statements. I was lost. A little stressed out. A week passed by and I still haven’t figured out how to query (insert) my data in a database and retrieve the same later. I jumped the line and looked at YouTube to find out how to do that. It was quiet overwhelming for me. I decided that I will keep learning PHP but I need to get my website up and running. It was time to explore other options.
Attempt Two – ‘Easy Breezy’ WordPress
My first Wallfish website in 2008 was a WordPress website. I had participated in a content and won an amazing looking theme from a developer who goes by the name ‘Fresh Face‘. I was so excited to download a fresh copy WordPress, installing it on my Godaddy hosting. Setting up my config file and setting up the admin to lead the theme. And boom! It was done. My website was ready.
Fast forward to 2020 and now I have to design a theme of my own. I looked at tutorials on designing a theme from scratch and my brain is going numb looking at the WordPress Hierarchy chart. I started following a few tutorials on the web and I was getting stuck at absolutely every step. I had no clue how does a template design system work. All I know was that you theme files are generally inside you theme folder. Another week went by and I was stuck at my home page with a navigation that was not connected with anything and for miles I had no clue what I was dealing with. I was really contemplating if WordPress was what I was looking at. I know I needed a system like that but I did not want to download a theme. I wanted to design my own and I wanted to know my website inside out. Every single line of code that goes in my website I wanted to have control over. It thought I was asking for too much in too little time or with too little will to follow through. I was a little disappointed in myself not to be able figure out a CMS more than half the websites on the internet is using. I almost gave in to the idea of using Squarespace or WIX until…
Attempt Three – Craft CMS – A Breath of Fresh Air
I started looking for CMS alternatives to WordPress and I found a few. The first one was Ghost and second was Craft. I had used Ghost one before and it was way more simple than it was now. Now there was also a paid version and the free version for you to upload on your server was a bit complicated for me to get my head around. Craft on the other hand looked beautiful. It was easy for me to set it up on my local server. Craft‘s website has extensive and easy to understand documentation. The lack of extensive YouTube videos was compensated by their brilliant documentation. I picked it up without much struggle. I also got familiar with their TWIG templating system. Their mantra to approaching a CMS sat quiet well with me. Designing in Craft was like starting with a blank slate and that I believe is their strength. No strings attached. Design it however you feel like. It took my existing website’s HTML and Flexbox CSS like a breeze. I was able to make my portfolio dynamic and was able to convert anything I wanted to a dynamic element. My website was ready and was portfolio and blog was pretty much ready within 2 weeks. I was really happy with the progress I made and I was telling everyone who was remotely interested in development how easy Crafts system is.
It was time now for me to take this on road and test my website on a live server. I checked the server compatibility and all checked out and I was ready to go. There were 2 main ways to install Craft on a server. Using Composer and another was a little complicated which I avoided. I chose the composer approach because it was the exact same approach I took when I installed it on my computer (Windows). I was surprised that even after all the compatibility checked out and everything looked good the installation was pain. I was recommended that I have a Virtual Private Server (VPS) to install Craft it was not a mandate. My composer version was clashing with the PHP version. I managed to change the PHP version to the latest required version but I struggled with upgrading my composer version on a shared hosting server. After many attempts I managed to install Craft on my shared hosting but later I struggled to upload my code to the server. There were constant errors which I couldn’t figure out what I was doing wrong. I looked though their documentation and searched the web to find out what could be going wrong I was not successful in doing so. Even after everything was running swimmingly on my computer.
Again, I felt like I’m back to square one. In hindsight I feel it was just a process of learning and experimenting. I had come too far with this to just give up but then none of the above was working. My plan at this point was to go back to the first approach and just learn PHP and giving it another try.
Attempt Four and the Final Attempt – Hey WordPress? Are we still good?
The day I realized Craft CMS was taking longer to crack and I was falling short on the skills needed to make it live, I called my friend Ashwin to steam off a bit. I ranted about how crazy were the last 2 days with figuring out Craft and what a roller coaster ride it was for me. Ashwin is a front end developer and is an experienced WordPress developer. He asked me what went wrong with my second attempt when I was trying to design my website with WordPress. After about an hour of ranting about how complicated was it for me to understand he asked me to pull up the code that I was dealing with. I fired up Google Meet and shared my screen. He pointed out to things that I was doing wrong and where I was stuck. Within a matter of 15 mins he explained how templates work and what are fall back templates. All the logic and lines of code I had been writing for Craft suddenly started coming back to me and it felt like I was getting it. The session lasted for less than 20 mins and Ashwin helped me make sense of the WordPress templates and helped join dots. He also introduced me to what Advance Custom Fields (ACF) are and how they work. I was blown away.
This was a eureka moment for me. Everything just clicked in my head and after we got off the call I quickly went to WordPress Codex (documentation) to check all WordPress’s built in features. I checked out a few YouTube videos on Custom Post Types to create multiple blog approach without plugins. One that stood out to me was from Mr. Digital on YT. Everything post that started stacking up and making sense. That almost a month ago and now I have the Wallfish. Coded from scratch one page at a time and less than 3 plugins.
Where does it go from here? My goal is to design my own plugins and replace them with the ones I use (Contact Form 7, ACF & Search and Filter). Why? Because I want to learn. And there is no better way to learn than building things yourself. Eventually I want to be able to design my own CMS.
A big thank you to Ashwin 🧡. You’ve been very patient with me.