WordPress is a popular CMS nowadays, especially for beginners who don't want to code and just need drag-and-drop options. But when you master coding, you can take a WordPress site to the next level. In this article, I will explain how I created a WordPress theme without any PHP or JS knowledge.
I started my blog on a Blogger website with a simple theme. Day by day, I posted quality content, and people began to like my posts. However, I am not entirely satisfied with my site in terms of optimization.
Switching between CMS (Blogger to WordPress)
Blogger CMS is powered by Google; however, their developers don't allow PHP in the CMS. It only supports HTML, CSS, and JavaScript. Sometimes, we can use pre-built Blogger codes to handle certain outputs. My main issue is with performance and optimization for Core Web Vitals. Despite having many ideas to make my site faster, it was not possible without PHP support in the CMS.
Until September 2023, I had planned to use ChatGPT as my personal coder. I have been using ChatGPT for almost 8-9 months, and I know how to write prompts to get the expected response. So, I started building the WordPress theme.
Since I already have a Blogger template with pre-built CSS and HTML, I don't need to worry about the design.
I began by creating basic WordPress files, such as functions.php, header.php, and footer.php. Additionally, I added author pages, category pages, and archive pages.
In the header, I included a theme switch button for dark and light modes. I also made the mobile header transparent and blurry, inspired by the design of X, formerly known as Twitter. I have a dummy website where I test all the functions, and after proper implementation, I apply them to the main website.
Furthermore, I added related posts based on tags and categories with proper logic to improve the website's structure. An author box was included to showcase the author's expertise.
Recognizing that some readers avoid lengthy (TL;DR) articles, I drew inspiration from the GameRant website and started adding highlights at the beginning of articles. These highlights attract the reader to read the full article.
Even though I don't have PHP knowledge, the website is now fully functional. The big credit goes to ChatGPT and OpenAI for making such revolution in AI world.
The SEO Part
When migrating from one CMS to another, it is important to take care of the current SEO of the website. Since I have a pre-built HTML CSS structure (from my Blogger template), there won't be any changes in layout and style when migrating to WordPress.
The main thing is to do with URL slug and proper 301 redirection. To maintain proper URL structure, I changed my WordPress slug permalink structure to domain name/year/month/post-title and then .html. Then added a simple functions.php code for temporary to trigger some URL Changes. A WP Beginner article helped me a lot to maintain proper SEO.
Make the Performance Light Speed⚡
Now I have full access to the PHP language to improve performance. I have implemented various lazy loading techniques and utilized the Intersection Observer API to avoid loading images below the viewport.
Next.js, React.js, Vue.js are mostly used to build high speed web apps. I frequently observe similar websites in my niche, such as IGN, Dexerto, and GAMINGbible. Most of them use different frameworks and CMSs instead of WordPress. What attracts me most to these sites is their quick routing without a full page reload. Once a user loads the site, all subsequent visits are super fast.
Since I have no knowledge of Headless WordPress, I decided to go with Turbo. Hotwire Turbo does almost what I need – it replaces content within the body on subsequent visits, eliminating the need for a full page reload. Additionally, Turbo offers custom events like load, visit, and before-render, which make my sites fully functional for further navigation.
Would you like to check out the site? It's called Rising Insider, where I post gaming-related content and news, especially updates on mobile games.
Check my work that is live on RisingInsider.com
If you have any questions related to my creation, then comment down below. I don't visit Dev Community very often, but I do explore the world of coding there twice a week. 🧑💻
Top comments (0)