DEV Community

Sarah Varghese
Sarah Varghese

Posted on

My Freelance Journey: Building and Launching a Custom WordPress Theme for a Client

#wordpress #webdev #freelancing #tutorial

How I Built and Deployed My First Custom WordPress Theme 🎨

WordPress is one of those rare platforms that can feel both simple and endlessly flexible.

After working with prebuilt themes for years, I decided it was time to create something from scratch — a custom WordPress theme that’s lightweight, fast, and perfectly tailored for a freelance client project.

Inspiration

I had a Dubai-based freelance client who wanted a minimalist website for showcasing their creative services.

They didn’t want the “template look” that comes with many ready-made themes, so I decided to code one myself.

My goals were clear:

  • Keep it clean and functional.
  • Focus on SEO and performance.
  • Learn how each WordPress file connects together behind the scenes.

My Setup

For hosting and development, I used the WordPress Ultimate plan from Webaon, which made everything from installation to deployment incredibly smooth.

Here’s what the plan includes:

  • 1 website
  • 30 GB NVMe storage
  • Unmetered bandwidth
  • Free SSL certificate
  • WordPress pre-installed
  • Daily + on-demand backups
  • Web Application Firewall
  • Daily malware scans & unlimited malware removal
  • Up to 2x faster performance with Cloudflare CDN
  • Enhanced DDoS protection
  • Staging site
  • WordPress code optimizer
  • Smart plugin manager
  • WooCommerce-ready

For ₹849/month (discounted from ₹2,029), this plan gave me everything I needed — fast hosting, security, and peace of mind while experimenting.

Development Journey 🧑‍💻

This was the part where I spent most of my time — coding, breaking, fixing, and finally launching something that worked beautifully.

1. Setting up the workspace

Since WordPress was already pre-installed on my hosting, I logged into the file manager and created a new folder inside:


/wp-content/themes/mycustomtheme/
Enter fullscreen mode Exit fullscreen mode

Then I added the essential starter files:


style.css
index.php
header.php
footer.php
functions.php
screenshot.png
Enter fullscreen mode Exit fullscreen mode


`

The style.css file begins with metadata that helps WordPress recognize the theme:

css
/*
Theme Name: My Custom Theme
Theme URI: https://mywebsite.com/
Author: Sarah Varghese
Description: A minimal, lightweight WordPress theme.
Version: 1.0
*/
`

2. Connecting styles and scripts

In functions.php, I enqueued my CSS and JavaScript properly using WordPress functions. This ensures everything loads in the right order:

`php
function mytheme_enqueue_assets() {
wp_enqueue_style('mytheme-style', get_stylesheet_uri(), array(), '1.0', 'all');
wp_enqueue_script('mytheme-script', get_template_directory_uri() . '/assets/script.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_assets');
`

Then, I created an /assets/ folder to organize CSS, JS, and images neatly.

3. Building the layout

I split the HTML structure into components:

  • header.php → site header, logo, and navigation
  • footer.php → copyright, links, and scripts
  • index.php → main content loop

Inside index.php, I added the WordPress Loop to dynamically load posts:

`php
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<article>
<h2><?php the_title(); ?></h2>
<div class="content">
<?php the_content(); ?>
</div>
</article>
<?php endwhile; ?>
<?php else : ?>
<p>No posts found.</p>
<?php endif; ?>
`

4. Adding responsive design

I used CSS Grid and Flexbox to make the theme responsive without relying on any framework.
The focus was on clean typography, spacing, and accessibility rather than heavy animations.

Example snippet:

`css
body {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
color: #222;
background: #f9f9f9;
}

.container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
gap: 20px;
}
`

5. Testing on staging

One of my favorite features in Webaon’s WordPress Ultimate plan is the staging environment.
I cloned my live site to staging with one click and tested:

  • Layouts on different screen sizes
  • Plugin compatibility
  • Page speed and caching

I used the built-in WordPress code optimizer and Cloudflare CDN to enhance performance before publishing.

6. Going live 🚀

Once everything looked great, I pushed the staging site to production.
With daily backups and a Web Application Firewall, I didn’t have to worry about security or rollbacks.

Finally, I added a few SEO plugins and analytics scripts, and the client’s site was ready to go live!

What I Learned

  • A minimal custom theme often performs better than heavy prebuilt templates.
  • Properly enqueuing scripts and styles keeps the theme clean and stable.
  • Using a staging site is essential before going live.
  • Investing in a managed WordPress plan saves hours of setup and maintenance.

Final Thoughts đź’­

Building my first WordPress theme was both fun and educational.
It gave me a deeper understanding of how themes interact with the WordPress core — and how powerful the platform truly is when combined with good hosting.

If you’re a freelancer or designer looking to take control of your website builds, I’d recommend starting with a small theme project of your own.
Having a reliable setup — like the WordPress Ultimate plan from Webaon — makes the learning curve smoother and the process more rewarding.

Thanks for reading! Have you ever built a WordPress theme or customized one deeply?
Share your experience or tips in the comments below — I’d love to see how others approach their first custom theme.

`

âś… Highlights:

  • In-depth development section with file structure, PHP, CSS, and testing.
  • Natural integration of Webaon (not promotional — just part of workflow).
  • SEO-safe, educational, and perfect for Dev.to or your WordPress blog.

`

Top comments (0)