Case Study: How We Converted a Static Site to WordPress
Many people who began out at the Web early are most probably to have a hardcoded customized web page.
That’s so 1999! On ProWP we began fast and blank with a undeniable HTML touchdown web page as neatly. Once you make a decision to create content material extra incessantly this turns into a downside. Updating or including pages to a static web page is a nuisance at very best.
In the worst case, it prevents you from publishing in any respect. Also, as a emblem that focuses on WordPress, we needed to have a evidence of thought WP web page that presentations a higher means of doing issues.
Key Benefits of Having a WordPress Site
Do you already use WordPress? Then you know the way easy self-controlled on-line publishing turns into with it. Sure, there is also third-party services and products which are even more straightforward to use, however in change they personal your content material.
For those that don’t but use WordPress as a content material control machine for his or her web page… You’re more than likely considering: “Why bother? The static site works fine. Why fix something that’s not broken?”
Here are one of the crucial benefits when put next to static websites:
- Ease of setup – no unending coding with ready-made subject matters. Changing the real design of a static web page is incessantly fairly tedious and calls for plenty of coding. On WordPress it’s easy.
- Very easy to upload new content material – including a new piece of content material additionally calls for HTML talents whilst you use a static web page. A CMS like WordPress best provides code view as a sophisticated choice. You don’t truly want it.
- Quick design adjustments – for each the whole web page web page and person components, you’ll be able to transfer widgets (like a listing of the newest feedback for instance) on WordPress very easily. A static web page calls for steps equivalent to a redesign.
- One-click complicated options – you’ll be able to upload many options by way of simply in search of them in a massive library of plugins. A static web page calls for customized programming to permit that.
- Automatic add to the server – no FTP gear wanted. In the previous, you had to add photographs and HTML pages manually the use of the document switch protocol. WordPress does that within the background when you keep within the browser (Chrome, Firefox, Opera).
- User and contributor control – it’s a breeze when the use of the most well liked CMS. It’s nearly unimaginable on a static web page. You want to give FTP get right of entry to rights and so forth.
- Use case adjustments are not any downside – you need to flip your web page into an internet retailer? No downside with WordPress. A static web page has to be totally remade from the bottom up.
- Great evaluate of your content material belongings – you’ll be able to see what number of articles you could have to your web page, what number of feedback and what number of photographs. You too can briefly seek for them.
In essence, a static web page could be very restricted in scope and difficult to replace or trade. Even as a internet developer you wish to have a important period of time to enforce elementary adjustments or to upload new content material.
WordPress simplifies all of the not unusual content material and web page advent, in addition to optimization duties. You can resolve issues briefly and totally free, and no longer want the funds to duvet a complete group of professionals.
Upcycling Existing Design and Code
Long tale quick—it was once about time to create a correct web page with a WordPress backend, and a customized theme at the means too. John, our lead front-end developer approached the duty enthusiastically. Here’s the way it went. (Spoiler Alert: it labored!)
We sought after to stay our present design and the feel and appear as a substitute of making a new one. We additionally didn’t need to code the web page once more from scratch.
Ideally, we’d be ready to replica and paste the web page into WordPress. Of route, actually that’s a a lot more complicated procedure. So, let’s take a have a look at the nitty-gritty.
First of all, the purpose was once to reuse the present HTML/LESS code written for Laravel—one of the most popular PHP frameworks. The present frontend module used to show the homepage was once to keep intact. In different phrases, rewriting issues was once an choice.
Creating a Custom WordPress Theme – Where to Start?
Building an HTML web page is beautiful simple as soon as you know the way the elemental markup language works. Creating a web page in WordPress calls for extra than simply undeniable HTML and a few types, regardless that. You want to make a template or theme in WordPress lingo.
The first step was once to create the skeleton for a clean theme. In order no longer to get started from scratch, the internet dev made up our minds to use the
In order to reuse our types and scripts, it appeared that we’d want some further parts to be ready to collect the LESS and the ReactJS information. After a number of checks, we had been ready to take the similar programs used for the present homepage model. Hooray!
The subsequent query was once how to make the present content material of the Homepage editable. Understandably, the developer sought after to reuse the similar template that was once already operating in Laravel.
Does Gutenberg Slow Down or Speed up the Process?
This solution is… it relies. For this challenge, we needed to use the brand new Gutenberg block characteristic to make it suitable with the brand new WordPress editor. Thus, the targets had been:
- make the content material editable by way of the use of the brand new WordPress editor
- reuse the so-called blade/html template written in Laravel
After investigating the brand new Gutenberg editor: the way it works when it comes to modifying a web page, the block ideas and so forth., it become obvious that writing a customized Gutenberg block is beautiful tedious.
Instead, you’ll be able to use a plugin known as Block Lab, which gives a means to create a number of customized blocks hooked up to a PHP template.
That was once beautiful cool as a result of we had been ready to make the web page editable (good enough, partly editable in reality) and John controlled to reuse his earlier HTML template.
As chances are you’ll consider, we’re no longer merely on the lookout for a static homepage. We additionally had to imagine:
- background photographs
- customized alignments
- “float” textual content
- dynamic content material
- person interplay
Would we be ready to translate all that into WordPress? It’s no longer a easy activity, however even though we weren’t ready to regulate the whole thing from the backend, lets nonetheless edit the content material. Crucial web page components corresponding to headlines and paragraphs amongst others are already editable. John was once positive that we’d ready to toughen the modifying in a 2d step.
The subsequent problem was once how to get the dynamic knowledge comparable to the product listing. Fortunately, we had been ready to get textual content from the JSON listing at once from the outdated model by way of the use of a Request API.
In impact, this enabled us to get the product listing from the ProWP Dashboard. Thus John effectively recreated the complete Homepage inside of WordPress.
So What Did We Learn?
Moving from a static one-page web page (or slightly a touchdown web page) to a fully-fledged customized WordPress theme—one who was once in line with our personal branding tips—indisputably offered some demanding situations.
Overall, alternatively, it confirmed that you’ll be able to trade the WordPress habits and the theme construction very easily. Once you know the way it’s carried out, the real paintings is easier than chances are you’ll first be expecting.
We at all times check out to get new studies once we expand one thing. More particularly, we at all times search to create one thing reusable. Ideally, people will likely be ready to use our gear for his or her web pages too. This means we will be able to give back to the WordPress community and the open source community in general.
Giving Back to the WordPress Community
In this situation, John has created an open supply challenge—a framework which can be utilized to create a WordPress theme from scratch. It’s nonetheless a tough cartoon but it surely’s the similar one we in reality used effectively within the present ProWP theme.
The theme framework is known as WP Spock and is authorized underneath the GPL 3. You can use it and regulate or give a contribution in different ways. So sign up for within the a laugh! You too can merely obtain WP Scotty. It’s a ready-made boilerplate theme.
Thus this challenge has been a twofold good fortune. Not just for us—reaching our goal of transferring a web page from static HTML to WordPress. But we had been additionally ready to make the method and gear to be had for the wider public. It turns out we will be able to be glad with the result!
Check out the results of our—principally John’s—paintings: the real WordPress-based ProWP site. Do you realize the variation? Probably sure: it’s quicker clearly!