{"id":521,"date":"2023-11-10T07:28:46","date_gmt":"2023-11-10T07:28:46","guid":{"rendered":"https:\/\/www.lasselaursen.com\/?p=521"},"modified":"2023-11-10T07:28:46","modified_gmt":"2023-11-10T07:28:46","slug":"cheapskate-beginners-guide-to-switching-from-hands-on-web-development-to-wordpress","status":"publish","type":"post","link":"https:\/\/www.lasselaursen.com\/post\/cheapskate-beginners-guide-to-switching-from-hands-on-web-development-to-wordpress\/","title":{"rendered":"Cheapskate beginners guide to switching from hands-on web development to WordPress"},"content":{"rendered":"\n<div class=\"wp-block-group has-tertiary-background-color has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"border-width:1px;border-radius:0px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<p>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.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.lasselaursen.com\/post\/switching-to-wordpress-felt-like-a-visit-to-the-ferengi-homeworld\/\" data-type=\"post\" data-id=\"516\"><strong>Part one <\/strong>discussed why moving to WordPress felt like a visit to the Ferengi homeworld<\/a>, and <a href=\"https:\/\/www.lasselaursen.com\/post\/the-virtue-of-selective-ignorance-and-why-i-finally-switched-to-wordpress\/\" data-type=\"post\" data-id=\"523\"><strong>part two<\/strong> detailed what motivated the switch<\/a>.<\/p>\n<\/div>\n\n\n\n<p>Having previously discussed why someone might want to make a switch from a custom-built website to WordPress, and the initial experience thereof, it&#8217;s high time to round off with some practical advice for others in the same boat. In this article I&#8217;ll list the early resources I found <strong>the most useful<\/strong> for getting an all-round understanding of WordPress.<\/p>\n\n\n\n<p>The advice in this post is intended for someone who:<\/p>\n\n\n\n<ul>\n<li>Has experience as a website back-end developer.<\/li>\n\n\n\n<li>Wants a content management system (CMS) to host both hand-crafted pages as well as an on-going blog.<\/li>\n\n\n\n<li>Has chosen WordPress as this CMS, but has <strong>never <\/strong>used it before.<\/li>\n\n\n\n<li>Wants to focus on content, rather than the backend, i.e. <a href=\"https:\/\/www.lasselaursen.com\/post\/the-virtue-of-selective-ignorance-and-why-i-finally-switched-to-wordpress\/\" data-type=\"post\" data-id=\"523\">minimize on-going maintenance and custom code.<\/a><\/li>\n\n\n\n<li>Wants to minimize on-going monetary costs.<\/li>\n<\/ul>\n\n\n\n<p>Before we get to the list of free resources I found most useful in making the transition, let&#8217;s talk a bit about the hosting environment first.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Hosting environment<\/h4>\n\n\n\n<p>Although it&#8217;s more effort, I recommend separating your domain registrar and website hosting services. Apart from convenience and simplicity, there&#8217;s little reason to have both your domain <strong>and<\/strong> 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&#8217;re reading this cheapskate guide, chances are, you&#8217;ll appreciate this flexibility down the road.<\/p>\n\n\n\n<p>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:<\/p>\n\n\n\n<ul>\n<li><strong><a href=\"https:\/\/www.cloudways.com\">Cloudways<\/a><\/strong> &#8211; A cloud-based hosting solution with granular hardware scaling.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.hostwinds.com\/\"><strong>Hostwinds<\/strong><\/a> &#8211; A more traditional hosting solution.<\/li>\n<\/ul>\n\n\n\n<p>Since we&#8217;re cheapskatin&#8217;, we&#8217;ll be comparing Hostwinds&#8217; cheapest option with Cloudways&#8217; cheapest option.<\/p>\n\n\n\n<p>I have 2 domains, which means with Hostwinds, it&#8217;d have to be the <strong><a href=\"https:\/\/www.hostwinds.com\/hosting\/shared\">advanced shared hosting<\/a><\/strong> for ~9 USD (without tax), and ~8.50 USD (without tax) at cloudways for the absolutely cheapest cloud hardware.<\/p>\n\n\n\n<p>Despite hostswinds offering unlimited bandwidth (compared to cloudways&#8217; 1 TB limit), I opted for Cloudways as I preferred exclusive &#8211; as opposed to shared &#8211; 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.<\/p>\n\n\n\n<p>In hindsight, I&#8217;m not sure I can tell the server <strong>is <\/strong>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&#8217;ve not spent hours digging into this response time.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Amazing WordPress resources<\/h4>\n\n\n\n<p>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&#8217;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.<\/p>\n\n\n\n<p>Similar to how, when you&#8217;re just getting started with guitar lessons, you don&#8217;t go for the diamond encrusted Fender Stratocaster. You start with a solid used guitar. Reasonable. Sensible.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Using wordress<\/h5>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Buried underneath dozens of catchier thumbnails and titles hides <a href=\"https:\/\/www.youtube.com\/@WordPress\/videos\">WordPress&#8217; own YouTube channel<\/a> with a paltry ~22k subscribers, at the time of writing. I&#8217;m not surprised that their content is largely overlooked by YouTube&#8217;s recommender engine when competing against an avalanche of O-mouthed tech-influencer thumbnails.<\/p>\n\n\n\n<p>But when you finally do find their channel buried under all the attention-absorbing gunk, you&#8217;ll find numerous videos that serve as a good introduction to building website basics with <strong>vanilla <\/strong>WordPress. The keyword here being <strong>vanilla<\/strong>, without any paid exotic themes or plug-ins.<\/p>\n\n\n\n<p>Two videos I found very useful were&#8230;<\/p>\n\n\n\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns alignwide are-vertically-aligned-center tw-cols-stack-md is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-global-padding is-layout-constrained wp-block-column-is-layout-constrained\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Builder Basics: Building with Columns, Groups, Rows and Stacks\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/nWQ1m6aECBA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center has-global-padding is-layout-constrained wp-block-column-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Builder Basics: Building with Columns, Groups, Rows and Stacks<\/h4>\n\n\n\n<p>A great starter video which &#8211; as the name implies &#8211; 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.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns alignwide are-vertically-aligned-center tw-cols-stack-md is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-global-padding is-layout-constrained wp-block-column-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Rapid Website Recreation<\/h4>\n\n\n\n<p>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&#8217;ll need to take over with custom code.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center has-global-padding is-layout-constrained wp-block-column-is-layout-constrained\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Rapid Website Recreation\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/GqzDe8SoRZU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p>In addition to these videos hosted on WordPress&#8217; YouTube channel, WordPress.org also also contains numerous shorter videos detailing specific functionality I recommend watching:<\/p>\n\n\n\n<p><a href=\"https:\/\/learn.wordpress.org\/tutorials\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/learn.wordpress.org\/tutorials\/<\/a><\/p>\n\n\n\n<p>All of these resources will give you an initial impression of what vanilla WordPress can do, and I <strong>strongly<\/strong> 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.<\/p>\n\n\n\n<p>But let&#8217;s say you need more, and judging by what I&#8217;ve seen in vanilla WordPress, I&#8217;m certain you will. Eventually. Then what?<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Additional functionality<\/h4>\n\n\n\n<p>The simplest, most standard add-on functionality comes in the form of either:<\/p>\n\n\n\n<ul>\n<li><strong>Themes<\/strong> &#8211; Styling, layout, and related functionality.<\/li>\n\n\n\n<li><strong>Plug-ins<\/strong> &#8211; Front-end and back-end functionality.<\/li>\n<\/ul>\n\n\n\n<p>In terms of a theme, I opted to use WordPress&#8217; default &#8220;Twenty Twenty-Three&#8221; theme and customize it to suit my needs. I don&#8217;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.<\/p>\n\n\n\n<p>In some cases, WordPress and its standard theme simply didn&#8217;t cover my need and I&#8217;m delighted that among all the paid options, a collection of free gems were waiting to be discovered.<\/p>\n\n\n\n<p>Here are all the free plug-ins that I found and installed in addition to the defaults provided:<\/p>\n\n\n\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/email-encoder-bundle\/\">Email encoder<\/a> &#8211; 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.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/wp-nested-pages\/\">Nested pages<\/a> &#8211; If your website has more than ~7 custom built pages, i.e., more than the standard <em>About<\/em>, <em>Blog<\/em>, <em>Contact<\/em>, etc., then this plug-in allows you to add much needed structure by nesting pages under others.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/query-monitor\/\">Query monitor<\/a> &#8211; Admittedly, I&#8217;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.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/responsive-lightbox\/\">Responsive Lightbox &amp; Gallery<\/a> &#8211; In addition to offering very functional lightbox and gallery functionality, which most websites end up needing, it also adds more features to WordPress&#8217; somewhat sparsely featured media manager. I should note that some of this additional functionality appears a bit buggy, e.g. &#8216;filter by folder&#8217; seems to kind of come and go, which I&#8217;m assuming is a bug. But even so, the plug-in remains incredibly useful, even in its free incarnation.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/tangible-loops-and-logic\/\">Loops &amp; Logic<\/a> &#8211; Although WordPress offers some dynamic presentation blocks, they are fairly limited. I find it a tad cheeky that some dynamic behavior I&#8217;d consider to be almost universally useful is available <strong>if<\/strong> you host via WordPress.com (<strong>not<\/strong> .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.<\/li>\n<\/ul>\n\n\n\n<p>Hopefully this write-up has helped you a little bit on your own WordPress journey. If so &#8211; please feel free to share it with others.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Bonus: Dynamic content<\/h4>\n\n\n\n<p><a href=\"https:\/\/news.ycombinator.com\/item?id=37916236\">A reader from Hacker News<\/a> expressed an interest in knowing more about how Loops &amp; Logic solved listing the newest blog posts on my site. I mistakenly recalled Loops &amp; Logic to be part of my solution, when the actual solution involved WordPress&#8217; vanilla &#8216;Query loop&#8217; block. Loops &amp; Logic was instead used to display a series of tagged project pages, as teaser links on the blogs front-page.<\/p>\n\n\n\n<p>My poor memory is as good a reason as any, to briefly cover <strong>both approaches <\/strong>to dynamic page content in WordPress.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Approach 1: Query loop<\/h5>\n\n\n\n<p>Whenever possible, leverage WordPress&#8217; vanilla feature set, as it (again) likely has the greatest chance of long lasting support, compared to third party add-ons.<\/p>\n\n\n\n<p>Inserting WordPress&#8217; Query loop block is straight-forward, and needs minor configuration to <a href=\"https:\/\/wordpress.org\/documentation\/article\/query-loop-block\/#display-settings\">limit the number posts it displays, explained in detail here.<\/a><\/p>\n\n\n\n<p>The appearance of each post-preview can then be tailored as needed within the Query loop block using WordPress&#8217; default editor.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Approach 2: Loops &amp; Logic<\/h5>\n\n\n\n<p>Loops &amp; 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.<\/p>\n\n\n\n<p>However, the samples themselves don&#8217;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 &amp; Logic work together. My own explict customization of their sample code entitled &#8220;Advanced &#8211; Styled blog post grid&#8221; also wouldn&#8217;t help newcomers much I fear.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"We reinvented HTML for WordPress: Introducing Loops &amp; Logic\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/-ObJkmhJ3qU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>If not, reach out, and I&#8217;ll gladly provide you with my sample code personally.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":739,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_FSMCFIC_featured_image_caption":"","_FSMCFIC_featured_image_nocaption":"","_FSMCFIC_featured_image_hide":"","footnotes":""},"categories":[23],"tags":[22,24,21,20],"_links":{"self":[{"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/posts\/521"}],"collection":[{"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/comments?post=521"}],"version-history":[{"count":33,"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/posts\/521\/revisions"}],"predecessor-version":[{"id":747,"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/posts\/521\/revisions\/747"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/media\/739"}],"wp:attachment":[{"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/media?parent=521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/categories?post=521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/tags?post=521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}