Cheapskate beginners guide to switching from hands-on web development to WordPress

Posted at:

Updated at:

This post is the third in a three-part series about migrating from a self-built PHP-based Laravel backend to a managed WordPress backend, in an attempt to minimize on-going maintenance and custom code.

Part one discussed why moving to WordPress felt like a visit to the Ferengi homeworld, and part two detailed what motivated the switch.

Having previously discussed why someone might want to make a switch from a custom-built website to WordPress, and the initial experience thereof, it’s high time to round off with some practical advice for others in the same boat. In this article I’ll list the early resources I found the most useful for getting an all-round understanding of WordPress.

The advice in this post is intended for someone who:

  • Has experience as a website back-end developer.
  • Wants a content management system (CMS) to host both hand-crafted pages as well as an on-going blog.
  • Has chosen WordPress as this CMS, but has never used it before.
  • Wants to focus on content, rather than the backend, i.e. minimize on-going maintenance and custom code.
  • Wants to minimize on-going monetary costs.

Before we get to the list of free resources I found most useful in making the transition, let’s talk a bit about the hosting environment first.

Hosting environment

Although it’s more effort, I recommend separating your domain registrar and website hosting services. Apart from convenience and simplicity, there’s little reason to have both your domain and website managed by the same company. By keeping them separate you will have more flexibility if you need to change either of the two. Given that you’re reading this cheapskate guide, chances are, you’ll appreciate this flexibility down the road.

Neither of my two domains are currently burdened by massive popularity, so I prioritized an affordable low-end solution, which could potentially scale. I narrowed my choices down to:

  • Cloudways – A cloud-based hosting solution with granular hardware scaling.
  • Hostwinds – A more traditional hosting solution.

Since we’re cheapskatin’, we’ll be comparing Hostwinds’ cheapest option with Cloudways’ cheapest option.

I have 2 domains, which means with Hostwinds, it’d have to be the advanced shared hosting for ~9 USD (without tax), and ~8.50 USD (without tax) at cloudways for the absolutely cheapest cloud hardware.

Despite hostswinds offering unlimited bandwidth (compared to cloudways’ 1 TB limit), I opted for Cloudways as I preferred exclusive – as opposed to shared – hardware. Furthermore, I doubt my sites would exceed their included 1 TB bandwidth any time soon. Either way, both are affordable managed options as far as I am concerned.

In hindsight, I’m not sure I can tell the server is exclusive as the initial website load times can still be a tad lengthy ~800ms. Then again, I did opt for the cheapest cloud hardware, and I’ve not spent hours digging into this response time.

Amazing WordPress resources

Due to the extreme popularity of WordPress, an enormous ecosystem has established itself around it. An ecosystem very eager to offer goods and services in exchange for money. A thriving ecosystem is great, but if you’re on a tight budget, or just getting started, it makes sense to start small and see what you can do, without paying for optional add-ons.

Similar to how, when you’re just getting started with guitar lessons, you don’t go for the diamond encrusted Fender Stratocaster. You start with a solid used guitar. Reasonable. Sensible.

Using wordress

Given that our world largely runs on capitalism, you will have to do a bit of digging, as both search engines and video platforms prefer surfacing the most eye-catching sparkly content. Luckily, I can save you a bit of digging time.

Buried underneath dozens of catchier thumbnails and titles hides WordPress’ own YouTube channel with a paltry ~22k subscribers, at the time of writing. I’m not surprised that their content is largely overlooked by YouTube’s recommender engine when competing against an avalanche of O-mouthed tech-influencer thumbnails.

But when you finally do find their channel buried under all the attention-absorbing gunk, you’ll find numerous videos that serve as a good introduction to building website basics with vanilla WordPress. The keyword here being vanilla, without any paid exotic themes or plug-ins.

Two videos I found very useful were…

Builder Basics: Building with Columns, Groups, Rows and Stacks

A great starter video which – as the name implies – explains the basic building blocks in WordPress. It also has a few slightly more advanced examples where the presenter adds some custom CSS. A great way to figure how far the so-called Gutenberg editor can take you, before you need to hand-craft some code yourself.

Rapid Website Recreation

A more recent video show-casing how to re-create a fairly simple photo portfolio website using WordPress. Again, very helpful in showing just how far the default Gutenberg editor in WordPress can take you, and where you’ll need to take over with custom code.

In addition to these videos hosted on WordPress’ YouTube channel, WordPress.org also also contains numerous shorter videos detailing specific functionality I recommend watching:

https://learn.wordpress.org/tutorials/

All of these resources will give you an initial impression of what vanilla WordPress can do, and I strongly advise to get as much usage out of vanilla WordPress as possible. Vanilla WordPress functionality is free and is likely to be more long-term compatible, than third party plug-ins.

But let’s say you need more, and judging by what I’ve seen in vanilla WordPress, I’m certain you will. Eventually. Then what?

Additional functionality

The simplest, most standard add-on functionality comes in the form of either:

  • Themes – Styling, layout, and related functionality.
  • Plug-ins – Front-end and back-end functionality.

In terms of a theme, I opted to use WordPress’ default “Twenty Twenty-Three” theme and customize it to suit my needs. I don’t have much advice re. themes other than to note that the most popular, best supported ones, are subscription based. So if want to keep a tight budget, start out with the default theme and see how far you can get with your used guitar.

In some cases, WordPress and its standard theme simply didn’t cover my need and I’m delighted that among all the paid options, a collection of free gems were waiting to be discovered.

Here are all the free plug-ins that I found and installed in addition to the defaults provided:

  • Email encoder – I have a strong personal dislike for using website-based forms, just to send somebody an e-mail. But I acknowledge that if you use raw e-mail addresses anywhere on your site, at some point a bot will come crawling, scoop it up and start spamming it. This plug-in makes life a little bit harder for the bots by scrambling raw e-mail addresses using Javascript.
  • Nested pages – If your website has more than ~7 custom built pages, i.e., more than the standard About, Blog, Contact, etc., then this plug-in allows you to add much needed structure by nesting pages under others.
  • Query monitor – Admittedly, I’ve used this plug-in very little. But I expect it to come in handy in the future. It helps track down performance issues with your site, among other things.
  • Responsive Lightbox & Gallery – In addition to offering very functional lightbox and gallery functionality, which most websites end up needing, it also adds more features to WordPress’ somewhat sparsely featured media manager. I should note that some of this additional functionality appears a bit buggy, e.g. ‘filter by folder’ seems to kind of come and go, which I’m assuming is a bug. But even so, the plug-in remains incredibly useful, even in its free incarnation.
  • Loops & Logic – Although WordPress offers some dynamic presentation blocks, they are fairly limited. I find it a tad cheeky that some dynamic behavior I’d consider to be almost universally useful is available if you host via WordPress.com (not .org). This plug-in allows you to craft some useful simple dynamic behavior, like listing a selection of page links in a nice little loop.

Hopefully this write-up has helped you a little bit on your own WordPress journey. If so – please feel free to share it with others.


Bonus: Dynamic content

A reader from Hacker News expressed an interest in knowing more about how Loops & Logic solved listing the newest blog posts on my site. I mistakenly recalled Loops & Logic to be part of my solution, when the actual solution involved WordPress’ vanilla ‘Query loop’ block. Loops & Logic was instead used to display a series of tagged project pages, as teaser links on the blogs front-page.

My poor memory is as good a reason as any, to briefly cover both approaches to dynamic page content in WordPress.

Approach 1: Query loop

Whenever possible, leverage WordPress’ vanilla feature set, as it (again) likely has the greatest chance of long lasting support, compared to third party add-ons.

Inserting WordPress’ Query loop block is straight-forward, and needs minor configuration to limit the number posts it displays, explained in detail here.

The appearance of each post-preview can then be tailored as needed within the Query loop block using WordPress’ default editor.

Approach 2: Loops & Logic

Loops & Logic provides a set of pre-written dynamic templates when you first install the plug-in and they serve as a good starting point just to get a feel for exactly how expressive the plug-in allows you to be.

However, the samples themselves don’t do much in terms of fostering an understanding on how it all works underneath the hood, or how the various dynamic components in Loops & Logic work together. My own explict customization of their sample code entitled “Advanced – Styled blog post grid” also wouldn’t help newcomers much I fear.

Instead, I suggest watching the same tutorial video I did, which should yield all the knowledge you need to construct the simple dynamic content I did.

If not, reach out, and I’ll gladly provide you with my sample code personally.


Posted

in

by

Comments

Leave a Reply

You may also enjoy reading…

Switching to Wordpress felt like a visit to the Ferengi homeworld

Website soft re-launch

What 5 years of interviewing software engineers taught me