I have decided that I like WordPress so much that I am going to build a site from scratch and document it.

Update: after signing up to Oxygen Builder when it was on offer I have now pivoted this project into Oxygen build documentation as the build is so good and still allows you to delve technically into style sheets, HMTL and PHP. Therefore Part 2 will be about my experiences with that.

What is the Objective Here?

Getting better at technical SEO and product ownership by building upon a WordPress (WP) site from the bottom up. This is particularly relevant to site speed and Core Web Vitals, but also other things like JavaScript, using APIs but also very useful for working with developers.

Gives me something to blog about-- I am also planning on blogging about various other topics such as SEO strategy, tech SEO, SEO automation.

I actually really enjoy front end development and I have a hypothesis that I may well have become a WP developer if I had chosen a different career path in 2011. So the scratch needs to be itched.

Gives me chance to benchmark against recommendations in the O'Reilly book Designing for Performance.

Last but not least, I believe that SEO will be blending closer to product marketing/product ownership (for the sites where organic search is a dominant part of the marketing channel mix) in the coming years. I am evening seeing an increased need for component-level testing on CMS' over the last year. In short to give the best product (read: website) recommendations you need to have good knowledge yourself.

The WP market share is massive (40% of all websites and 64% of CMS’ according to Kinsta) and as an SEO Consultant, I am going to be involved in WordPress for a while still, and with powerful ecommerce options available like WooCommerce it would be solid option for learning more about.

Setting up the WordPress Dev Environment

Using LocalWP.com is a decent option for this type of thing and would recommend for setting up quick and easy WP dev environments. However, I will be going for VS Studio to get the job done and backing files up on SQL server first before editing files.

XAMP as an alternative?

Choosing the Theme: Avada vs GeneratePress vs Underscores

Historically I have use Avada in the past, however, themes like this whilst easy to use and make great looking websites will not help me understand web dev any better. These themes are often very bloated and quite slow. As I am making a bunch of content about WP optimisation then this will also not be worthwhile.

Decided to host on Hostinger as this was ac cheap and reliable provider. Using GeneratePress, straight out the box comes with some pretty nice performance scores straight out the box:

Despite that, I want to strip out the vast amount of styles and functionality whilst still maintaining some core functionality on which to build upon. That is where I have selected Underscores, provided there is no unnecessary theme bloat that slows things down…Literally stripped everything away and now I have to start again. It looks like a turd but gets a 100 performance score so a good place to start.

If I run Lighthouse again though it is ugly and slow...

But that is okay as it gives me something to work with.

What about the CSS?

For the CSS I did initially plan on using Bootstrap to Style this bad boy up. But had 2nd thoughts.

Vanilla CSS vs Bootstrap vs Tailwind CSS

Just the right type of video to help out with such things:

The summary of the video is as follows:

BootStrap covers the basics of CSS functionality seemed like the best way to go, however, there are a couple of other options: vanilla CSS, or Tailwinds. As much as I like to use vanilla CSS, I think it might require a bit too much learning, however, learning vanilla {insert tech} before any framework would be optimal for learning. I would also get to upload a massive unnecessarily bloated CSS file to my theme initially to compare load speeds.

Here's more on the other options:

Boostrap

Also watched this YouTube video and thought it looked good and did all I need it to do (as as n SEO I am not very familiar: 

I also watched this video to verify it was good enough: 

(I also just wanted to embed those videos so I could make a video about performance and video embeds)

Tailwinds

Tailwinds is the other option for ease of implementation.

Also tempted to use Webpack as well in the future but we will see how that works out.

Looks pretty repulsive so far, and I am going to have to switch to a local dev environment.

In the meantime I will switch back the GeneratePress which is s pretty slick theme which I would probably build upon if I did not want to go through the ‘WordPress Tech SEO Challege’.

Setting up the WordPress Dev Environment

Using LocalWP.com is a decent option for this type of thing and would recommend for setting up quick and easy WP dev environments. However, I will be going for VS Studio to get the job done and backing files up on SQL server first before editing files.

But I will also be exploring XAMPP as an option.